Deploy

A built x4js application is a static site: HTML, JavaScript and CSS files, with no server to run. npm run build writes them to the bin folder, and any host can serve that folder.

The hosted template

The hosted template is the app template plus the configuration for Vercel and Netlify:

npx x4js create my-app --template hosted

It adds two files at the root of the project. Each one tells the host the build command, the folder to publish, and to answer with index.html the addresses that are not files.

vercel.json

{
    "buildCommand": "npm run build",
    "outputDirectory": "bin",
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/index.html"
        }
    ]
}

netlify.toml

[build]
command = "npm run build"
publish = "bin"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

You can delete the file of a host you do not use.

Your project already exists? Just copy the file of your host to its root: the template contains nothing else specific.

From a Git repository

This is the usual way. Push the project to a Git repository, then import that repository from the host. Every git push is then built and put online.

Host	Configuration
Vercel	vercel.json, nothing to set.
Netlify	netlify.toml, nothing to set.
Cloudflare Pages	In the project settings: build command npm run build, build output directory bin.

From your machine, without Git

Each host has a command line that puts the project online from the project folder. The first run asks you to log in, then to create or choose the project.

Host	Command	Build
Vercel	npx vercel --prod	Done by Vercel.
Netlify	npx netlify deploy --prod --dir bin	Done by the command, before the upload.
Cloudflare Pages	npx wrangler pages deploy bin	Not done: run npm run build first.

For Cloudflare Pages, create the project once with npx wrangler pages project create.

Routes without #

By default, Router uses hash URLs (/#/users/12). They work on every host, with nothing to configure.

With new Router(false), the URLs are real paths (/users/12). The host must then answer all these paths with index.html.

The hosted template already contains this rule: it is the rewrites block of vercel.json and the [[redirects]] block of netlify.toml, shown above. Cloudflare Pages applies it by itself, as long as the project has no 404.html file.

An address that matches no route also gets index.html: handle it with the error event of the Router.

Another host

Nothing forces you to use one of these three services. Run npm run build and copy the content of the bin folder to your server or to the host of your choice.

If you use routes without #, configure that server to answer unknown paths with index.html.