HowToDeployAnApp

How to deploy an app

Building apps and sites with this framework always produces a set of static files, which can be easily deployed on any http server or CDN (content delivery network).

Building the project

First, build the project by invoking the build script from your package.json:

1
$ pnpm run build

On success, Vite will have written your compiled project into dist/www, which might look like this:

1
dist
2
└── www
3
    ├── assets
4
    │   └── 09f766b9e467.js
5
    └── index.html

The www directory is designed to be deployed as a single unit. You should always deploy all files inside www, as they may be required at runtime by your application(s). If you want to reduce the number of files, you should customize your vite.config.ts. For example, the configuration of the pioneer plugin can be adapted to include only a selected set of apps or sites in the build.

Deployment of a static site

Vite has extensive documentation (opens in a new tab) for multiple deployment options.

As an example, we will build a simple docker image based on the popular Caddy (opens in a new tab) server.

First, create the Dockerfile:

1
# Dockerfile
2
FROM caddy:2.6-alpine
3
COPY dist/www /srv

To speed up the build, we exclude everything except for dist from the docker context:

1
*
2
!dist

Build the image:

1
$ docker build -t example-site .
2
# Sending build context to Docker daemon  476.2kB
3
# Step 1/2 : FROM caddy:2.6-alpine
4
#  ---> d8464e23f16f
5
# Step 2/2 : COPY dist/www /srv
6
#  ---> Using cache
7
#  ---> 35cda8904927
8
# Successfully built 35cda8904927
9
# Successfully tagged example-site:latest

Start a container:

1
$ docker run -it --rm -p 5555:80 example-site caddy file-server

Open you browser at http://localhost:5555 (opens in a new tab) to see the result.

Please refer to Caddy’s Documentation (opens in a new tab) for more details.

Deployment of a web component

If you wish to provide one or more apps as web components to your users, customize your vite.config.ts to include the apps (apps section of the pioneer plugin).

For this tutorial, we build the empty app:

1
// ...
2
pioneer({
3
    rootSite: false,
4
    sites: [],
5
    apps: ["empty"]
6
});
7
// ...

Build your project:

1
$ pnpm run build

Your dist directory will now look like the example below. There might be additional files that must also be deployed, but the empty.js file is guaranteed to be there:

1
dist/
2
└── www
3
    └── empty.js

Next, deploy your www directory to a web server (see above).

To embed your app in a host site, simply load the empty.js as a module:

1
<!-- Some host html site -->
2
<!doctype html>
3
<html>
4
    <!-- ... -->
5
    <body>
6
        <!-- Will be made available by the script below -->
7
        <empty-app></empty-app>
8

9
        <!-- Replace PUBLIC_URL with the hostname and path of the script -->
10
        <script type="module" src="https://PUBLIC_URL/empty.js"></script>
11
    </body>
12
</html>