Deploy a React + Node app to Heroku in 3 minutes without the command line


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 obvious things like generating the React and Express apps we will have no choice but to use the command line, but we will use the GUI unless there is no other way.

I will also assume you have a Github and Heroku(duh!) account. They are both free so no worries about signing up.

project code:

https://github.com/iqbal125/react-express-heroku

React and Express Setup

First let’s start by creating 2 directories the Server and the Client.

The Client directory will hold the contents of our create-react-app command and Server will hold the contents of our express command.

We will also need express generator installed globally. This library just creates a simple express app for us automatically similar to create-react-app. You can do so with the command.

npm install -g express-generator

After this, simply run these commands on each of the respective directories to install the starter projects.

npx create-react-app app1 on Client directory

express on Server directory

change into 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 know 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.

And we can now actually test this.

Just run npm start on the Server directory. And open up the browser to http://localhost 3000. You should be seeing 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. Go to the Github homepage and create a new repository, name it whatever you want and have 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 go on to the Heroku setup

Heroku

Go to the Heroku dashboard and create a new app and name it whatever you like.

Next go to the Deploy tab and select Github under Deployment method.

If you havent connected your Github account to your Heroku account 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.

Heroku will install all the node_modules for you automatically. And you can view your project by clicking on the View button.

And thats it we’re done! Thanks for Reading.  

Connect with me on Twitter for more updates on future tutorials: https://twitter.com/iqbal125sf





Source link