2 ways to overcome deployment problems with React on Netlify
Tags: netlify, react, github, deploy
Published: 2021-07-11 20:16:06

In the last 6 months, I deployed a bunch of projects on Netlify, mostly React. It was super easy, none of my deployments ever failed. But I struggled a lot getting my last two projects deployed on Netlify, and I didn't know why. The error was
> **Treating warnings as errors because process.env.CI = true.**

Even if I am still not 100% sure why the deployment failed after following the same steps as usual, I found two solutions to handle the failure and finally got my two projects online. 

---

### Table Of Contents

1. [How to deploy a project on Netlify](#chapter-1)
2. [Problems while deploying](#chapter-2)
 1. [Solution 1: Change scripts in package.json](#chapter-3)
 2. [Solution 2: Change key on Netlify](#chapter-4)

---

When you are already familiar with how to deploy your site, you can [skip](#chapter-5) the following part.


## How to deploy your React projects on Netlify<a name="chapter-1"></a>

After creating an account, the profile's overview is shown. Click on the button `New site from git` which directs you to the deployment page. (There is also the possibility to deploy your site using the command line, which will not be explained in this article).
![New site from git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccsbfy1o9747sglglr01.PNG)
**Step1:** You can now choose from 3 different git provider: GitHub, GitLab and Bitbucket. After clicking your preferred provider, you will be directed to your repository list.
![Choose provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zefmcc1lhqebhwqr2m1h.PNG)
**Step 2:** Scroll throw your repositories or use the search bar to choose the repo you'd like to deploy by clicking it. You will now be directed to the settings for your site.
![Search bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlxsbu0r5xjr2cxojhlx.PNG)
**Step 3:** The owner of this project and the branch is already set. In the **basic build settings** add `npm run build` in the `Build command field` and `build` in the `Publish directory field`. When pressing the Deploy site button, Netlify starts to deploy your site. This could take a few minutes.
![]()
**Step 4:** When the last line of Netlify in the **Build Complete** section will show `Finished processing build request in ...m...s`, your project is fully and successfully build.
![Finished deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/excgz1ugrxeiigxench8.PNG)
**Step 5:** While deploying your project, Netlify chooses a random URL name that can be easily changed to the name you want. To do so, open settings and go to: General - Site details -Site information. Click on the `Change site name` button, change the name and save it.

**Step 6:** Now, everything is set up and you can click on the link of your project in the header of `Settings for yourname` to check out your deployed project.

## Problems I faced in two of my projects<a name="chapter-2"></a><a name="chapter-5"></a>

Even if I work mostly with React and TailwindCSS, I suddenly failed to deploy two of my projects following the steps above. The error I got was as follows:
![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt8nl1u4l4m91dcrim2x.PNG)

After a lot of googling, I found these two solutions which worked for me (I used a different solution on each project):

### Solution 1: Change the build part of the script in the package.json file in your project's code:<a name="chapter-3"></a>
![Solution 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao09u9uy17f0lh61kowb.png)
*(Craco was installed to use TailwindCSS, the default would be react-scripts like you can see in the eject part on the bottom)*

### Solution 2: Make changes in your deployment setting on Netlify directly:<a name="chapter-4"></a>

In Netlify open "Site details" - Build & deploy - Environment - Environment variables - edit variables and set **Key** to `CI` and **value** to `false`. 
![Change key to CI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usqv9en13gephuiky4f1.PNG)

## Closing words:

This would be it. I hope you find these tips helpful and that it will work out for you. If you found other solutions feel free to post them in the comments below.

---
![Thank you](https://docs.google.com/uc?export=download&id=1H1M4tSYBAJPnIuuK_FJ2iWnfyNfyG8Xr)

_Thanks for your reading and time. I really appreciate it!_