CODEWITHSUNDEEP
reactjsheroku
Brian Bui
Brian Bui

Reputation: 123

Deploying Only React to Heroku

I am new to react / web development in general and I was wondering if you could deploy React just by itself to Heroku. Is NodeJS necessary to deploy? I used npx create-react-app and it worked locally but when trying to deploy the default creation to Heroku I run into the error:

2020-06-27T07:20:18.595194+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-retreat-92346.herokuapp.com request_id=3f99711a-9c2f-4257-9845-c7f0f137ebe8 fwd="73.189.100.93" dyno= connect= service= status=503 bytes= protocol=https

In addition, are there any guides out there that talk about the overview of deployment and how React + Node + webpacks work together. I am having trouble understanding the how everything is connecting.

Upvotes: 0

Views: 361

Answers (1)

Anku Singh
Anku Singh

Reputation: 954

You need to have node in order to deploy react here are the steps to combine node, and react and deploy on heroku

Step 1: Create node.js server using express and in your server main file for example app.js write some necessary code like below

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

 //Below code is to point to your react build folder which you will keep inside server folder inside client folder

 let root = path.join(__dirname, 'client/build/')
 app.use(express.static(root))
 
 //this is the routing which will redirect your server url to react build file
 app.get("*",(req,res)=>{
    res.sendFile(path.join(__dirname, '/client/build/index.html'));
 })

 app.listen(process.env.PORT || 8080);

Step 2: Create client folder inside server folder where your app.js file exist and place your build folder created by react inside client folder

Step 3: Deploy it to heroku using git push heroku master after pointing your correct repository on git or bitbucket or gitlab after deploying your react app will run on this server url

Upvotes: 1

Related Questions