Bootcamp
Search…
8.1.2: CRA Deployment
Deploying both the back and front end repos of a project requires some special workflows. This is for a few reasons:
1. We already have 2 repos, they can't be deployed in a single step.
2. Heroku apps without a custom domain (herokuapps.com) are on the Public Suffix List. This means we cannot make CORS requests between a front-end and back-end that are both deployed on Heroku. See more about the public suffix list here: https://devcenter.heroku.com/articles/cookies-and-herokuapp-com
These instructions are taken from here: https://unparagonedwisdom.medium.com/deploying-react-front-end-on-netlify-and-express-postgres-and-node-js-98495958ed9
Heroku
This is the same as previous instructions. Deploy your Heroku backend first! Test the API by typing one of the routes in the browser.
Netlify
We'll be deploying the front-end on a different service, Netlify. Netlify is optimized for applications that are back-end light or that have a separately deployed back-end like our current app.
Sign Up
CLI Setup
The very first thing you need to do is install netlify-cli tool. By doing so you can easily deploy from your command line and even in VS Code itself. To install netlify-cli, type the code below:
1
npm install -g netlify-cli
Copied!
There after authorize netlify by keying into your command line:
1
netlify login
Copied!
After this command, it will open the browser and click on Authorize
You should see the page below:
React Router
This next step assumes you already have a React app and you are using React Router, if not skip ahead to the next section which is the deployment section.
If you are using React alongside React Router before creating your production build, create a new file in the
public folder and call it _redirects:1
cd public
2
touch _redirects
Copied!
Open the file in VSCode and add the line of code below into
_redirects. This redirects all URLs in our deployed domain to /index.html.
_redirects1
/* /index.html 200
Copied!
We add this code because Netlify only deploys static sites- a prepared
dist bundle of JavaScript that cannot behave differently to other URL parameters. (Specifically #3 response will be the same for /dogs/:id and /cats/:id.) Those rendering steps are done inside the React Router URL param logic only. We have to allow the app to accept any URL parameter and still serve the same index.html file every time. React Router will then run render logic depending on the URL.Creating your build
To create your production build, type into the command line:
1
npm run build
Copied!
Backend URL Settings
We want to be able to reference our backend URL. We currently have it hard-coded as localhost:3004 in our app. We can set a line in our code that sets an environment variable so that when the build runs the value is set correctly.
1
const REACT_APP_BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:3004';
Copied!
This means that when we run the build we can set this value. The built code will have the appropriate backend URL value in it. When we want to set an environment variable for only a singe run of a command we simply prefix that value onto the command:
1
REACT_APP_BACKEND_URL='https://hangout-1.herokuapp.com' npm run build
Copied!
Deployment
After your build has been created, it’s time to deploy to netlify on a production build. Enter into the command line:
1
netlify deploy --prod
Copied!
After entering the command you will see:
Select Create & Configure to a new site and you will have to select your team after.
Thereafter, name your app if You want, if not Netlify will generate a random name for You. You can change the site name later. For me, I chose hangout-1
Next, you will have to choose the publish directory. If you are just deploying a static website, just hit enter. Otherwise, key in build(This build is created from your previous npm run build) and hit enter.
You will see a success message.
Now head over to the netlify webpage and you will see your site deployed.
Last modified 27d ago