Deployment Basics: From Local Vite App to Production

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.

The Shift from Development to Production

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.

Running a Production Build

To prepare your files, run the following command in your terminal:

Bash
npm 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.

Handling Environment Variables

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.

1. Create a file named .env in your root directory.
2. Add your variables using the VITE_ prefix:

   TEXT
   VITE_API_URL=https://api.themoviedb.org/3
   

3. Access them in your code via 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.

Deploying to a Hosting Service

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:

1. Push your code to a GitHub repository.
2. Log in to Vercel and connect your GitHub account.
3. Select your repository and click "Deploy."
4. Vercel will automatically run npm run build and provide you with a live URL.

Hands-on Exercise

1. Open your movie browser project and run npm run build.
2. Inspect the dist folder to see the generated files.
3. Create a .env file and move your API URL constant into it. Update your useFetch hook to use import.meta.env instead of a hardcoded string.
4. Deploy your project to a free hosting service like Netlify or Vercel.

Common Pitfalls

• Forgetting to push your changes: Always commit and push your latest code to your repository before triggering a deployment.
• Case Sensitivity: Ensure your .env variables use the VITE_ prefix. If you name them REACT_APP_ (the old Create React App convention), Vite will ignore them.
• Ignoring the 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.
• Routing Issues: If you are using client-side routing (which we touched on in handling browser history), you may need to configure your hosting provider to redirect all requests to index.html. Most modern hosts do this automatically for React apps.

Recap

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.