Contents
Deployment
Deploying your React application involves building it for production and then hosting it on a platform that serves your application to users. In this section, we’ll cover how to build your application for production and deploy it to popular hosting services like Netlify and Vercel.
Building the Application for Production
Before deploying your application, you need to create a production build. The production build optimizes your application by minifying the code, removing development-specific code, and bundling the assets for better performance.
Step 1: Create a Production Build
To create a production build of your React application, run the following command:
npm run build
This command creates a build directory in your project root. The build directory contains the optimized files that are ready to be deployed.
What Happens During the Build Process:
- Minification: The code is minified to reduce the file size.
- Bundling: All JavaScript files are bundled into a few files.
- Environment Variables: The application is optimized for production, removing things like debugging code.
Deploying the Application to Netlify
Netlify is a popular hosting service for static sites, and it’s very easy to deploy a React application to Netlify.
Step 1: Sign Up for Netlify
If you don’t already have a Netlify account, sign up at Netlify.
Step 2: Connect Your Git Repository
- Once logged in, click on New site from Git.
- Choose your Git provider (GitHub, GitLab, Bitbucket) and authorize Netlify to access your repository.
- Select the repository that contains your React application.
Step 3: Configure the Build Settings
- Branch to deploy: Choose the branch you want to deploy (usually
mainormaster). - Build command: Netlify automatically detects Create React App and sets the build command to
npm run build. - Publish directory: Set the publish directory to
build.
Step 4: Deploy the Site
Click on Deploy site. Netlify will start the build process, and once it’s done, your site will be live. You can access your site using the URL provided by Netlify.
Step 5: Custom Domain and HTTPS (Optional)
You can add a custom domain in the site settings and configure HTTPS with a single click. Netlify provides free SSL certificates via Let’s Encrypt.
Deploying the Application to Vercel
Vercel is another popular platform for hosting static sites and serverless functions. It’s particularly well-suited for React applications.
Step 1: Sign Up for Vercel
Sign up at Vercel if you don’t already have an account.
Step 2: Import Your Git Repository
- Click on New Project and select the Git provider where your React app is hosted.
- Find your repository in the list and click Import.
Step 3: Configure the Build Settings
- Vercel automatically detects the React framework.
- You don’t need to specify a build command; Vercel uses
npm run buildby default. - The output directory is set to
build.
Step 4: Deploy the Site
Click Deploy. Vercel will build your application and deploy it to a unique URL.
Step 5: Custom Domain and HTTPS (Optional)
You can add a custom domain in the project settings. Vercel also provides automatic HTTPS with free SSL certificates.
Conclusion
Deploying a React application involves building the application for production and choosing a hosting service like Netlify or Vercel. Both platforms offer easy integration with Git, automated build processes, and options for custom domains and HTTPS. By following the steps outlined above, you can quickly get your React application live and accessible to users.