Going further

Debugging

Enable debug CLI logs

You can set DEBUG environment variable to * to enable debug logs in the console when running pnpm scripts.

This will enable debug logs any package that use the debug package, you can also specify a specific package to debug like DEBUG=vite:* to only enable debug logs for Vite.

bash

DEBUG=* pnpm build # or any other script

Inspecting build output

Sometimes you need to inspect the build output to debug an issue (e.g. inspect that head are set with SSG), you can temporarily disable minification then rebuild your app to inspect the ./dist output.

export default defineConfig({
  build: {
    // disable minification
    minify: false,
  }
})

Other backend integration

Thanks to Vite, Vulk can be used in a lot of different environments like Laravel, Ruby on Rails or any other Framework to build your app.
Read more about backend integration on Vite documentation.

WARNING

We recommend you to separate your backend project from your frontend (with Vulk) on different repositories. Your frontend should only consume the API provided by your backend through Restful API or GraphQL API.

Electron

If you want to build an Electron app, check out vite-electron-typescript-template repository it can help you to achieve your goal.

Laravel

If you want to integrate Vulk with Laravel:

A great tutorial by Sebastian De Deyne on how to fully integrate Laravel with Vite:
https://sebastiandedeyne.com/vite-with-laravel/
A video about how to integrate Laravel with Vite and React (in French): https://www.youtube.com/watch?v=jyXCbtg743Y
And laravel-vite, which is a replacement for Laravel Mix:
https://laravel-vite.netlify.app/

Django

Minimalist example of running Django with Vite: https://gist.github.com/lucianoratamero/7fc9737d24229ea9219f0987272896a2
A video about how to integrate Django with Vite: https://www.youtube.com/watch?v=FCyYIVfDkhY
django-vite, an easy to use package: https://github.com/MrBin99/django-vite

TIP

Vite has a lot of available plugins and a great community, read its awesome list here:
https://github.com/vitejs/awesome-vite

Deploy with docker

This project includes a Dockerfile which first builds Vulk 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 Vulk 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 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

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: '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.5
    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.enablehttp3=true"
      - "--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
      - ./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 Vulk

bash

docker-compose up

And Voilà, you have your Vulk 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

Going further ​

Debugging ​

Enable debug CLI logs ​

Inspecting build output ​

Other backend integration ​

Electron ​

Laravel ​

Django ​

Deploy with docker ​

Using docker-compose ​

Using Traefik with HTTP/3 ​

Going further

Debugging

Enable debug CLI logs

Inspecting build output

Other backend integration

Electron

Laravel

Django

Deploy with docker

Using docker-compose

Using Traefik with HTTP/3