Skip to content
On this page

Going further

Vite.js

Vulk uses Vite, which is a web development build tool that supports:

  • a fast development environment with hot reload (using native javascript modules)
  • building an optimized version for production (using rollup)
  • native support for typescript

Under the hood, when runing npm run dev, it runs vite.

To learn more about this awesome tool made by the vuejs core team, check https://vitejs.dev. You will learn to:

  • Add postcss pre-processors
  • Integrate JSX
  • Implement fancy Web Assembly code
  • Add new asset path aliases
  • And much more

SSR and SSG

If you want to improve your SEO score, you might need to have Server Side Rendering (or Server Side Generation) like nuxtjs. unfortunately Nuxt 3 is not out yet, and so we need to do it by hand.

Server Side Generation

SSG, like gatsby

Vite renders HTML content at build time, the output is perfect for SEO and can be hosted with any CDN, making it the fastest way to deliver your content. The caveat is that if you need to deliver dynamic content (such as authenticated access, or shopping search results) your users will receive the static content generated at build time and have to refetch content when browsing like if there was no SSR/SSG configured.

TIP

For SSG, take a look at https://github.com/antfu/vite-ssg

Server Side Rendering

SSR, like nuxtjs

Vite will generate content for each request, but in order to do that, we need to create a web server using nodejs to be able to transfer requests to vite. Each request will be then rendered by vite at runtime even if the content does not change (like a contact page). There is an example in the vite's playground, which is used to test and play with vite. Check https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue and the related documentation here: https://vitejs.dev/guide/ssr.html#server-side-rendering

Like you can see, it is a way more complex approach and therefore, more expensive to maintain and to host.

TIP

For SSR, take a look at https://vite-plugin-ssr.com/

Other backend integration

Thanks to Vitejs, 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:

Django

TIP

Vitejs 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 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.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"
      - "[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 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

Read more about Traefik:

All Rights Reserved