Skip to content

Deploying to Production

Video Lecture

Deploying to Production Deploying to Production

Description

We will create the production version of our app ready for deployment.

The production version of the code, will have,

  • all the imported libraries concatenated and minified into a single bundle file,
  • unused portions of libraries will be tree-shaked, in case the imported library supports it,
  • the HMR functionality and Vite core scripts used while running the development version will be excluded,
  • all static resources, used by your app, we be copied into the ./dist folder for easier deployment.

Note that image and model assets will still be loaded into your applications at runtime, as separate files. Asset files are usually binary files, and bundling binary files is not advisable since they need to be encoded as Base64 and this will normally increase there download size by an average 4 times.

Also, if you are using the Draco Loader in your application, the Draco wasm won't be bundled since it needs to be loaded as a separate worker process as runtime, in the same way that images and models are loaded.

To build the production version, run

npm run build

If you are using async await in your application, as is used in this course many times, we may get an error that Vite will need a plugin to manage top-level-wait.

ERROR: Top-level await is not available in the configured target environment

In this case, we can install the vite-plugin-top-level-await plugin.

npm install vite-plugin-top-level-await --save-dev

To enable the plugin, we need to add a vite.config.js with the plugin information.

./vite.config.js

import { defineConfig } from 'vite'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: [topLevelAwait()],
  base: './',
})

Now try npm run build again, and if all is well, after a few seconds, you will see an output ending with something indicating a successful build.

✓ built in 3.99s

Your bundled application should now all be automatically copied into your ./dist/ folder.

We can preview the contents of the ./dist folder using a simple static web server included with Vite.

npm run preview

Visit http://localhost:4173/

All the contents of the folder, including the sub folders, can now be deployed/copied to a web accessible folder served by a static web server.

In the next lesson, we will host out ./dist/ folder online using GitHub pages. But, all web servers support serving static content.

Comments