How to Deploy React to Netlify

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!

Step Five: Change the site name (Optional)

• Go to Site Settings.
• Click Site details and Change site name.
• Change the name and save.

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.

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

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`;
}

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")

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

./src/.env
REACT_APP_API_SERVER_DEVELOPMENT=http://localhost:3001
REACT_APP_API_SERVER_PRODUCTION=https://herokuy-deploy-test.herokuapp.com

We are good to forget changing URL for production.

https://netlikuy-deploy-test.netlify.app/

raaynaldo / netlikuy-deploy-test

learn how to deploy React App to Netlify

Deploy your Rails API?

How to Deploy Rails API to Heroku (ruby-2.6.1) (PostgreSQL)

Raynaldo Sutisna ・ Feb 21 '21

#rails #heroku #webdev #tutorial

Comments

[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 ~