So you've taken on a project and have written your first app in React(congrats btw!) and you're looking to put it up on the web for all to see. Fortunately, it's an easy and straightforward process! In this article, I'll be going over how to deploy a React app using Netlify and Heroku.

This article assumes that your app uses json-server as a fake REST API

What is Heroku? What is Netlify?

Heroku and Netlify are both services for used for hosting web applications. The main difference between the two is that Netlify is more geared toward front-end development, while Heroku is geared towards the back-end. One could host a full stack web application on Heroku. However, Netlify can only host serverless web apps and static web pages.

It's considered good practice to keep your front-end and back-end separate, one major reason being that debugging becomes easier. If something goes wrong in your app, you'll easily be able to tell if the problem is in the front-end or the back-end.

Deploying your API on Heroku

There is an excellent guide on deploying a json-server backend by Jesper Orb at https://github.com/jesperorb/json-server-heroku which we'll be using for this portion of the guide.

Creating your database

• First, you'll need to create your database. Click on the following link: https://github.com/jesperorb/json-server-heroku/generate to create a repository with the necessary files needed to deploy. Give your repository a name, then click Create repository from template at the bottom.

• Once the repository is created, clone the newly created repository to your computer.

• Go to the db.json file in that repository, you should see some example code like this:
  

{
  "posts":[
    {
      "id" : 0,
      "title": "First post!",
      "content" : "My first content!"
    }
  ],
  "comments" : [
    {
      "id": 0,
      "content": "Wow such content!",
      "username": "zero_cool"
    }
  ]
}

This example would create a /posts and a /comments route for GET and POST requests. It's an example of what your own data structure should ideally look like.

• Replace the contents of db.json with your own data. Then commit and push your changes to GitHub.

If your id property has a name other than id, it's a good idea to rename it to avoid issues (I found this out the hard way). If you have a rather large JSON file with a lot of data and are using VS Code, you can select the property you want to edit with your cursor, then press Command + Shift + L on Mac or CTRL + Shift + L on Windows to add a cursor to all instances of that property name, then simply type the new name to update all of the property names at once.

Deploying to Heroku

• First, create a free Heroku account at https://heroku.com/
• Install the Heroku command line tool on your computer.
  • If you have Homebrew installed, run the following command (this is the preferred installation method):

 $ brew tap heroku/brew && brew install heroku

• Otherwise, you can install via NPM with the following command:

  $ npm install -g heroku

If installing via NPM, just be aware of the following warning from Heroku:

You can then verify that the installation by running heroku --version

• Log in by running the heroku login command. When prompted, press any key to open your browser and log in with your credentials.

$ heroku login

heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

• Once you're logged in, cd to the repo you cloned earlier and run the following command:

$ heroku create

or

$ heroku create <your-app-name>

$ heroku create

 Creating sharp-rain-871... done, stack is heroku-18
 http://sharp-rain-871.herokuapp.com/ | 
 https://git.heroku.com/sharp-rain-871.git
 Git remote heroku added

• Push your app to Heroku:

$ git push heroku master

• Open your newly created Heroku app, you should see your live API:

$ heroku open

Note: At this point, you should update the fetch requests in your React code to point to your Heroku app i.e. change your endpoint from http://localhost:3000/<resource> to http://<your-app-name>.herokuapp.com/<resource>

Deploying your React app on Netlify

Now, you'll be deploying your front-end code on Netlify. First, create your free Netlify account at https://www.netlify.com/

Creating a production ready build of your app

Before doing anything, you'll need to create a production build of your app. In your terminal, type npm run build. This command will create a build directory at the root of your project with a production build of your app.

Configuring redirects

If you're deploying an app that uses a router (such as React Router), you'll need to configure redirect rules for your URLs. Otherwise, when you click on a navigation link to go to another page and then refresh, you will get a 404 error page.

• In your build folder, create a file named _redirects. Inside the file, add the following rule:

/*    /index.html  200

Now, no matter what URL the browser requests, the user will be served an index.html file. No more refresh errors.

See more info about redirects and rewrites here: https://docs.netlify.com/routing/redirects/

Now.. you're ready to deploy your app!

Method A: Drag and Drop (fastest way)

This is by far the fastest and easiest way to deploy your app.

• In your Netlify dashboard, click on Add new site then select Deploy manually

• Find the build folder in your project directory, then simply drag and drop the folder into Netlify.

• Your app will be given a randomly generated name, you can change this name later.

• Depending on the size of your project, it may take some time for the app to upload.

• Once the site is deployed, click on your app URL to see your live app.

Method B: Netlify CLI

Netlify also provides a command line tool to deploy your app straight from your terminal.

• Install the Netlify CLI with the following command:

$ npm install netlify-cli -g

• Once it's installed, make sure you're in your project directory first, then run the following command:

$ netlify deploy

• You'll get a pop-up browser window asking you to log in with your Netlify credentials and grant access to the Netlify CLI.

• In your terminal, you'll see a prompt saying This folder isn't linked to a site yet. What would you like to do?
  Since we're deploying a new site, select Create & configure a new site

• Choose a name for your site, or leave it blank to get a randomly generated name (you can change the name later).

• Provide the publish directory. This is the build directory you created earlier when you ran npm run build
  Simply type build and press enter
  

• You'll see a Website Draft URL, which you can copy/paste into your browser. This is essentially a preview of what the live app will look like.

• If everything looks good on your draft URL, deploy your app into production with the following command:

$ netlify deploy --prod

• You will once again be asked to provide the publish directory, type build again and hit enter.

• Your site will be deployed. You'll see two URLs, a Unique Deploy URL and the actual Website URL. The Unique Deploy URL represents the unique URL for that specific deployment. Each time you update your app and deploy a new version, you're going to get a unique URL for that deployment, which means it's possible to see previous versions of your app by going to their corresponding unique URL.

I hope you've found this article to be helpful. If there are any errors or if you think there's some extra info I should add, please let me know!