Set Up Continuous Deployment For create-react-app & netlify

Netlify has a feature where you can configure every push to the main branch on GitHub to trigger a new build/update on Netlify.

Getting Started

• Go to GitHub and create a new public repository.
• In your create-react-app add the new GitHub remote link.
• Confirm your create-react-app code is now on GitHub.

IMPORTANT: Make sure your application runs locally. If it does not run locally, there is no hope of it working on deployment.

IMPORTANT: With continuous deployment, you only want working code to be on main, use branches like dev to build and confirm a working app before merging into main.

IMPORTANT: Deploy early and often. The best time to deploy is right after you run create-react-app - the less code you have written, the less work it will take to debug each deployment, in case there is an issue.

Netlify Settings

Log onto Netlify and go to Team Overview, select New site from Git.

Choose the GitHub button - this will take you to a GithHub authentication view.

Scroll down and select Configure the Netlify app on GitHub.

Choose configure to install Netfliy on your GitHub account.

Be sure to remember your GitHub password in order to move forward.

Choose which repo. Use the search bar feature, if needed.

Once selected, your view should return to the Netlify dashboard.

Keep the default settings provided and choose Deploy site button.

See the status of your deployment. Click on it to see more details.

Check the logs. It is good to get familiar with what is there. When errors occur with the build, this is where you would go to debug.

Check for the line Site is live ✨ to confirm your site is live.

Go to the Deploys tab and you can then click on the link to see your site live. You can also share this link with your friends and family!

In order to continue to update your Netlify live site:

• On the main branch, confirm that your app works. While working on your app, be sure to work on another branch like dev and then only merge into main when your new features are working.
• Add, commit, and push your code to main.

  git add -A
  git commit -m "New feature added"
  git push origin main

• Give your site a few minutes to build.
• Be sure to check the dashboard and live site to make sure everything is working right.