How To Deploy A React App To Vercel (Simple)

Key Concepts

• React Vite application deployment
• Vercel hosting platform
• GitHub integration
• Environment variables
• vite.config.js configuration
• Base path configuration
• Deployment process and troubleshooting

Deploying a React Vite Application to Vercel

Prerequisites

• A React Vite application. The video uses a pre-built dashboard UI obtained from a public repository (link in description).
• A GitHub account.
• A Vercel account.

Connecting GitHub to Vercel

1. Log in to Vercel at vercel.com.
2. Choose "Continue with GitHub" to authenticate.
3. This allows Vercel to access your GitHub repositories.

Creating a New GitHub Repository

1. In your GitHub account, create a new repository for your React Vite project. The video names the repository "react-vite-deploy" and makes it public.
2. Initialize a Git repository in your local project directory using git init.
3. Add all files to the repository using git add ..
4. Commit the changes using git commit -m "Initial commit".
5. Push the local repository to the newly created GitHub repository using the commands provided by GitHub (e.g., git remote add origin <repository_url>, git branch -M main, git push -u origin main).

Importing the Repository into Vercel

1. In Vercel, click "Add New" and then "Project".
2. Vercel will display a list of your GitHub repositories. Select the repository you just created ("react-vite-deploy").

Configuring the Vercel Project

1. Framework Preset: Choose "Vite" from the framework preset options.
2. Root Directory: Leave the root directory as default (usually the project root).
3. Build Command: Use the default build command for Vite projects (vite build).
4. Environment Variables: Add any necessary environment variables for your project. This is crucial for production, as variables available locally might not be available on Vercel.
5. VITE_BASE_PATH Variable: Add an environment variable named VITE_BASE_PATH and set its value to /.

Configuring vite.config.js

1. Open your vite.config.js (or vite.config.ts) file.

2. Add a base property to the configuration object.

3. Set the value of base to process.env.VITE_BASE_PATH || '/<your_github_repo_name>'. Replace <your_github_repo_name> with the name of your GitHub repository (e.g., "react-vite-deploy").

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react()],
     base: process.env.VITE_BASE_PATH || '/react-vite-deploy'
   })
   

4. Commit and push the changes to your GitHub repository.

Deploying the Application

1. In Vercel, click the "Deploy" button.
2. Vercel will build and deploy your application. The deployment process and logs are displayed in the Vercel dashboard.
3. Troubleshooting: TypeScript errors can prevent successful deployment. Ensure all TypeScript errors are resolved before deploying.

Post-Deployment

1. Once the deployment is complete, Vercel provides a link to your deployed application.
2. The Vercel dashboard provides analytics, insights, and options for configuring custom domains.

Notable Quotes

• "Ideally you will want to connect your GitHub account to Vercel."
• "One thing that is important though is environment variables so if you have any environment variables in your project right now you want to put them over here because uh if you don't then those environment variables will be available uh in your local development but they won't be available in production."
• "Any typescript errors that might be occurring will prevent a successful deployment so make sure that you fix any type issues or typescript errors before you try deploying."

Technical Terms

• Vite: A build tool that aims to provide a faster and leaner development experience for modern web projects.
• Vercel: A cloud platform for static sites and serverless functions.
• GitHub: A web-based platform for version control and collaboration.
• Environment Variables: Dynamic-named values that can affect the way running processes will behave on a computer. They are part of the environment in which a process runs.
• Base Path: The base URL your site will be deployed at.

Logical Connections

The video logically connects the steps required to deploy a React Vite application. It starts with setting up the necessary accounts and repositories, then moves on to configuring the project for deployment, and finally covers the deployment process itself. The importance of environment variables and the vite.config.js file is emphasized, highlighting their role in ensuring a successful deployment.

Synthesis/Conclusion

The video provides a clear and concise guide on deploying a React Vite application to Vercel. It emphasizes the importance of connecting GitHub to Vercel, configuring environment variables, and properly setting the base path in vite.config.js. By following these steps, developers can easily deploy their React Vite applications to Vercel and make them publicly accessible. The video also highlights potential troubleshooting issues, such as TypeScript errors, and provides solutions for resolving them.