Deployment is the final step in the development lifecycle. Learn how to run a production build in Vite, manage environment variables, and host your React app.
Previously in this course, we covered debugging your React applications to ensure your code behaves as expected. Now that your movie browser is polished and bug-free, it's time to move it from your local development environment to the public internet.
When you run npm run dev in your Vite project, you are using a development server. This server is optimized for speed and hot-reloading, but it is not suitable for high-traffic environments. It includes debugging tools, source maps, and unminified code that would make your application slow and vulnerable in the real world.
"Production" means creating a version of your app that is compressed, optimized, and ready to be served by a web server. Vite handles this heavy lifting for you using the build command.
To prepare your files, run the following command in your terminal:
Bashnpm run build
Vite will analyze your code, minify your JavaScript and CSS, and generate an optimized bundle in a folder named dist. If you look inside the dist folder, you’ll see the final HTML, CSS, and JS files that your users will actually download.
In production, you often need different settings than in development—like a different API URL or a secret key. Vite uses a simple .env file system to manage these.
.env in your root directory.VITE_ prefix:
TEXTVITE_API_URL=https://api.themoviedb.org/3
import.meta.env.VITE_API_URL.Important: Never put sensitive credentials (like database passwords) in your frontend code. Anyone who visits your site can view your source code and steal them. Only use environment variables for public configuration or non-sensitive endpoints.
For a React application, a static site host is the standard choice. Platforms like Vercel, Netlify, or GitHub Pages are designed to serve the files inside your dist folder instantly.
Let's use Vercel as our example:
npm run build and provide you with a live URL.npm run build.dist folder to see the generated files..env file and move your API URL constant into it. Update your useFetch hook to use import.meta.env instead of a hardcoded string..env variables use the VITE_ prefix. If you name them REACT_APP_ (the old Create React App convention), Vite will ignore them.dist folder: Your .gitignore file should always include /dist. You never want to commit your production build files to your git history; let the hosting provider build them fresh every time.index.html. Most modern hosts do this automatically for React apps.Deployment is the process of turning your source code into a bundle that browsers can execute efficiently. By running a production build with Vite, managing your configuration via environment variables, and hosting on a platform like Vercel, you've taken your project from a local experiment to a real-world application. As you continue to scale your project, remember that performance optimization is a continuous process—even after you've deployed.
Up next: We will explore how to integrate and manage external libraries to add complex features to your React apps without reinventing the wheel.
Master the art of UI state management by adding a filter toggle to your movie app. Learn to control list rendering using boolean state and checkbox inputs.
Deployment Basics