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

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).

TIP

Explore the vite.config.ts file and Vite documentation to customize the build

WARNING

On large applications, build may run out of memory. You can increase the memory limit by running the following command:

NODE_OPTIONS=--max_old_space_size=6144 pnpm build

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.

TIP

• Access the Vuero frontend in your browser at http://localhost:5000/
• Access the Json-server backend in your browser at http://localhost:8080/

Deploy on CDN

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.

TIP

You can also use a CDN like GitHub pages, Netlify, AWS Cloudfront or any static hosting service ...

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 5000:3000 \
  --publish 8080:8080 \
  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 \
  --publish 8080:8080 \
  --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"

WARNING

you might need root/sudo access to bind port 80 to the container

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 experimental feature.
HTTP/3 work only over TLS, fortunately Traefik will automatically provide certificates trough Let's Encrypt. (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

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

version: '3.7'

networks:
  my_app_network:

volumes:
  my_app_traefik_acme:

services:
  my-frontend-service:
    build: .
    image: my-frontend-app:1.0.0
    container_name: my-frontend-app-container
    restart: unless-stopped
    networks:
      - my_app_network
    labels:
      traefik.enable: true
      traefik.docker.network: 'my_app_network'
      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: 'https-redirect@file'
      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"
      - "--certificatesresolvers.http.acme.email=admin@example.com"
      - "--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
      - my_app_traefik_acme:/letsencrypt
      - ./middlewares.yml:/middlewares.yml:ro

TIP

You have to change example.com domain with yours to get this working.

If you want to test this setup on your local computer, you can use 127.0.0.1.nip.io as a domain, nip.io is a wildcard DNS for any IP Address, Traefik will serve a development certificate then.

Start Traefik and Vuero

docker-compose up -d

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/.