Sveltekit Maplibre Template

PaulioRandall

A Sveltekit template for building MapLibre applications

Sveltekit MapLibre Template

A minimalist MapLibre Sveltekit template with Prettier and a few super simple components to get you started.

Getting started

Install Node v18.16.0 (I recommend nvm if you can).
Fork then clone the repo:

git clone https://github.com/PaulioRandall/sveltekit-maplibre-template.git
cd sveltekit-maplibre-template

Update project name in package.json with your project name.
Delete the lock file for good measure:

rm -f package-lock.json

Install dependencies and run in dev mode:

npm i
npm run dev

Start programming localhost:3000
When you are ready to commit and push changes use:

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|____][_
  |________|%%|_______|%%|____|%%|___________|%%|_~~~~++++~_}
   @~@~~@~@    @~~@~~@    @~~@    @~~@~~~@~~@    @~~@~~~@~~@

Full list of commands

npm run fmt Format everything
npm run clean Delete build folder and caches
npm run build Build the project
npm run dev Runs in developer mode
npm run preview Builds project and starts as if it was in production
npm run commit Do all checks needed to confirm the project is ready for commit

Stuck or curious

Format code?

npm run fmt

Modify .prettierrc.json to customise styling. Or replace Prettier with your preferred formatting tool.

Delete build directory?

npm run clean

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.

Top categories