In this tutorial we will be doing a basic React + Node app deploy to Heroku.
There are a lot of tutorials that do this only using the command line, so to change things up a bit, I will do it completely without the command line.
For things like generating React and Express apps, we have no choice but to use the command line. For everything else we'll use a GUI.
I also assume you have a Github and Heroku account. They are both free, so no worries about signing up.
sample project:
https://github.com/iqbal125/react-express-sample
React and Express Setup
First, let's start by creating two directories named Server and Client.
The Client directory will hold the contents of the create-react-app command, and Server will hold the contents of the express command. This library just creates a simple Express app for us automatically, similar to create-react-app. It needs to be installed globally, which you can do so with the command:
npm install -g express-generator
After this, simply run these commands in each of the respective directories to install the starter projects:
npx create-react-app app1 in the Client directory
express in the Server directory
Change to the app1 directory generated by create-react-app and run:
npm run build
This will generate a production build version of the project that is optimized for a production deployment, with things like the error handling code and white space removed.
Note: In a development build you would use a proxy to http://localhost:5000 to communicate from your React app to your Express server, but here the React app and the Express server are just one project. The Express server serves the React files.
Next, cut and paste the entire build directory into the Server directory. Your project structure should look like this:
We can now add some code to let our Express server know to serve our React project.:
....
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
....
The first line of code serves all our static files from the build directory.
The second piece of code is to keep our client side routing functional. This code essentially serves the index.html file on any unknown routes. Otherwise we would need to rewrite our entire routing to work with this Express server setup.
To test your app, just run npm start in the Server directory and go to http://localhost 3000 in the browser. Then you should be see your running React app.
Now we are ready to upload this project to GitHub.
GitHub
Instead of using the command line to upload to GitHub, we will do this with the GUI. First, go to the GitHub homepage and create a new repository. Name it whatever you want, but make sure the Initialize this Repository with a README option checked:
Next upload all the project files without the node_modules directory.
Click commit and we are done. Your uploaded project files will appear on GitHub like so:
Now we can move on to setting up Heroku.
Heroku
Go to the Heroku dashboard, create a new app, and name it whatever you like.
Next, go to the Deploy tab and select GitHub under Deployment method:
If you haven't connected your GitHub account to your Heroku account yet, you will be prompted through the GitHub Auth flow.
After this, search for your project on GitHub and connect to it:
Finally, we can just deploy our app by clicking the Deploy Branch button:
Heroku will install all the Node modules for you automatically. You can view your project by clicking on the View button.
And that's it, we're done! Thanks for reading.
Connect with me on Twitter for more updates on future tutorials: https://twitter.com/iqbal125sf