Using Starter Templates

If you use CodeSandbox, when you create a sandbox or a devbox, you will use a starter template by choosing one of the available templates on the CodeSandBox site. But, if you find that none of the provided templates matches what you want, you can create a custom template and use that for your starter template. If you are not working with CodeSandbox, you are probably using vite to give you the same kind of experience. So, it makes sense to have a starter template that can be used with vite. That is what this guide is about.

Using a CodeSandbox starter template

I created a custom CodeSandbox browser template that is for a sandbox that uses HTML and JavaScript. The JavaScript browser template is actually fine to use, but I made some changes to make a template more to my liking. If you want to use my template, start by logging into your CodeSandbox account. Take note of the name you have given to your project:

In my case, I have named my project example_area.

Keeping your CodeSandbox account open, you can go to the following link in the browser: Frontend for practicalcompute.cc.

This will open up the template in CodeSandbox. You will see a view that looks like the following screen shot. Click on the Fork drop-down and select your project name:

When you create the fork you will see something like the following view:

Note that the project name has been changed and that the sandbox has been given the name intelligent-http-gfmp5n. Also, note that I opened up the Console in the Preview area, so you can see the result of the init() function in index.mjs. Go back to your Dashboard, locate this sandbox and click on the elipsis for Sandbox actions and select Rename. Choose the name you want for your sandbox.

From that point forward, you can just edit your sandbox the way that your normally do. Note that this template does make use of an additional .mjs file called myclasses.mjs. This is just to demonstrate how you can define your own JavaScript classes in such a file. The index.mjs shows how to import a class from myclasses.mjs. Note the following line:

import { Student } from "./myclasses.mjs";

Also, note in myclasses.js how the export keyword is used, to make that class (or a function) available outside of this file:

export class Student {

When you have additional .mjs files that you want to use in other JavaScript files, those are the steps that must be taken to conform with the ES6 Module style.

Using a starter template for vite

I have created a starter template for vite on one of my GitHub accounts. You need to have Node.js and npm installed on your computer. To use this template, change to your ~/Documents folder (or wherever you want to store your project). Then, you just need to run degit to start the process:

$ cd ~/Documents
$ npx degit takebayashiv-cmd/vite-template-my-project newproject

Substitute the project name you want for newproject

This will take a minute or so to run. Then, run the following commands:

$ cd newproject
$ npm install

Again, substitute your project name for newproject.

To start up the vite server, make sure you are in the newproject directory and run the following:

$ cd ~/Documents/newproject
$ npm run dev

You can open up your browser to localhost:5173 to see the application running. Here is a screen shot showing the project running with the DevTools console open:

Note that I have a different <h1> element inside index.html from the CodeSandbox template. But, this does not matter as you will wind up changing that for your project anyway.

You can start up Visual Studio Code and open the newproject folder, to edit the files for this project.

Creating your own template for CodeSandbox

For a simple template, it is easy to create your own custom template for CodeSandbox. If you have special needs for a complex template, such as one that uses Docker containers, you would create this in a similar fashion what is shown in the next section (Creating your own template for use with vite). But, assuming you just have a simple frontend project, creating a custom template for this is straightforward. Assume that you already have a CodeSandbox sandbox that you want to convert into a template. You would start by opening the SANDBOX INFO drop-down inside the EXPLORER area.

With the SANDBOX INFO drop-down opened, click on the Edit button (looks like a pencil). Then, make the following changes:

After making those changes, go back to your Dashboard. You will see that the sandbox has been changed to a template.

Open up this template, and click on Share. This will bring up a box where you can find the Share URL. Just click Copy to get the link. You can use this to share with other people.

Creating your own template for use with vite

This is a more involved process than creating a template on CodeSandbox. Assume that you have a folder called myproj inside your ~/Documents folder. The myproj folder contains all the files for your web project. So, for example, you might have a folder structure like this:

myproj
├── dist
│   ├── assets
│   ├── index.html
│   └── vite.svg
├── index.html
├── index.mjs
├── myclasses.mjs
├── node_modules
│   ├── @esbuild
│   ├── esbuild
│   ├── fdir
│   ├── nanoid
│   ├── picocolors
│   ├── picomatch
│   ├── postcss
│   ├── @rollup
│   ├── rollup
│   ├── source-map-js
│   ├── tinyglobby
│   ├── @types
│   └── vite
├── package.json
├── package-lock.json
├── public
│   └── vite.svg

This is a project that is using vite and has already been built using the npm run build command. So, it contains a dist folder that contains the built files. So, what you need to do is to remove the node_modules folder and the dist folder (if the dist folder exists). You also need to remove the package-lock.json file.

Next, you need to add the file vite.config.js to the main folder. The contents of that file will be the following:

vite.config.js

import { defineConfig } from 'vite';
export default defineConfig({});

With these changes, the directory structure will look like this:

myproj
├── index.html
├── index.mjs
├── myclasses.mjs
├── package.json
├── public
│   └── vite.svg
└── vite.config.js

Creating a repository on GitHub

You will need a repository on GitHub for this project. Refer to this guide: Backing up your work - Using a cloud repository GitHub. That explains how to get a GitHub account, generate SSH keys and use the Deploy keys tool to use the SSH public key you have stored on your computer. That guide will also show you how to create the remote repository on GitHub. If you already have used a SSH pub key for another one of your repositories, you must create another one.

For this usage, let’s assume that you want to call this repository my-vite_template. Set the visibility to Public. Then, click on Create repository.

Follow the instructions with the above guide to go to Settings for the repository you just created, and select Deploy keys. Add deploy key by copying the pub key from your computer to the GitHub repository as shown in that above guide. Make sure that you check the write access box.

Setting up the local project directory

If you have set up the GitHub repository as in the section above, go to your local computer and change into your project directory. Execute the following commands:

$ cd ~/Documents/myproj
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git branch -M main
$ git remote add origin git@github.com:<username>/my-vite-template.git
$ git push -u origin main

Substitute your GitHub username for <username>.

you should see something like this:

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 12 threads
Compressing objects: 100% (8/8), done.
Writing objects: 100% (9/9), 1.85 KiB | 631.00 KiB/s, done.
Total 9 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:takebayashiv-cmd/my-vite-template.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Using the template on GitHub

You use the same commands as discussed as above: Using a starter template for vite, once your GitHub repository is set up. That is you run the following commands:

$ cd ~/Documents
$ npx degit <username>/my-vite-template newproject2
$ cd newproject2
$ npm install
$ npm run dev (to start up the vite server)

Substitute your GitHub username for <username>