Minimal Svelte / Routify / Materialify SPA template

What's in the box:

• Svelte rollup (via degit)
• Routify "Install to existing project" (via npm i)
• Materialify "Advanced Install" (via npm i)

Setup notes:

• Rollup has been configured to emit modules (as Routify expects) to public/modules.
• Materialify requires svelte-preprocess. Postinstall message from svelte-preprocess: echo "[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: node-sass/sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc..."
  • hence: npm i -D node-sass
• Following Materialify advanced install, continue to Materialify Usage and follow the instructions
• Make sure public/index.html has the proper css and js import statements
• TODO: add nollup some day
• Here are some details about overriding the materialify theme:
  1. Make sure your svelte.config.js preprocess includePaths match the location of _material_theme.scss
  2. Make sure your rollup.config.js properly imports the preprocess from svelte.config.js
  3. Do not rename _material_theme.scss (materialify is hard coded to that name!)
  4. Custom overrides must import from svelte-materialify/src` which is not compiled.

Containerization notes:

• You may wish to create a simple, small, fast container that can run anywhere.
• This Dockerfile runs a multistage build:
  1. First (intermediate) container uses node to build the app.
  2. Second (final) container copies the output of npm run bulid (public folder) into a minimal linux distro to run the nginx web server.
• The nginx-spa.conf, configured for an SPA, is copied into the container. You should review and refine this file to suit your needs.

To prepare and run your containerized SPA:

1. Install Docker on your system.
2. Build the docker image following the directives in the Dockerfile docker build -t johnknapp/spa-template . Change the tag name as needed.
3. Run the image you just built in your local development environment. docker run --rm -p80:8080 johnknapp/spa-template. (The --rm flag removes the container upon exit.)
4. Think about the nginx listenting port and the docker container external:internal ports you use.

Common docker commands to know:

• docker help
• docker image ls
• docker image prune
• docker ps -a
• docker exec -it <cid> /bin/sh (container id)
• docker container logs -f <cid>
• docker container prune

Deployment notes:

• Before you can deploy your containerized SPA, you need to push your container to a container registry. Registry details for two popular low-cost hosting options:
  • Heroku Container Registry
  • Google Cloud Platform Container Registry
• You may also choose to push your container to a private container registry you host yourself or use Docker Hub or a similar service.