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.

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.

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.

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

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.

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 Vulk 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"

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

{}

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

Start traefik and Vulk

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

Read more about Traefik:

• https://traefik.io/traefik/.
• https://doc.traefik.io/traefik/.