Svelte Routify Typescript Template

Svelte template with various useful features:

• Typescript and SASS/SCSS integration via svelte-preprocess

• Babel support (compatible with IE11)

• File based routing using Routify

• Hot module reloading

• PWA support, with autogenerated pre-caching

• Quality-of-life Rollup plugins (del, copy, replace)

• 2 bundle outputs for modern and legacy browsers following the module/nomodule pattern

Prerequisites

• npm

• node.js

Getting Started

1. Clone the repo

2. Install npm dependencies

   npm i
   

3. Start the server in development mode. Server listens on localhost:5000. Changes to source files should be reflected on the webpages

   npm run dev
   

4. Build for production when ready

   npm run build
   

5. Serve static bundle

   npm run start
   

Details

Syntax Highlighting

VS Code can offer properly syntax highlighting for Svelte files using the Svelte plugin. A svelte.config.js file must be exposed in the root directory of your project.

The Svelte plugin can also offer proper syntax highlighting for Typescript code in <script> tags and SASS/SCSS in <style> tags. Just remember to include <script lang="typescript" or lang"ts"> for Typescript and <style lang="sass" or lang="scss"> for SASS/SCSS.

PWA

Boilerplate code is autogenerated by integrating Workbox Build with a Rollup plugin. Currently, template uses generateSW to generate the service-worker files, with precaching configured to cache all files in the generated bundle and static assets. Runtime caching can be added by adding the appropriate options into the workboxGenerateSW plugin in rollup.config.json.

The installation prompt for installing the application to the home screen is not set up by default, but can easily be configured by importing deferredPrompt from src/register-sw.js.

In-progress

Here are some features that are currently being worked on:

• PostCSS integration

• Custom type declaration for certain modules to resolve error messages during build stage