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