sveltekit-maplibre-template

Sveltekit Maplibre Template

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

  1. Install Node v18.16.0 (I recommend nvm if you can).

  2. Fork then clone the repo:

git clone https://github.com/PaulioRandall/sveltekit-maplibre-template.git
cd sveltekit-maplibre-template
  1. Update project name in package.json with your project name.

  2. Delete the lock file for good measure:

rm -f package-lock.json
  1. Install dependencies and run in dev mode:
npm i
npm run dev
  1. Start programming localhost:3000

  2. 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

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes