Sveltekit Template

A Sveltekit project template with Prettier, Jest, and Cypress setup and ready to go.

I've also added svelte-preprocess-import-assets. I found this helps allows me to keep data files and images that are specific to a page in the same folder as the +page.svelte that uses it rather than in /static.

To start a new project

1. Clone the repo and delete the lock file:

git clone https://github.com/PaulioRandall/sveltekit-template.git
cd sveltekit-template
rm -f package-lock.json

2. Update project name in package.json with your project name.

3. Install Node v18.16.0.

4. Install, build, and run:

npm i
npm run build
npm run dev

5. Enjoy at localhost:3000

6. When you are ready to commit and push changes use the following to run a full format, build, code test, and service test:

npm run commit

You'll know if everything is good because you'll get a curated ASCII scene. This can be changed by modifying ./scripts/well-done.txt:

                                       ...oo000o.
                                                 00oo.
  __________  _________  ______  _____________        oo.
  |        |  |       |  |    |  |           |  _____    o
  | You're |  | Ready |  | To |  | Integrate |  |__D|____][_
  |________|%%|_______|%%|____|%%|___________|%%|_~~~~++++~_}
   @~@~~@~@    @~~@~~@    @~~@    @~~@~~~@~~@    @~~@~~~@~~@ 

Stuck or curious

Format code?

npm run fmt

Modify .prettierrc.json to customise styling.

Delete build directory?

npm run clean

Environment variables?

All environment variables must be prefixed with VITE_ or they won't be accessible by Sveltekit through Vite.

At the start of a build ./scripts/build-env.sh is run that generates a .env file in the root of the project. This file is ignored by Git. Add new variables by modifying the build-env.sh script. Changing .env will result in your changes being wiped on the next build.

To rebuild this file without rebuilding the project use the following:

npm run prebuild

If you don't need this just delete ./scripts/build-env.sh and remove the calling command from the scripts object in package.json.

Permission denied?

sh: 1: ./scripts/build-env.sh: Permission denied

If you get a permissions error like the one above then you'll just need to give yourself permissions to execute the file. Something like:

chmod 744 ./scripts/build-env.sh

If you're on Windows you'll have to figure that out your self. Sorry.

Production build warning

    Could not detect a supported production environment...

Don't worry if you get a build warning like the one above.

When the time comes to deploy to development and production environments you'll want to research SvelteKit adapters.

Since I use Vercel to host my personal website I use @sveltejs/adapter-vercel. There are many others and you can write your own. I've written a custom Express adapter before and it's not too difficult; just a little tedious due to extra work needed to test it.