Moebius
Back to Hub
Back to Css Ninja

Appearance

Going further ​

Build for production ​

You can deploy your website on any http server like Apache, Nginx or http-server package from pnpm

bash
pnpm build

Built files are located in ./dist folder

TIP

You can also use a CDN like GitHub pages, Netlify, AWS Cloudfront, ...

WARNING

Moebius can not be opened from the local file system (using file:// protocol)

You can preview quickly your production version with http-server

bash
npx http-server ./dist

TIP

Now you can visit http://localhost:8080 to view your server

Using docker ​

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:

bash
docker build \
  --tag my-frontend-app:1.0.0 \
  .

To preview your image, run the following command:

bash
docker run \
  --rm \
  --publish 8080:8080 \
  my-frontend-app:1.0.0

Access the Moebius frontend at http://localhost:8080

To run your image, run the following command:

bash
docker run \
  --detach \
  --publish 80:8080 \
  --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:8080"

WARNING

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

bash
docker-compose up

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

WARNING

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 authentication, data, etc ...
We have implemented samples with a fake REST HTTP API to keep the project as simple and understandable as possible.

You can take a look at projects such Strapi or Supabase, which 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 Nuxt.

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.

TIP

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

Server Side Rendering ​

SSR, like Nuxt

Vite will generate content on each request, but for that we need to create a web server using Node.js 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.

TIP

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

Other backend integration ​

Thanks to Vite, 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.

Electron ​

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

Laravel ​

If you want to integrate Moebius with Laravel:

Django ​

TIP

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

All Rights Reserved

Copyright © 2024 Css Ninja.