Build for production
You can deploy your website on any http server like Apache, Nginx or
http-server package from npm
# using npm npm run build # using yarn yarn build
Built files are located in ./dist folder
You can also use a CDN like Github pages, Netlify, AWS Cloudfront, ...
Moebius can not be opened from the local file system (using
You can preview quickly your production version with
npx http-server ./dist
Now you can visit
http://localhost:8080 to view your server
This project includes a Dockerfile which first builds Moebius 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:8080 \ my-frontend-app:1.0.0
Access the Moebius frontend at
To run your image, run the following command:
docker run \ --detach \ --publish 80:8080 \ --restart unless-stopped \ --name my-frontend-app-container \ my-frontend-app:1.0.0
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:8080"
you might need root/sudo access to bind port 80 to the container
Using Traefik with HTTP/3
HTTP/3 promises to make 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
http: middlewares: https-redirect: redirectScheme: scheme: https permanent: true
Then we need to create an empty json file where TLS certificates will be stored
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: 8080 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:
You have to update
example.com domain with yours to get this working.
If you want to test on your local computer, you can use
127.0.0.1.nip.io as domain, nip.io is a wildcard DNS for any IP Address, Traefik will serve a development certificate then
Start traefik and moebius
And Voilà, you have your moebius served via HTTP/3! You can go to https://gf.dev/http3-test to check if your website is served over HTTP/3
You might need to enable QUIC protocol in your browser to benefit speed of HTTP/3
Read more about Traefik:
Build your own API
To bring your application alive you will need to create a backend for user authentification, data, etc ...
We have implemented samples with a fake REST HTTP API to keep the project as simple and understainable as possible.
You can take a look at projects such strapi or kuzzle, wich are open-source backend, that can be nicely used with Moebius (firebase can be a good choice too) !
SSR and SSG
If you want to improve your SEO scores, you may 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 render HTML content at build time, the output is perfect for SEO and can be hosted in any CDN, so it is the faster 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 no SSR/SSG where present.
For SSG, take a look at https://github.com/antfu/vite-ssg
Server Side Rendering
SSR, like nuxtjs
Vite will generate content on each request, but for that we need to create a web server using nodejs to be able to transfer requests to vite. So each requests will be rendered by vite at runtime even if the content do not change (like a contact page). There is an example in the vite's playground, which is used to tests vite, about https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue and the corresponding documentation of this part is here: https://vitejs.dev/guide/ssr.html#server-side-rendering
Like you saw, it is a more complex approach and so, more expensive to maintain and to host.
For SSR, take a look at https://vite-plugin-ssr.com/
Other backend integration
Thanks to vitejs, moebius 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.
If you want to build an Electron app, check out
vite-electron-typescript-template repository it can help you achieving your goal.
If you want to integrate Moebius with Laravel:
A great tutorial by Sebastian De Deyne on how to fully integrate Laravel with Vite:
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:
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
Vitejs have a lot of plugin available and a great community, read its awesome list here: