Step 3
We have seen how to build and deploy our React app to Netlify. The process involved taking manual steps of first building the app locally and then uploading the build artifacts to the Netlify website. Now, we will automate this process. We will connect our GitHub repository to Netlify so that the React app is automatically built and deployed when we make a change to the repository. This approach to software development is known as Continuous Delivery.
Visit https://www.netlify.com/ and sign in to your account. Then, from your dashboard, click on the Sites tab.
Click on "New site from Git" to see the view below.
Click on "GitHub." If you have never connected Netlify to your GitHub account, it will ask for authorization to access your repositories. Once Netlify is authorized to access your GitHub account, you will see a list of your repositories.
Select the repository you have created for this project. Next, you will be taken to the "Create a New Site" page.
Make sure you have selected main as the "branch to deply." Moreover, the "build command" and "publish directory" are set according to how the create-react-app build process works. Once done, click on "Deploy."
Netlify will give a random name to your React app site. You can change this name in your "site settings." From this point on, everytime you push your local changes to the GitHub repository, Netlify will notice the update, build your React app and deploy it.
Let's make a simple change to trigger the build and deployement! Update the index.html file as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>React App</title>
+ <title>QuickNote App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Commit and push the changes, then visit your Netlify site!
