1. Introduction

When developers create a React application, they usually work in a development environment. In this environment, they can write code, test features, fix errors, and preview changes.

However, a real-world application must eventually be prepared for production and deployed to a hosting platform so users can access it through a website URL.

React applications commonly use tools such as Vite to manage development and production builds.

In this tutorial, we will learn about environment variables, production builds, build optimization, and deploying React applications.

Main Goal: Learn how to prepare a React application for production and make it accessible to users through the internet.

2. Learning Objectives

After completing this tutorial, you will understand:

1. What environment variables are.

2. Why environment variables are important.

3. How to create a .env file.

4. How to access environment variables in Vite.

5. The difference between development and production environments.

6. What a production build is.

7. How to generate a production build using Vite.

8. How to preview a production build.

9. What application deployment means.

10. How to deploy a React application using a hosting platform.

3. Core Concepts and Explanation

3.1 What Are Environment Variables?

Environment variables are configuration values used by an application to control its behavior in different environments.

They allow developers to store configuration separately from application source code.

For example, an application may use different API URLs during development and production.

Example:

Development API:
http://localhost:5000/api

Production API:
https://api.example.com/api

Instead of writing these URLs directly throughout the application, developers can use environment variables.

Definition:

Environment variables are external configuration values that an application can access while running or building.

3.2 Why Are Environment Variables Important?

Environment variables provide several benefits:

1. Configuration Management: Keep configuration separate from application code.

2. Flexibility: Use different settings for development and production.

3. Maintainability: Update configuration without changing application logic.

4. Deployment: Configure applications for different hosting environments.

5. Organization: Keep project settings in a central location.

Important Security Note:

Environment variables used in frontend React applications are not automatically secret. Variables exposed to browser code can be inspected by users.

Never place private API keys, database passwords, authentication secrets, or other confidential credentials in frontend environment variables.

3.3 What Is a .env File?

A .env file is a configuration file used to define environment variables.

For example:

VITE_API_URL=http://localhost:5000/api
VITE_APP_NAME=My React App

In Vite, frontend environment variables that should be exposed to client-side code must use the VITE_ prefix by default.

3.4 Understanding Environment Variable Naming in Vite

Vite uses a prefix to determine which environment variables are exposed to client-side application code.

For example:

VITE_API_URL=https://api.example.com
DATABASE_PASSWORD=my-secret-password

The variable VITE_API_URL can be accessed by frontend code.

The variable DATABASE_PASSWORD is not exposed through import.meta.env by default.

However, putting a secret in a frontend project's .env file does not make it safe. It should never be included in frontend build configuration.

3.5 How to Access Environment Variables in React

Vite provides the import.meta.env object to access exposed environment variables.

Example:

const apiUrl = import.meta.env.VITE_API_URL;

console.log(apiUrl);

Explanation:

• import.meta.env accesses Vite environment information.

• VITE_API_URL is the environment variable name.

• The variable's configured value is returned.

3.6 What Is a Development Environment?

A development environment is used while building and testing an application.

Common characteristics:

• Code changes are frequently made.

• Development server provides fast updates.

• Debugging tools are used.

• Error messages help developers.

• Application features are tested.

In a Vite project, the development server is usually started with:

npm run dev

3.7 What Is a Production Environment?

A production environment is where the final application is made available to real users.

Common characteristics:

• Optimized application files.

• Minified JavaScript and CSS.

• Production configuration.

• Public hosting.

• Real application traffic.

A production application should be tested before it is made publicly available.

3.8 Development vs Production

Development	Production
Used for coding	Used by real users
Focuses on development	Focuses on stability
Uses development server	Uses deployed build
Frequently changing code	Released application version
Debugging-focused	Performance and reliability-focused

3.9 What Is a Production Build?

A production build is an optimized version of an application prepared for deployment.

Vite processes the application source code and generates production-ready static files.

These files commonly include:

• HTML

• JavaScript

• CSS

• Images

• Other static assets

The default Vite output directory is generally named dist.

Command:

npm run build

This command executes the build script defined in package.json.

3.10 What Is Minification?

