How to Deploy React to Heroku With a Node.js Server

[00:00 - 00:19] All right, so in this lesson, we're going to walk through how to configure app to deploy to the internet with Heroku, a platform that enables developers to build, run, and operate applications entirely in the cloud. So you might be wondering why we've chosen Heroku to deploy our app instead of similar platforms like Netlify or Versailles.

[00:20 - 00:28] The short answer is that Heroku lets us deploy a node server while the others don't. Netlify and Versailles are only for deploying static sites.

[00:29 - 00:42] So if you don't have one already, make sure to go to Heroku.com and sign up for a Heroku account. Once you have a Heroku account, head over to the new button and create a new app.

[00:43 - 01:05] If you have a domain in mind, this app name input will let you know if it's available. So for example, if you wanted to call this new line Spotify app, it will tell you that the new line Spotify app name is available, but if you don't care what the site is called, you can just leave the app name input blank and it'll create a random name for you.

[01:06 - 01:21] Whatever app name you choose, Heroku will create a URL dedicated to this app for you, ending in Heroku app.com. So if your app name is new line Spotify app, your app's URL will be new line Spotify app.heroku app.com.

[01:22 - 01:38] Since I've already deployed my app to Heroku, I've chosen the name Spotify profile V2 and it ends in Heroku app.com. So once you've created your new Heroku app, you should be redirected to your app's deploy tab, which looks something like this.

[01:39 - 01:53] So under the deploy using Heroku Git section, follow the instructions to install the Heroku CLI, log in to Heroku via your terminal, and then create a new Git repository. Then add the Heroku remote.

[01:54 - 02:04] However, do not run Git push Heroku master yet. We still have a few things we need to button up in our app before we try to deploy it to Heroku.

[02:05 - 02:14] Note that for this lesson, I'm going to be using Spotify profile V2.heroku app. com as the production URL, since I've already deployed my app to Heroku.

[02:15 - 02:31] Obviously, whenever you see this Spotify profile V2.heroku app.com in the manuscript below, place it with your own Heroku URL. So now that you know what your production URL is going to be, we need to update it in all of the places we've been using our local host URLs.

[02:32 - 02:45] The first thing we want to do is add a redirect URI to our Spotify app settings . So if you remember back in module two, we used the Spotify dashboard to log in and see our Spotify apps settings.

[02:46 - 03:01] So in here, click Edit Settings and then under redirect URIs, add your production redirect URI. So for me, I'm using Spotify profile V2.heroku app.com/callback and make sure you replace the Heroku app URL with your own.

[03:02 - 03:12] Then make sure to scroll down to the bottom and hit Save. Next, we'll head on over to our code and update some of our environment variables.

[03:13 - 03:28] So here we're going to add a variable called frontend URI and that's just going to be local host 3000. The URL we're running our React app on.

[03:29 - 03:45] And while we're in here, we'll make sure to update our .m.example as well. Next we'll go to our index.js file, our express app and then we'll scroll up to the top and we'll update some of these environment variables here.

[03:46 - 03:54] So here we added the frontend URI and we also added the port. We can get rid of this lowercase port here.

[03:55 - 04:27] So here we're going to use the frontend URI variable to replace everywhere we 're using local host 3000. So down here we'll replace this with frontend URI and then down here in our app .listen we'll update this to be capital port and use that in the console log as well.

[04:28 - 04:37] Notice that our port variable we're referring to here is process.m.port but we don't have a port variable in our .m file. So what's up with that?

[04:38 - 04:46] We're doing this because Heroku Dinos expose a dynamic port for your app to bind to on the port variable. If we didn't do this, our Heroku app would throw an error.

[04:47 - 05:10] Finally, we'll head over to our other hard coded instance of a local host URL, which is the login page of our react app. So here I'm going to add a constant called login URI that defaults to the local host URL if we're not in a production environment and then uses our Heroku app URL when the app is in production.

[05:11 - 05:27] So here I'll just update this to say login URI and give that a save. Alright, so now that our development environment variables are all set, we can add production environment variables to our app via the Heroku dashboard.

[05:28 - 05:44] So in your settings tab, there should be a config var section and if you hit reveal config var, you'll see that I already have some variables set. And in your app, make sure to copy the values from your .m file for your client ID and client secret.

[05:45 - 05:55] And then for the front end URI and the redirect URI, you can use your Heroku app URL. So front end URI for me is Spotify profile v2.heroku app.com.

[05:56 - 06:12] And the redirect URI is that same Heroku app URL with slash callback. We can use the same Heroku URL for both of the variables because once our app is deployed Heroku, it will only be using one server.

