Skip to content
On this page

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:

bash
pnpm build

WARNING

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

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

TIP

Explore the vite.config.ts file to customize the build

Preview the production build

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

bash
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 CDNs

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

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:

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

To preview your image, run the following command:

bash
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:

bash
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:

yaml
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 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

yaml
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

json
{}

WARNING

The file must have only read access: chmod 600 ./acme.json

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

yaml
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:

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

bash
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

WARNING

You might need to enable QUIC protocol in your browser to benefit from HTTP/3 speed

Read more about Traefik:

All Rights Reserved