Minification is the process of reducing the size of source files by removing unnecessary characters, whitespace, and other redundant code.

For example, readable code:

function addNumbers(a, b) {
  return a + b;
}

A minified version may look like:

function addNumbers(a,b){return a+b}

Minification helps reduce file size and can improve download performance.

3.11 What Is Application Deployment?

Deployment is the process of making an application available in a target environment.

For a React application, deployment commonly involves:

1. Completing the application.

2. Installing required dependencies.

3. Configuring environment variables.

4. Generating a production build.

5. Uploading or connecting the build to a hosting platform.

6. Configuring routing and hosting settings.

7. Testing the deployed application.

3.12 What Is Hosting?

Hosting is a service that provides the infrastructure needed to make a website or application accessible through the internet.

Examples of frontend hosting platforms include:

• Vercel

• Netlify

• Cloudflare Pages

• GitHub Pages

A React frontend can also be hosted on a web server such as Apache or Nginx.

4. Practical Code Examples

Example 1: Creating a .env File

Open your React project folder and create a file named:

.env

Add the following configuration:

VITE_API_URL=http://localhost:5000/api
VITE_APP_NAME=PARAM CLASSES

Your project may look like this:

my-react-app/
│
├── public/
├── src/
│   ├── App.jsx
│   └── main.jsx
│
├── .env
├── package.json
├── index.html
└── vite.config.js

Explanation:

• .env contains project configuration.

• VITE_API_URL stores the API endpoint.

• VITE_APP_NAME stores the application name.

After changing environment variables, restart the Vite development server so the new values are loaded.

Example 2: Accessing Environment Variables

Open App.jsx.

function App() {
  const apiUrl = import.meta.env.VITE_API_URL;
  const appName = import.meta.env.VITE_APP_NAME;

  return (
    <div>
      <h1>{appName}</h1>

      <p>API URL: {apiUrl}</p>
    </div>
  );
}

export default App;

Explanation:

• import.meta.env reads Vite environment variables.

• VITE_API_URL provides the API endpoint.

• VITE_APP_NAME provides the application name.

• Both values are displayed in the UI.

Example 3: Creating Separate Development and Production Configuration

Create two environment files.

.env.development

VITE_API_URL=http://localhost:5000/api

.env.production

VITE_API_URL=https://api.example.com/api

Vite automatically uses the appropriate mode-specific environment file for its standard development and production commands.

Access the variable:

const API_URL = import.meta.env.VITE_API_URL;

console.log(API_URL);

Now the application can use different API URLs depending on its build mode.

