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 selectDeploy 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 rannpm run build
Simply typebuild
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!
Top comments (0)