TIL - Continuously deploy a React Project on Netlify using your Git Repo (incl hidden API Key & fixing React Router)
Tags: netlify, react, beginners, frontend
Published: 2020-10-01 10:02:26

 
##Get Started
Go to the [Netlify](https://www.netlify.com/) registration page and subscribe via your Github account. Authorise Netlify to have access to your Github account. After beeing redirected to Dashboard:  add a new project!
In the providers choice list, select ‘Github’. Set up Netlify to have access to the git repository you want to deploy. 
To complete the configuration, click "install".
Navigate back to Netlify. Click on the repository to begin the deployment process.

In this step, you’re able to select all the options required for Netlify to build your application. In the case of a React application, you can use the default parameters:

    Branch to deploy: master

    Build command : npm run build

    Publish directory: /build

Once you’ve checked these settings, click Deploy site.
Now you can monitor the Deployment Process. 
Netlify will listen to the master branch and update your site accordingly. 

###Monitor
Click on Sitename, Choose the last Production Deployment: 
![Published Deployment](https://i.imgur.com/h4lIUw7.png)
& Look at the Log 
![Log](https://i.imgur.com/Mn2I9xX.png)

##Warnings prevent Deployment 
![Error](https://i.imgur.com/41Y33DB.png)
if the warning prevent deploying on netlify: get rid of warnings from the deploymend or got to in your React- App & change this in the ` package.json`: 
"build": "CI= react-scripts build"

##Hide API-Keys in Netlify

Create a file called .env in the root of your project’s directory.

Here’s the app’s tree:

- your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2. Inside the .env file, prepend REACT_APP_ to your API key name of choice and assign it.

REACT_APP_ is, in fact, a tool that create-react-app uses to identify these variables.

` REACT_APP_API_KEY=your_api_key`   
Example: `REACT_APP_GOOGLE_API_KEY=123456`

3. Add the .env file to your .gitignore file

// .gitignore

 api keys
.env       <-- add this line

 dependencies
/node_modules
...

After you’ve saved .gitignore, run $ git status to make sure that .env is not on the list of changes to be committed.

4. Access the API key via the process.env object.

To check that you can access your API key, go to your App.js file and add console.log at the top below the require statements. After saving the file and reloading the page, if the console log does not show your API key, try restarting the react server. And of course, make sure to remove the console.log line before committing your code.

```javascript 
console.log(process.env.REACT_APP_GOOGLE_API_KEY)
```

In order to use your secrets in Netlify, go to Settings > Build & deploy > Environment > Environment variables. There, add your variables, just like you had in your .env file.


###Excursus getting rid of pushed Key in Github 

1. change the API key asap
2.  You can do this by using git rebase and removing the commit that added the keys.

##Handle React Router
If you’re publishing an app that uses a router like React Router you’ll need to configure redirects and rewrite rules for your URLs. Because when we click on any navigation item to change the page (route) and refresh the browser, we get a 404 error page.

To support pushState, make sure to create a `public/_redirects`  file with the following rewrite rules:

``` javascript
  /* /index.html  200 
``` 

When you build the project, Create React App will place the public folder contents into the build output.

For dynamic URL Params use `<HashRouter>`  instead of `<Browserrouter>`.