Hosting React Projects on Heroku

Github is a great tool for someone looking to host portfolio projects. They allow you to host your front-end HTML/CSS/JS apps on their servers using Github Pages. You can refer to Deploying React Apps to Github Pages for more info on that. It's pretty simple and you should use it as much as possible to host your front-end-only apps. 

But, for more complex applications, it might not be enough. As part of the Complete React Developler 2020 Course on Udemy, I had the client and backend server code all wrapped up into one application. The back-end had to connect to a Stripe test server for credit card processing. It's a real-life scenario for an e-commerce website, something a bit much for what Github offers in terms of hosting.

Enter Heroku! 




Heroku is perfect for someone building applications with multiple layers of complexity. They are pretty complete with what platforms they support, and they have various pricing options. If you're going for FREE, you get what you pay for -- there is a bandwidth limit and your app goes offline if dormant for a while. I haven't used it for production yet, but if you're just building a portfolio app, like me, then it's a perfect alternative to Github Pages.

Below are the steps to take to host a React app on Heroku.

1. Create an account on Heroku

Needless to say, without an account you can't host. But, more importantly, you cannot get to the tools that allow you to deploy from VSCode straight to Heroku. So create that account at www.heroku.com

2. Install latest version of the Heroku Command Line Interface (CLI)

Visit https://devcenter.heroku.com/articles/heroku-cli and download the command line tool. Once it is downloaded, you must login to your account. Open a command window and type:

>> heroku login

A browser window will open where you will enter the credentials to your Heroku account.

3. Create Application on Heroku from within your project folder. 

If you haven't already done so, make sure your command window is at the root of your project folder. You will execute a command to create an equivalent project folder on the Heroku server. For this example, we will use urbandragonwear as the application name, which will then be used for the project folder as well as the subdomain of the URL for the app on Heroku: https://urbandragonwear.herokuapp.com/

>> heroku create urbandragonwear --buildpack https://github.com/mars/create-react-app-buildpack.git

4. Deploy Project to Heroku

First, commit all changes to GitHub. Deployment happens between Github and Heroku, so if it's not on Github it won't be deployed to Heroku. 

Once you've synced with Github, execute the command below to push your code from GitHub to Heroku. The master branch is used in the example, but you can change the branch if necessary. 

>> git push heroku master

This will take a few minutes as it is pushing code, compiling, and the starting server and all other sorts of processes, so let it run to completion. Your output should eventually look like so (after hundreds of lines of other output):

remote:     https://urbandragonwear.herokuapp.com/ deployed to Heroku
remote:
remote:     Verifying deploy... done.
To https://git.heroku.com/urbandragonwear.git
   59ab12e..7979fd2  master -> master

You can check the status of the build on the Heroku dashboard and any errors that may have come with the build. 



5. Give access to 3rd party services

My app uses Firebase to store catalog, user, and order data, as well as user authentication and google authentication integration. In order for Firebase to work with Heroku, I have to give my application on the Heroku server access to the authentication service in my Firebase project.
  • Within the Google Firebase console, go into the project. 
  • Select Authentication on the left-hand side.
  • Under "Sign-in Method" tab, go to the "Authorized Domains" section and add new website URL: https://urbandragonwear.herokuapp.com/  
Once that is setup, test your authentication services and make sure it all works as expected. 

6. Set Private Environmental Variables

You never want the credentials to your 3rd-party services included with your application in Github. This is bad practice. Usually, it's store elsewhere, for security reasons, but for now it should be only stored locally in your project folder. 

As part of your application, it is most likely included in the .env file that is ignored by the Github command line interface by default. Since it is NOT in Github, it won't be sent to Heroku. You will have to setup these variable manually. 

Once the application is successfully deployed on Heroku, execute the following command to set individual environment variables:

>> heroku config:set VARIABLE=VALUE

For example, for Stripe credit card processing, I had to deploy the stripe key which is unique to my account. So I will execute the following command.

>> heroku config:set STRIPE_SECRET_KEY=123123123123123123123  (not the real key)

When setting environment variables, the server has to restart. Your output should look like so:

Setting STRIPE_SECRET_KEY and restarting ⬢ urbandragonwear... done, v12
STRIPE_SECRET_KEY: 123123123123123123123123

Now test your site, and you should be all set. 

Happy Heroku... ing!

Comments

Post a Comment

Popular posts from this blog

Control Blogger's Contempo Theme Background Behavior

In creating this blog, I selected Blogger's Contempo theme because it seemed the least distracting and best suited to my needs. All the other themes had a lot going on; they were a little too busy for my taste. One thing that bothered me about the Contempo theme was the way the background just cut's off as you scroll down the blog feed. The theme allows you to control the height with an exact value, but that wasn't enough for me. I wanted to either have the background repeat for the length of the blogger page, or have the background image static as the blogger feed scrolls over it. I chose to make it static. Here's what you have to do to make this change. 1. Go to your blogger and click on Theme and then click on the Customize button. 2. Remove the background image, no need for any additional bandwidth costs. 3. Go to Advanced -> Add CSS, and past the code below. The goal is to hide the Contempo blog's photo layover design so you can control the bo...
Read more

React Redux-Saga Actions - Step By Step

Image
In my adventures with React redux-saga, I've had to repeat the same process to create a new action, and there were a few occasions where I fumbled -- either I missed a step or did something out of sequence. As a result, I documented the process, step by step, so that in the future I don't waste time. I even created a small application to validate my instructions. I learned React with Redux-Saga in the Complete React Developer in 2020 Course on Udemy . I highly recommend this course. ( Note: Udemy usually has Flash sales for their courses that bring them all to under $20. This one is totally worth the investment.) To explain the process of creating a new reux-saga action, I will use a specific feature - the order search feature. It has a few parts: Upon a user's sign in, the user's orders will be fetched and presented. When a user signs out, the list of orders is reset. An admin can search for orders by a user's email. Note: If you want to skip this exp...
Read more

Deploying React Apps to GitHub Pages

Image
Github has this great feature where you can host SPAs (Single Page Applications) for free. You can make calls to firebase, pull in json files and have other external integrations. There are limitations, such as react-router and related packages do not work. But static and relatively simple html, css, and javascript sites can be hosted without issues. So, how do we do this?  Well, it's pretty simple. 1. CREATE A GITHUB PROJECT REPOSITORY Once you create a new Github project that will hold your code, you will need the HTTPS or SSH link. You can get this by clicking the Clone or Download" button. Copy that link for step #2. 2. LINK YOUR LOCAL FOLDER TO GITHUB PROJECT REPOSITORY Usually, when working in a group, most companies require an SSH key for linking to Github. Here, we are independent and really only use HTTPS for linking to Github repositories. In case you don't already have GIT For Windows installed, here is the link. This will install all the git comman...
Read more