[06:13 - 06:22] So before we're ready to push our code to Heroku, there's still a few things we need to add to our code to make sure it behaves properly in a production setting. Let's make sure we've covered those bases.

[06:23 - 06:36] So if you've ever deployed an app to Heroku, you might know the concept of build packs. Basically, Heroku has a set of officially supported build packs for different languages like Ruby, Python, and Node.js.

[06:37 - 06:53] These build packs run a set of scripts to install dependencies, output generated assets or compiled code, and more for your app when you deploy your code. It saves you from manually having to specify commands like npm install and npm start for your app's build process.

[06:54 - 07:09] For our app, we're going to be using the Node.js build pack since we have a node server that needs to be run for our app to work. However, since we're using create react app for our front end, there's some extra configuration we need set up with our node server to handle this in production.

[07:10 - 07:19] So first, there's a few things we need to add to our package.json file. In here, I'm going to add a engines property to specify the node engine we're using.

[07:20 - 07:34] So I'll say node and then specify the version. And then under here, we're going to add another cache directories property.

[07:35 - 07:41] And that's going to be an array. And in here, we're just going to tell Heroku which directories to cache.

[07:42 - 07:59] So we want to cache our root node modules directory for our express app, and then the node modules for our react app as well. Now by default, the node.js build pack will automatically run npm install on our root package.json.

[08:00 - 08:12] However, since we need it to also run npm install on our react apps package. json, we can add an npm script here to tell Heroku to install and build our front end when we deploy our app.

[08:13 - 08:32] So here, I'm going to add another script called build. And basically, this script will tell the Heroku app on build to set the node end to production and then go into our client directory and run npm install and npm run build to compile our react app.

[08:33 - 08:41] Next we'll add a start server npm script. And this is just going to run node index.js.

[08:42 - 08:56] We need this because the node.js build pack defaults to using npm start as the start command. Since we can't use concurrently to run our app on the Heroku server, we'll tell the Heroku server to use this command instead.

[08:57 - 09:08] So to do that, we'll add a file called proc file at the root of our project. And here, we'll just tell Heroku to run npm run start server.

[09:09 - 09:22] So web npm run start -server. All right, so the last thing we need to do to prepare our app for production is configure our express app to serve our react apps routes.

[09:23 - 09:44] So at the top of our index.js file, we'll import the built-in path module. Then before all of our route handlers, we'll add this app.use line, which will tell our express app to priority serve any static files from our react app.

[09:45 - 09:51] Then down at the bottom of our file before our app.listen, we'll add this app. getline.

[09:52 - 10:01] This block of code is a catch all for all of our express routes. If there are any routes our express app doesn't recognize, it'll defer to our react app to handle it.

[10:02 - 10:15] So here, we're just telling our express route to look in the client/build directory, which is the directory our react app will build into. Now all that's left to do is push our app to Heroku.

[10:16 - 10:39] So once you've logged into Heroku via your Heroku CLI and then initialized your repository and added the Heroku remote, go ahead and run git push Heroku master or main if you're using main as your default branch. So if everything goes smoothly, you should see the build logs in your terminal finish with something like this.

[10:40 - 10:58] It should say build succeeded and then your Heroku app URL deployed to Heroku. You can also check the activity tab in your Heroku dashboard and once the build has succeeded, you can view the build log, which is also what was printed in your terminal here.

[10:59 - 11:19] In case there's an error, you can always follow their directions to help debug it and you can also open the logs of your app to see if there's anything wrong here. Once your app has successfully been deployed, make sure you visit it and you click around to make sure everything is working properly.

[11:20 - 11:38] Now we can also make sure those meta tags we set in our index.html for our OG image and favicons are working properly. You can use tools like metatags.io, the Twitter card validator or Facebook debugger to test out your site.

[11:39 - 11:56] But if you just paste the URL of your Heroku app in here, it should give you a little preview of what your card looks like. So if you put your own Heroku URL into one of these validators, you'll see that the OG image isn't working properly.

[11:57 - 12:08] My OG image is showing up because I've already deployed my app to Heroku properly, but your OG image should be broken. And this is because OG images require absolute paths.

[12:09 - 12:24] And in our index.html, our OG image is still using the public URL variable. So all we need to do here is update this to use our Heroku URL instead.

[12:25 - 12:30] Once you save that and push it up to Heroku, your OG image should be all set. Alright, and that's it.

[12:31 - 12:35] We've built and deployed a real world app that interacts with the Spotify API.