DEV Community

Cover image for How to Deploy React to Netlify

How to Deploy React to Netlify

raaynaldo profile image Raynaldo Sutisna ・2 min read

Step One: Login to Netlify

Click New site from Git on the home page after you are login.

Step Two: Choose your git provider

Choose what git provider that you use. I am choosing Github in this step.

Step Three: Choose your repository

Search and choose repository you want to deploy

Step Four: Build options and deploy

  • You can choose any branch from your repository instead of the main branch.
  • Type this CI= npm run build in the Build Command.
  • Click Deploy site! fourh-step

Step Five: Change the site name (Optional)

  • Go to Site Settings. site-name-first
  • Click Site details and Change site name. site-name-second
  • Change the name and save. site-name-third

React Router DOM Problem

Page Not Found
Looks like you're followed a broken link or entered a URL that doesn't exist on this site.
Enter fullscreen mode Exit fullscreen mode

If you are using react-router-dom and you get this error message when you try reload the route page.

Create a _redirects file inside the public folder and copy this code

/* /index.html 200
Enter fullscreen mode Exit fullscreen mode


Bonus: Set fetch baseURL dynamically (on Development or on Production)

Changing API baseURL whenever I deploy to the server is really painful because I always forget to do that. However, I found a trick to handle this problem.

I am using axios for handling fetch-request and I set up this in the index.js

// ./src/index.js

if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
  // development URL
  axios.defaults.baseURL = `${process.env.REACT_APP_API_SERVER_DEVELOPMENT}/api/v1`;
} else {
  // production URL
  axios.defaults.baseURL = `${process.env.REACT_APP_API_SERVER_PRODUCTION}/api/v1`;

      <App />
Enter fullscreen mode Exit fullscreen mode

What is process.env.REACT_APP_API_SERVER_DEVELOPMENT and process.env.REACT_APP_API_SERVER_PRODUCTION? I create .env to save the baseURL.

Enter fullscreen mode Exit fullscreen mode

We are good to forget changing URL for production.

GitHub logo raaynaldo / netlikuy-deploy-test

learn how to deploy React App to Netlify

Deploy your Rails API?

Discussion (1)

Editor guide
dance2die profile image
Sung M. Kim

Thanks for sharing, Raynaldo~

I see a lot of these deploy-to-Netlify posts but as Netlify changes (not breaking mostly) overtime, this is helpful to see a working post ~