TIL - Continuously deploy a React Project on Netlify using your Git Repo (incl hidden API Key & fixing React Router)

Get Started

Go to the Netlify 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:

& Look at the Log

Warnings prevent Deployment

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

1. 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

1. 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.

1. 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.

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:

  /* /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>.