Why Netlify?
- It’s free (you can upgrade to a higher version)
- The site is deployed forever
- Continuous deployment and integration
- Really easy/fast process
Let’s get started
I’m assuming that ReactJs project is already in place and working i.e.
- Created the web app using npx create-react-app appname
- npm install
- npm run build
- npm start (to make sure it’s up and running)
There are a lot of docs out there which helps with this but I’m writing it because I faced a small issue that took time to solve.
Publish using Netlify Command Line
In your Visual Studio Code or any editor you are using-> Go to terminal and type the following commands
npm install netlify-cli -g
netlify deployIt requires you to authorize your Netlify account or create new if you don’t have one.
You can either link to an existing site or create and configure a new one
Create a unique name for the site.
For publish directory I chose build directory (you can choose any directory you want).
After this your site will be published and the URL will be provided.
For continuous deployment you would have to connect the git repository of this project or you can choose to directly publish the site using git repository.
Publish using Git repository
- It’s a better option if you have to make changes once deployed.
- You don’t have to publish again just pushing changes to the GitHub repository makes changes in the deployed site.
Steps
Go to the netlify site and login then select new site from Git
Authorize GitHub (or GitLab, BitBucket) either complete or select the access to a particular repository.
After selecting a repository fill in the details
The build commands given over the internet for react js web app are
- Npm run build
- True npm run build
- CI = true npm run build
- CI = false npm run build
What worked for me was CI = false npm run build because in case of CI = true npm run build it treats warning as errors and same goes for the other two (they are also considered outdated in some cases) and the build fails.
Then click deploy site, wait for it to get published.
You can go to domain settings and add custom domains.
You will have the link to your website which would be deployed forever for free until you take it down!
For more questions/feedback contact me.
References:
Deploy React on Netlify — Starter Templates & Resources
How to deploy a React application to Netlify (freecodecamp.org)
