Deploying React Front-end on Netlify, Node.js on Heroku Backend with Domains from Namecheap

Deployment is always not easy and instructions aren’t always clear. If you struggled like me to set cookies when you deploy both apps on Heroku due to the public suffix that Heroku is on, you are in the right place. You will not be able to set cookies using two separate Heroku apps without a custom domain name during to Heroku being on the public suffix.

This is the cheapest option with you spending USD 7/month for hobby tier excluding the price of your domain name. Read on for easy to understand steps with pictures provided, hopefully its ELI5.

Step 1: Sign up for a Netlify Account

Step 2: Deploy your front end app on Netlify

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:

npm install -g netlify-cli 

There after authorize netlify by keying into your command line:

netlify login

After this command, it will open the browser and click on Authorize

You should see the page below:

This next step assumes you already have a react app in place 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:

cd public
touch _redirects

Open the file up in VSCode and add the line of code below into _redirects

/* /index.html 200

The reason we need to add the above line of code is because Netlify deploys as a static page and we need to tell the browser to accept redirects as react works as a single application for the most part and as such the url itself does not actually change but the components that are rendered changes.

Thereafter, create your production build.

Creating your build

To create your production build, type into the command line:

npm run build

Deployment

After your build has been created, it’s time to deploy to netlify on a production build. Enter into the command line:

netlify deploy --prod

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.

Congrats, you are now done deploying your front-end on Netlify.

Step 3: Sign up for a Heroku Account and install Heroku in your command line:

MacOS

brew install heroku/brew/heroku

Windows / Linux

curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

Step 4: Deploy your back end app on Heroku

Firstly, associate your repo with Heroku by changing into the directory you have your backend files and by entering into the command line:

heroku create

Check to see if the new remote Heroku has been created by entering into the command line:

git remote -v

You should be able to see your remotes, similar to the picture below.

Make your commits and thereafter push to heroku main with

git push heroku main

After you have done so, you will see if the build has succeeded and in my case, it has succeeded.

Step 6: Postgres add-on

Go to Heroku Postgres and install it.

After installing, enter into the command line heroku run bash to enter bash and thereafter if you are using sequelize, run your sequelize commands to migrate and seed your files.

Upgrading Heroku Backend to Hobby Tier

Next, “verify” heroku account by adding credit card details in order to add custom domain to heroku.

Upgrade the deployed backend heroku app to hobby tier (USD$7/mo, in heroku dashboard under resources.

Step 7: Buy a domain name from Namecheap (please sponsor me)

Step 8: Adding your domain to Heroku and Netlify

Go to Netlify and select your site

Click on Domain Settings

Click on add custom domain and type in your domain name that you bought:

After adding your custom domain, click on options and select go to DNS Panel

Leave the page at where it is, you will need it to copy the name servers later.

Next, proceed to namecheap.com and click on account and select dashboard

Click on manage on beside your domain name and thereafter click on the Advanced DNS Tab

Select Add a new record:

Select NS Record, for host input www and copy the value from the Netlify name server page and paste it in and click the tick button.

Add another record, select CNAME Record, for host input www and for value, put in your netlify.app url and click the tick button. For my app, the link was hangout-1.netlify.app

Lastly, add one more record, select A Record and for host enter @ and for the value input 104.198.14.52 This is the same for everyone as it is Netlify’s DNS. Click the tick button and you are good to go for the front end.

Head over to the command line and cd into your backend repo and then type:

heroku domains:add <YOUR_URL>

In my case, it was backend.hangout.casa

heroku domains:add backend.hangout.casa

There after type into the command line:

heroku domains

You should only have one, i have more in this case as I have deployed before.

Head back to namecheap and add a new record.
Select CNAME Record. For the host, it is what you type before the domain name. In my case, it is backend.

For the value, paste your DNS Target.

Step 9: Wait for propagation and you are good to go.
Propagation means that it will take some time for namecheap or whatever service provider you use to update before you can use it. It should not take more than an hour.

I hope this article did help someone to deploy and if the instructions are not clear enough, please feel free to contact me @ unparagonedwisdom@gmail.com. Additionally, I welcome feedback on how to make this article better. Do reach out to me! Happy Coding Everyone!

Brief introduction of me:
As of this article, I’m currently a student attending Rocket Academy and I’m currently 5 months into their 6 months bootcamp course . Do check out Rocket Academy if you’re interested in picking up Software Engineering with some of the best instructors stemming from Stanford and who worked in some of the top companies like Facebook and Alibaba.