Hi guys, this is my first article on Dev.to platform
Today I am going to show you how you can automate your ReactJS deployments on Netlify.
Prerequisites:
- NPM and NodeJS installed.
- Understanding of React.
- Understanding of git and GitHub.
- Free Netlify and GitHub accounts.
Step 1: Setup ReactJS app
npx create-react-app my-portfolio
NPX
npx is a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the NPM registry. This is awesome because sometimes you just want to use some CLI tools but you don’t want to install them globally just to test them out. This means you can save some disk space and simply run them only when you need them.
Step 2: Set up GitHub repository
Login to your GitHub account and create a new repository, in the Initialize this repository with section leave everything unchecked
Step 3: Link your local code to GitHub repository
Go to the my-portfolio folder created earlier and do the following:
Rename local master branch to main:
git branch -M main
Add remote repository:
git remote add origin YourGithubRepoUrlHere
Push local code to GitHub:
git push -u origin main
Step 4: Link Netlify to GitHub repository
- Login to your Netlify account.
- Go to the Sites tab and click on Add New Site button.
- Select Import existing project.
- Select GitHub in Connect to Git Providers.
- Pick the newly created repository.
- Make sure that the branch to deploy is main
- Click deploy site Your site will be deployed and now whenever there is any change main branch of GitHub, Netlify will automatically build and deploy your site with latest changes.
Bonus: Set up dev branch so you can create merge requests and get preview before deploying on the url
We can create a development branch in the repository where we can do all the changes and when we are confident with our code, we can create a merge request from development branch to main branch, before merging, Netlify will provide us with a deploy preview, on a separate URL, we can test it to see if our website functions as required and then can merge our code into main.
That's all for this article, Goodbye :)
Top comments (0)