React is one of the most popular front-end libraries for building modern web applications. Once you've built your app, the next step is deploying it online. In this guide, we’ll walk through how to deploy a ReactJS app to Netlify — a free, fast, and easy-to-use hosting service.
Step 1: Create or Use an Existing React App
First, make sure you have a React app ready. You can use an existing one or create a new one using Create React App:
npx create-react-app my-app
cd my-app
To verify that your app is working:
npm start
This starts your app locally at http://localhost:3000
.
Step 2: Push the Code to GitHub
Netlify works best with version-controlled repositories. Let’s push your code to GitHub:
git init
git remote add origin https://github.com/your-username/your-repo-name.git
git add .
git commit -m "Initial commit"
git push -u origin main
Make sure your repository is public (or connected to your GitHub account for private repos).
Step 3: Log In to Netlify
Visit Netlify.com and sign up for a free account if you don’t already have one.
-
Click on “Add new site”
-
Select “Import from Git”
Step 4: Connect to GitHub and Configure Settings
-
Authorize Netlify to access your GitHub account.
-
Choose your React app repository.
-
In the build settings:
-
Build command:
npm run build
-
Publish directory:
build
-
-
Click Deploy Site
That’s it! Netlify will start the build process.
Step 5: Preview Your Live Site
After a few moments, your app will be deployed and you’ll get a live URL like:
https://your-site-name.netlify.app
Click on the link and you’ll see your React app live!
Comments (0)