Example 4: Using Environment Variables in an API Request

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const API_URL = import.meta.env.VITE_API_URL;

        const response = await fetch(`${API_URL}/users`);

        if (!response.ok) {
          throw new Error("Failed to fetch users");
        }

        const data = await response.json();

        setUsers(data);
      } catch (error) {
        console.error(error);
      }
    }

    fetchUsers();
  }, []);

  return (
    <div>
      <h2>Users List</h2>

      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

Explanation:

• The API URL comes from an environment variable.

• fetch() sends the request.

• response.ok checks whether the HTTP response was successful.

• The returned data is stored in state.

• The users are displayed using map().

Example 5: Understanding package.json Scripts

Open your project's package.json file.

A typical Vite project may contain:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Explanation:

• npm run dev starts the development server.

• npm run build generates the production build.

• npm run preview previews the generated production build locally.

Example 6: Creating a Production Build

Open your terminal inside the React project directory.

Run:

npm install

Then generate the production build:

npm run build

After a successful build, Vite creates a dist folder.

Example:

dist/
│
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
│
└── index.html

The exact generated filenames may differ.

The dist directory contains the static files that can be deployed to a suitable hosting service.

Example 7: Previewing the Production Build

Run:

npm run preview

Vite starts a local server to preview the generated production build.

This helps developers test the production output before deployment.

Remember: The preview server is intended for local verification, not as a production hosting solution.

Example 8: Deploying a React Application

A common deployment workflow uses a Git repository and a frontend hosting platform.

Step 1: Generate the production build.

npm run build

Step 2: Upload your project to GitHub.

git init
git add .
git commit -m "Initial React application"
git branch -M main
git remote add origin YOUR_REPOSITORY_URL
git push -u origin main

Replace YOUR_REPOSITORY_URL with your actual repository URL.

Step 3: Connect the repository to a hosting platform.

For example, on Vercel or Netlify:

• Sign in to the hosting platform.

• Import your Git repository.

• Select the React project.

• Configure the build command.

• Set the output directory to dist.

• Add the required environment variables.

• Start the deployment.

Step 4: Open the deployed website.

After a successful deployment, the hosting platform provides a public website URL.

Open the URL and test your application.

Example 9: Handling React Router on Deployment

When using React Router with client-side routing, a user may directly open a URL such as:

https://example.com/dashboard

The hosting server must be configured to serve the React application's index.html for application routes that are not actual static files.

For example, a Netlify project can use a _redirects file inside the public directory:

/* /index.html 200

This allows React Router to handle the requested frontend route.

Use the equivalent SPA fallback configuration for your hosting platform.

5. Real-World Applications

Environment variables, production builds, and deployment are used in many professional projects.

E-commerce Applications

• Production API configuration.

• Payment gateway public configuration.

• Optimized product pages.

• Live shopping websites.

Admin Dashboards

• Separate development and production APIs.

• Production dashboard builds.

• Secure backend integration.

• Hosted management interfaces.

Learning Management Systems

• Production course websites.

• Live authentication integration.

• API endpoint configuration.

• Optimized educational platforms.

Business Websites

• Domain configuration.

• Production deployment.

• Optimized static assets.

• Live website updates.

6. Common Mistakes and Best Practices

Common Mistakes

1. Forgetting the VITE_ prefix for frontend variables.

2. Expecting environment variables to update without restarting the development server.

3. Putting private credentials inside frontend environment variables.

4. Forgetting to run npm run build.

5. Deploying the development project instead of the production output.

6. Using the wrong output directory during deployment.

7. Forgetting to configure React Router fallback rules.

8. Not testing the deployed application.

9. Hardcoding development API URLs throughout the project.

10. Committing private server-side .env files to public repositories.

Best Practices

1. Keep configuration separate from application logic.

2. Use different configuration for development and production.

3. Never expose private credentials in frontend code.

4. Add appropriate .env files to .gitignore.

5. Maintain a .env.example file containing variable names and safe example values.

6. Use npm run build before deployment.

7. Preview the production build before releasing it.

8. Configure the correct output directory.

9. Test application routes after deployment.

10. Use HTTPS for production websites.

11. Monitor deployment errors and application performance.

12. Keep dependencies updated.

Important Note: Frontend environment variables are included in or made available to the client-side build. They must be treated as public configuration, not secure storage.

7. Practice Exercises

Exercise 1: Create a Vite React application and configure a .env file.

Exercise 2: Create separate development and production environment files.

Exercise 3: Display the application name using import.meta.env.

Exercise 4: Use an environment variable to configure an API URL.

Exercise 5: Run npm run build and inspect the generated dist folder.

Exercise 6: Preview the production build using npm run preview.

Exercise 7: Upload your React project to GitHub.

Exercise 8: Deploy your React application using Vercel or Netlify.

Exercise 9: Configure React Router fallback behavior and test direct page navigation.

8. Key Takeaways and Conclusion

In this tutorial, we learned how to prepare React applications for production and deploy them.

Key takeaways:

• Environment variables store application configuration.

• Vite exposes frontend variables using the VITE_ prefix by default.

• Development and production environments can use different configurations.

• npm run build generates an optimized production build.

• The default Vite output directory is dist.

• npm run preview helps test the production build locally.

• Deployment makes the application accessible to users.

• Hosting platforms can automate production deployment.

• Private credentials must never be exposed in frontend builds.

Final Conclusion:

Creating a React application is only one part of professional development. Developers must also understand configuration management, production builds, and deployment.

These skills help transform a local React project into a real-world application that users can access through the internet.