How to make a Replit template
If your Repl can be used as a good starting point for other project, you might want to submit it as a template! Let's learn what a Replit template is and how to make a good one.
What is a template?
Templates are a type of published repl. They appear on the Replit Templates page, where you'll find different kinds of templates. The official templates, made by Replit, have a checkbox next to the name of the template:
Other templates have been created by community members, like this one:
Let's learn how to make a template.
Creating a template
You can learn how to make a repl by following this guide. Make your published repl a template by checking the "Submit as Template for Review" box in the last step of the publishing flow. The Replit team will review your template before it is live on the Templates page.
Before you submit your template, make sure it's as easy to use as possible. It should include all the boiler plate code that is needed to get a project started, and it should work right away when the "Run" button is pressed.
A good template should always include well-commented code, easily editable variables, and a README file. It's always important to comment your code, but it's even more important when others will be using your code for their own projects. In the
README.md file, add descriptive details about your template, and information about the variables that the user can change. READMEs help users understand how your template works, and if there are any requirements, licensing, or other factors they should be aware of.
README.md stands for Markdown, which is a basic text language. READMEs can be written in any text format, but we'll use Markdown as it's the best pratice.
Here's an example outline for a README - feel free to use this for your own templates!
# Template Name
Choose a self-descriptive name, you can also add a simple description about your template.
Explain how you can install / use this template. Make sure to provide a detailed explanation and make it easy for people to read. Also, add any code snippets if needed.
This will define how people can use your template. You can visit https://opensource.org/licenses to choose a license.
You can also edit your submitted template and share update messages to show how your project has changed over time.
Let's take a look at a practical example of a community template.
A practical example: Creating the Phaser Vite starter template
We created this Phaser Vite starter template to show you how you can create your own templates in Replit. The Phaser Vite starter template includes everything you need to create a Phaser game in Replit.
The Phaser Vite starter template is quite complex, as it provides for developing your game as well as creating, serving, and downloading the production bundle. You can do all stages of development in your browser. Many Replit templates are less complex, such as the HTML, CSS, JS template. But the Phaser Vite starter template makes for a good example template, since it shows you how you can use Replit's features to handle multiple run commands.
The Phaser Vite starter template is configured to build a production-ready bundle of a Phaser game.
The template has some basic starting code that demonstrates these useful features of Phaser 3 for building games:
- Loading game assets: images.
- Moving a sprite.
- Adding physics.
- Adding user input.
- The Scale Manager, which handles responsive game layout.
- Adding text.
The following Vite commands are available in the template:
npm run devruns
viteto start the dev server.
npm run buildruns
vite buildto build the production bundle to the
npm run previewruns
vite previewto serve the production bundle.
When you fork the template, the npm packages in the
package.json file are automatically installed.
Setting up the development server
To get the dev server template working in Replit, we needed to add a
vite.config.js file and configure it to conditionally determine the configuration options based on the Vite command used:
build. You can read more about conditional Vite configuration in the Vite docs.
Configuring the "Run" button
.replit file is used to determine what the repl "Run" button will do. The
.replit file is hidden in most repls. You can show the hidden files by clicking the three dot menu in the file tree of the repl template, and selecting "Show hidden files". In this template, the
.replit file is modified to make the "Run" button run different Vite commands for development and production.
The "Run" button is initially configured to run the dev server. You can see this in the
# run dev
run="npm run dev"
entrypoint command is the name of the main file. It's the file that will be run and is shown by default when opening the editor. For development, the
/src/main.js file is used.
Creating the production build bundle
Once you have finished building your game, you can create a production build bundle of your game by running the following command in the "Shell" tab:
npm run build
This creates a production build bundle that is added to the
To view the running production bundle code, the
.replit config file needs to be altered so that the
vite preview command is run when the "Run" button is pressed. The dev commands need to be commented out and the commands for running the production build need to be added:
# run dev
# run="npm run dev"
# run production build
run="npm run preview"
When you bundle your code using Vite, a random hash is added to the
js files. The hash in the
js file of the
entrypoint command of your bundle would be different from the one above.
Downloading your production bundle
If you want to use your production bundle elsewhere, you can download it as a zip file by running the following command in the "Shell" tab:
zip -r myPhaserGameDownload.zip dist
This will create a zip file named
myPhaserGameDownload.zip in the file tree. You can download this zip file by clicking the three dot menu that appears next to the zip file name when you hover your mouse over the zip file, or by selecting the zip file and clicking "Download".
To create the zip file, the Nix
zip package is added to the repl. It's used to create a zip folder of your production bundle that you can download. If you have a repl that does not have the
zip package installed and try to use the
zip command in the "Shell" tab, you will get the following message in the shell:
zip: command not installed, but was located via Nix. Would you like to run zip from Nix and add it to your replit.nix file? [Yn]
If you type
y, you will then get the following message in the shell:
Adding zip to replit.nix
If you look in the
replit.nix file, you will see that the dependency (
deps) will be added:
This adds the Nix
zip package to the repl. This dependency is already added to the Phaser Vite starter template.
You can also download the whole project by clicking the three dot menu in the file tree and selecting "Download as zip". This method downloads the whole project, including all of the node modules from the project dependencies.
You can enable or disable Phaser 3 features in the
vite.config.js file to optimize your production build. Disable features you don't need to reduce the bundle size.
A note on choosing libraries
When creating a template that uses a specific library, it's a good idea to consider alternative libraries to determine which one will make the best template.
To further reduce bundle size, the configurations of each bundler can be tweaked to optimize the build for a particular project. For example, Storybook compared Webpack and Vite bundling and found that Vite produced smaller production bundles for published Storybooks.
Ultimately, we chose Vite to make this Replit Phaser template because of its ease of use and fast development build times, which makes for a better developer experience. Vite also updates the development server when code changes, even before the file is saved. It has very fast Hot Module Replacement.
Here are some resources to learn more about submitting and configuring templates, configuring Vite, and creating a Phaser 3 game:
- Sharing Your Repl
- Replit's new publish flow
- Configuring a Repl
- Repl Space and Templates
- How Replit went from supporting 50 languages to all of them by using Nix
- Configuring Vite
- Making your first Phaser 3 game
Replit hosts Template Jams, template-building competitions with cash prizes for the winning templates. Look out for the next one if you're interested and follow the Replit Twitter account to get the latest Replit news.