|
Want to learn Svelte 3 and how to build a Single-Page App (SPA) with it (and with this router)? Check out my book Svelte 3 Up and Running on Amazon. |
This is a project template for Svelte apps that includes svelte-spa-router for client-side routing, and Rollup as bundler.
This template is based on the official template for Svelte: sveltejs/template.
To create a new project based on this template using degit:
npx degit italypaleale/svelte-spa-router-template svelte-app
cd svelte-appNote that you will need to have Node.js installed.
svelte-spa-router is a client-side router for Svelte 3 apps that leverages hash-based routing (i.e. stores the current view in the URL after the # symbol).
You can read more about the router, and the reasons why you might want to use hash-based routing (or not), in the documentation.
Install the dependencies…
cd svelte-app
npm install…then start Rollup:
npm run devNavigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
You can add more routes by defining them in the src/routes.js file. More information can be found on the documentation for svelte-spa-router.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.
If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
To create an optimized version of the app:
npm run buildYou can run the newly built app with npm run start. This uses sirv too.
This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
node scripts/setupTypeScript.jsOr remove the script via:
rm scripts/setupTypeScript.js