How to use React.js with backend using React Hooks and how to deploy it using heroku?

Question

I want to connect the React front-end framework with my backend express.js and EJS so using React Hooks. But in express, we use app.get() when a request is made to our server while we use npm start with React to start our server on the localhost. How to connect them both, what is the proper and exact way and what knowledge I need to grasp and then how to deploy them using Heroku??

Answer 1

• Step 1: Create an Express Server

In the root of your project, create a new folder called “server” (for example), and inside of it, add a file called “server.js”.

The tool that I used to create the server is called Express, which is a great tool for creating web servers with Node. There are dozens of tutorials on the web which you can go through in order to learn this tool, but in our case, you just need to write a few lines of code in order to generate your own server.

So let’s begin!

1. Install the latest version of Express.

npm install express --save

2. Import Express, and create a new instance of Express.

const express = require('express');
const app = express();

3. Tell Express to serve up the public folder and everything inside of it.

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));

Basically, we pass in all of the pieces of the path, and path.join puts them together. The result is then passed into app.use(express.static()), so Express will know which files to serve.

4. Start the server by telling it which port to use. I am using port 3000 on my local environment; however, Heroku will assign a port for your app after deploying it, so both cases should be covered.

const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));
app.listen(port, () => {
   console.log(`Server is up on port ${port}!`);
});

5. Make sure your index.html file is served, in case the user requests a resource currently not in the public folder.

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
   res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
   console.log('Server is up!');
});

At this point, if everything went well, you should be able to test your server locally to make sure everything was set up correctly. Then you can move on to actually deploying on Heroku.

In order to do that, you just need to create your production build by running npm run build. Then go to your terminal and run node server/server.js, which should boot up your server, making your app available to use at http://localhost:3000.

• Step 2: Deploy on Heroku

1. In case you don’t have a Heroku account already, create one here.
2. Again, if you don’t have this already, install heroku-cli. More details on that here.
3. Go to your terminal, and log in to Heroku by running heroku login and entering your credentials when prompted.
4. Create your Heroku application by running the following command in the terminal (and, of course, replacing my-app with the name of your own app).

heroku create my-app

At this point, you should have two Git remotes for your app: the original one and the one that was created by Heroku. In order to check this, just run git remote.

5. When Heroku starts your application, it is going to try to run the start script in your package.json. Therefore, this script should be changed to:

"start": "node server/server.js"

6. Push your code to the Heroku remote repository.

git push heroku master

And that’s it! Your React app should now be deployed to Heroku!

You can open it directly from the terminal by running heroku open.