How to Deploy React to Netlify

#react #netlify #webdev #tutorial

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

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started