How to Deploy React + Express Application in Heroku?

Question

I have the folder structure like this :

Client // it holds react app
Node_modules
App.js // it is where server code is.
Package.json
Package-lock.json

I need to deploy it to heroku. Inside one of the file of react app. I have : It is the only file communicating with backend.

axios.post('http://localhost:5000/api/form' , data)
.then(()=>{
    console.log('message sent')
}).catch(err=>{
    console.log('failed');
})

Now in app.js ( backend file ) , i had :

const express = require('express') ;
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer') ;
const cors = require('cors');
const port = process.env.PORT || 5000 ;

const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));

app.post('/api/form' , (req , res)=>{
    //something
})

app.listen(port , ()=>{
    //something
})

So, what are the things i should change or add to deploy it in heroku.

Arjun · Accepted Answer · 2020-03-10 18:44:09Z

2

Okay there are couple of things you need to do:

lets assume , your app on heroku has name myapp, which results to https://myapp.herokuapp.com as root url

First modify your axios call to something like this:

    axios.post('http://myapp.herokuapp/api/form' , data)
    .then(()=>{
        console.log('message sent')
    }).catch(err=>{
        console.log('failed');
    })

and modify your package.json's script to reflect this:

 "build":"cd client and npm run build"

also mention engine:

"engines": {
"node": "10.x"}

answered Mar 10, 2020 at 18:44

Arjun

1531 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Deploy React + Express Application in Heroku?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related