Shailesh's Blog

Creating a CI/CD environment for React applications using Netlify

Creating a CI/CD environment for React applications using Netlify

Shailesh's photo
Shailesh
·

3 min read

Hosting your react-app on Netlify can go wrong in so many ways , I still remember the first time I was creating CI/CD environment for my react app , it took me one whole day to figure out how to deploy my repository on Netlify .

But don't worry it won't be the case for you , I will explain and mention all the things that can go wrong while deploying .

1. Create React App

  • First you have to create a repository in Github and open the repository in your code editor (VS code , Atom) .

  • Go to the terminal and write npx create-react-app my-app (Here my-app is the name of the folder inside which the react eco system will be created , you can name it anything it's not limited to my-app)

command create app.png

Deploying on Netlify.

Mainly there are two ways to deploy on Netlify :-

1. MANUAL DEPLOY ( DRAG AND DROP FEATURE )

Once you are done with your project , just run the build command i.e. npm run build or yarn build , what this does is it creates a optimize version of your codebase , once you run the command it creates a build-folder inside your "my-app" folder , after that open Netlify home page and go to add new site and open deploy manually option now just drag and drop this build folder inside .

Drag and drop.png

CI/CD DEPLOY

Well this is the best one where it will automatically build every time you do a merge to the main branch .

In this process it creates the most issues , so I will explain every thing one by one with all the problems that you will face .

  1. Go to Netlify homepage and click on add new site and then click on deploy a existing project .

  2. Choose the repository you want to use

Netlify ci cd screen.png

  1. In the above image you can see something called Base Directory , In this write the folder name inside which build exist in this case the folder name is my-app

  2. In Build Command , write your built command that is mostly npm run build but here is has a catch , which will eat your head for hours ,just don't write npm run build , add one more thing CI= npm run build , just make sure about the spacing after CI , this spacing thing costed me most of the time .

  3. In the Publish directory just write the build folder path in this case its "my-app/build"

Well now your website is deployed .

But new issues will be created after deployment that is about routing , if you go to any other page then home through URL it will show you 404 PAGE NOT FOUND

To fix this issue , create a file _redirects in your Public folder ,make sure its in public folder . /* /index.html 200 write this in your file and save it . and deploy again .

You are good to go now , all the problems are resolved and a lot of time is saved .

THANK YOU FOR READING THE BLOG AND IF YOU STILL GET ANY ISSUES JUST DROP A MAIL AT

ReactNetlify