Creating a React Build Using Vite

by
Tiempo de lectura: 3 minutos

Here is a step-by-step tutorial on how to create a build with Vite and deploy it for testing on a local server using Nginx. This tutorial assumes you already have Node.js and npm installed on your machine.

Step 1: Create a new Vite application (skip this step if you already have one)

  1. Open the terminal and run the following command to create a new Vite application:
   npm create vite my-vite-app
  1. Select the template you prefer (e.g., “react” or “vue”) and follow the instructions to create the project.
  2. Change to the project directory:
   cd my-vite-app

Step 2: Develop and test locally

  1. Start the Vite development server:
   npm run dev

This will start a development server at http://localhost:3000. Open your browser and visit that URL to see your application in development.

Step 3: Build the application

  1. When you’re ready to build the application for production, stop the development server (press Ctrl + C in the terminal).
  2. Run the following command to build the application:
   npm run build

This command will generate a dist folder in your project directory containing files optimized for production.

Now, we can perform two distinct steps:

  1. Create a development server.
  2. Create a production server.

Create a development server to test the built application

To deploy the test server, we will use serve. First, we need to install it:

npm install -g serve

This command will install the serve tool globally, meaning you can access it from anywhere on your system.

After installing serve globally, you can use it to serve your Vite application built in production. Here’s the process:

  1. Make sure you have built your Vite application:
   npm run build
  1. Navigate to the dist directory:
   cd dist
  1. Run the following command to start a simple HTTP server with serve:
   serve

This will start a server at http://localhost:5000 (or a different port if 5000 is occupied).

  1. Open your browser and visit http://localhost:5000 to see your Vite application deployed using serve.

This method is very useful for quick local testing and is also suitable for simpler production environments. However, if you plan on a more serious deployment, you may want to consider configuring a more robust web server like Nginx or Apache.

Set up a web server (Nginx)

  1. Make sure you have Nginx installed. If not, you can install it following the provided instructions earlier.
  2. Create a configuration file for your application in Nginx. You can use the following command to open a new file:
   sudo nano /etc/nginx/sites-available/my-vite-app

Replace “my-vite-app” with the name you prefer.

  1. Add basic Nginx configuration:
server {
        listen       80;
        server_name  localhost;

        location / {
            root   /path/to/your/project/my-vite-app/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;                
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }

Make sure to replace “/path/to/your/project/my-vite-app/dist” with the full path to the “dist” directory of your application.

  1. Save and close the file.
  2. Create a symbolic link in the sites-enabled directory:
   sudo ln -s /etc/nginx/sites-available/my-vite-app /etc/nginx/sites-enabled/
  1. Restart Nginx to apply the changes:
   sudo service nginx restart

Or on more modern systems:

   sudo systemctl restart nginx

Test the deployed application

  1. Open your browser and visit http://localhost or your server’s IP address.
  2. You should see your Vite application deployed using Nginx.

That’s it! You have created a build with Vite and deployed your application for local testing with Nginx. Note that these steps are basic and may need adjustments based on your specific needs and server configuration.

Post Views: 13

Leave a Comment