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.
Create a file called .env in the root of your project’s directory.
Here’s the app’s tree:
- .env <-- create it here
- 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.
- Add the .env file to your .gitignore file
.env <-- add this line
After you’ve saved .gitignore, run $ git status to make sure that .env is not on the list of changes to be committed.
- 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.
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.
- change the API key asap
- You can do this by using git rebase and removing the commit that added the keys.
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