If your frontend project uses Vite, you need to create a production build before deploying it to production.
To build a Vite project for production, you need to run npm run build in the root folder of the project. The production build will then be generated and placed in the dist folder.
Read on to learn more about production builds and how Vite generates them.
- Why do we need production builds?
- How to create a production build in a Vite project?
- How does Vite generate a production builds?
Why do we need production builds?
Most frontend libraries that are supported by Vite such as React, Vue and Svelte use a syntax that browsers can't understand. For example, we use JSX when writing React components. Browsers don't understand JSX since it is not a part of the Javascript language standard. (ECMA-262). So this non standard syntax must be converted into "plain Javascript" for these libraries to run in the browser.
When a Vite project is run during development with the npm run dev command, it starts a development server which continuously monitors the files and uses esbuild to convert the non standard syntax into plain Javascript to be served on localhost. It also enables several development features that makes it easier to debug the code.
You could use the same command to serve an app in production but it is not recommended since development servers are not designed to serve many users. Moreover, development servers also serve code that has development features enabled and these could make the app slow or insecure in production.
So the recommended approach is to use a production build that has the development features turned out and can be served from a normal HTTP web server. (e.g. Apache, nginx)
How to create a production build in a Vite project?
To create a production build in a Vite project, you need to run npm run build in the root folder of the project.
$ npm run build
> react-deploy-app@1.0.0 build
> vite build
vite v4.2.1 building for production...
✓ 39 modules transformed.
dist/index.html 0.45 kB
dist/assets/index-ea7957ff.css 0.61 kB │ gzip: 0.38 kB
dist/assets/index-d0a90142.js 190.84 kB │ gzip: 62.28 kB
✓ built in 1.07sThe generated production build is placed in a folder called dist. A production build contains several Javascript and CSS files and an index.html file that must be served from a web server for the web app to be loaded.
To deploy this production build, you need to copy all the files and folders inside the dist folder to a web server or a static website host like Github pages or Netlify. These files and folders must be copied to the root or topmost folder that is being served by the web server so that index.html is served at the root URL (/) of your domain.
If you are using React router or any other form of client-side routing, you might also need to set up your web server or static site host to properly handle the client-side routes.
How does Vite generate production builds?
Vite uses Rollup and babel to generate the production build. Babel converts the JSX files into JS. Rollup combines or bundles multiple source code files into the single CSS and JS file that is present in the production build. If you would like to know more about this process, you can check out this post. It is about Webpack and Babel rather than Rollup and Babel, but Rollup serves the same purpose as Webpack.
