Deploying Vuero #

Building for production #

Once you have the project ready, you can build it for production.
This will generate a ./dist folder containing a static website that you can host with any static site provider.

Run the following command:

pnpm build

NODE_OPTIONS=--max_old_space_size=4096 pnpm build

This will run both the build:update-bulma-colors and build:vite scripts from the package.json file.

• The build:update-bulma-colors script will patch Bulma to allow using css variables. Read more on the Customizing Vuero - Hybrid Sass section.

• The build:vite script will generate the static production files (in the ./dist folder).

Preview the production build #

Once the production files are generated, you can preview them by running one of the following commands:

pnpm preview

This will run both the preview:vite and preview:json-server scripts from the package.json file. You can choose to only run the preview:vite script if you want to preview the frontend only.

Deploy on CDNs #

Vuero can be deployed as a fully static website. Here are the documentation reference to deploy vite static site:

• GitHub Pages
• GitLab Pages and GitLab CI
• Netlify
• Google Firebase
• Surge
• Heroku
• Vercel
• Azure Static Web Apps

Deploy with docker #

This project includes a Dockerfile which first builds Vuero for production, and then creates a tiny image with only built files, served by Nginx.

To build your image, run the following command:

docker build \
  --tag my-frontend-app:1.0.0 \
  .

To preview your image, run the following command:

docker run \
  --rm \
  --publish 8080:3000 \
  my-frontend-app:1.0.0

Access the Vuero frontend at http://localhost:3000

To run your image, run the following command:

docker run \
  --detach \
  --publish 80:3000 \
  --restart unless-stopped \
  --name my-frontend-app-container \
  my-frontend-app:1.0.0

Using docker-compose #

You can use this docker-compose.yml to do the same as above:

version: '3.7'

services:
  my-frontend-service:
    build: .
    image: my-frontend-app:1.0.0
    container_name: my-frontend-app-container
    restart: unless-stopped
    ports:
     - "80:3000"

Using Traefik with HTTP/3 #

HTTP/3 enforces making Internet connections faster, more reliable, and more secure. Born as "HTTP over QUIC", an effort to adapt the HTTP protocol to run on top of Google's own transport layer protocol, QUIC, it was later proposed as an IETF standard and it is currently an Internet Draft.

Traefik (pronounced traffic) is a modern HTTP reverse proxy and load balancer that makes deploying microservices easy. Since v2.5, HTTP/3 is implemented as an exerimental feature.
HTTP/3 work only over TLS, fortunately traefik will automaticaly provide certificates trought letsencrypt. (HTTP/2 will be used as fallback if browser does not support HTTP/3)

First we need to create a middleware to redirect http requests to https

middlewares.yml

http:
  middlewares:
    https-redirect:
      redirectScheme:
        scheme: https
        permanent: true

Then we need to create an empty json file where TLS certificates will be stored

acme.json

{}

Now we have to update our docker-compose.yml to add traefik and labels to our containers:

version: '3.7'

services:
  my-frontend-service:
    build: .
    image: my-frontend-app:1.0.0
    container_name: my-frontend-app-container
    restart: unless-stopped
    networks:
      - my-app-services
    labels:
      traefik.enable: true
      traefik.docker.network: 'my-app-services'
      traefik.http.routers.my-frontend-service.entrypoints: 'http'
      traefik.http.routers.my-frontend-service.rule: 'Host(`example.com`)'
      traefik.http.routers.my-frontend-service.middlewares: '[email protected]'
      traefik.http.routers.my-frontend-service-https.rule: 'Host(`example.com`)'
      traefik.http.routers.my-frontend-service-https.tls: true
      traefik.http.routers.my-frontend-service-https.entrypoints: 'https'
      traefik.http.routers.my-frontend-service-https.tls.certresolver: 'http'
      traefik.http.services.my-frontend-service-https.loadbalancer.server.port: 3000

  my-traefik:
    image: traefik:v2.8
    container_name: my-traefik-container
    restart: unless-stopped
    networks:
      - my-app-services
    ports:
      - "80:80"
      - "443:443/udp"
      - "443:443/tcp"
    environment: 
      - TRAEFIK_EXPERIMENTAL_HTTP3=true
      - TRAEFIK_ENTRYPOINTS_HTTPS_ENABLEHTTP3=true
    command:
      - "--experimental.http3=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--providers.file.filename=/middlewares.yml"
      - "--entrypoints.http.address=:80"
      - "--entrypoints.https.address=:443"
      - "--entrypoints.https.http3"
      - "--certificatesresolvers.http=true"
      - "[email protected]"
      - "--certificatesresolvers.http.acme.storage=acme.json"
      - "--certificatesresolvers.http.acme.httpchallenge=true"
      - "--certificatesresolvers.http.acme.httpchallenge.entrypoint=http"
      - "--api.dashboard=false"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./acme.json:/acme.json
      - ./middlewares.yml:/middlewares.yml:ro

networks:
  my-app-services:

Start traefik and Vuero

docker-compose up

And Voilà, you have your vuero served via HTTP/3! You can go to https://gf.dev/http3-test to check if your website is served over HTTP/3

Read more about Traefik:

• https://traefik.io/traefik/.
• https://doc.traefik.io/traefik/.