spa-to-http

Lightweight zero-configuration SPA HTTP server. Serves SPA bundle on HTTP port which makes it play well with traefik

Benefits

• Zero-configuration in Docker without managing additional configs
• 10x times smaller then Nginx, faster startup time, a bit better or same performance
• Plays well with all popular SPA frameworks and libraries: Vue, React, Angular, Svelte and bundlers: Webpack/Vite
• Supports Brotly compression on original files, you don't need to archivate files by yourself, it does it for you
• Written in Go, which makes it fast (no overhead on runtime) and tiny (small binary size)
• Open-Source commercial friendly MIT license
• Optimal statics caching out of the box: no-cache on index.html file to auto-update caches and infinite max-age for all other resources which have hash-URLs in most default SPA bundlers.
• Plays well with CDNs caching (e.g. Clouflare), support for ignoring cache of fixed URLs like service worker
• Created and maintained by Devforth 💪🏼

Spa-to-http vs Nginx

Performence accroding to Spa-to-http vs Nginx benchmark (End of the post)

Hello world & ussage

Create Dockerfile in yoru SPA directory (near package.json):

FROM node:16-alpine as builder
WORKDIR /code/
ADD package-lock.json .
ADD package.json .
RUN npm ci
ADD . .
RUN npm run build

FROM devforth/spa-to-http:latest
COPY --from=builder /code/dist/ . 

So we built our frontend and included it into container based on Spa-to-http. This way gives us great benefits:

• We build frontend in docker build time and improve build time for most changes (npm ci is not getting rebuild if there is no new packages)
• Bundle has only small resulting dist folder, there is no source code and node_modules so countainer is small
• When you start this container it serves SPA on HTTP port automatically with best settings. Spa-to-http already has right CMD inside which runs SPA-to-HTTP webserver with right caching

Example serving SPA with Traefik and Docker-Compose

version: "3.3"

services:

  traefik:
    image: "traefik:v2.7"
    command:
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"

  trfk-vue:
    build: "spa" # name of the folder where Dockerfile is located
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.trfk-vue.rule=Host(`trfk-vue.localhost`)"
      - "traefik.http.services.trfk-vue.loadbalancer.server.port=8080" # port inside of trfk-vue which should be used

How to enable Brotli compression:

 trfk-vue:
    build: "spa"
++  command: --brotli
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.trfk-vue.rule=Host(`trfk-vue.localhost`)"
      - "traefik.http.services.trfk-vue.loadbalancer.server.port=8080"

How to change thresshold of small files which should not be compressed:

 trfk-vue:
    build: "spa"
--  command: --brotli
++  command: --brotli --threshold 500
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.trfk-vue.rule=Host(`trfk-vue.localhost`)"
      - "traefik.http.services.trfk-vue.loadbalancer.server.port=8080"

How to run container on a custom port:

 trfk-vue:
    build: "spa"
++  command: --brotli --port 8082
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.trfk-vue.rule=Host(`trfk-vue.localhost`)"
--    - "traefik.http.services.trfk-vue.loadbalancer.server.port=8080"
++    - "traefik.http.services.trfk-vue.loadbalancer.server.port=8082"

Ignore caching for some specific resources, e.g. prevent Service Worker caching on CDNs like Cloudflare:

 trfk-vue:
    build: "spa"
++  command: --ignore-cache-control-paths "/sw.js"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.trfk-vue.rule=Host(`trfk-vue.localhost`)"
      - "traefik.http.services.trfk-vue.loadbalancer.server.port=8080"

This is not needed for most of your assets because their filenames should contain file hash (added by default by modern bundlers). So cache naturally invalidated by referencing hashed assets from uncachable html. However some special resources like service worker must be served on fixed URL without file hash in filename

Available Options: