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
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=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:
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:
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"
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
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
{}
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:
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
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: