How to deploy react with express to heroku

Question

I setup a reactjs and express environment from scratch. I ditched the webpack-dev-server and just use webpack --watch for the npm start it's working fine it reads the changes. I can receive my react data to my express server without errors. But how would i deploy this to heroku? I am new to back-end and this is my first time using react with a backend. I hope you can help me thank you..

package.json

{
  "name": "react-scratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  },
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "mongodb": "^3.0.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.17.1",
    "path": "^0.12.7",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11",
    "webpack-dev-server": "^3.1.1"
  }
}

webpack.config.js

module.exports = {
    entry: [
            './src/index.js'
        ],
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }

        ]
    },
    resolve: {
       extensions: ['*', '.js', '.jsx']
     }
}

Server

app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
})

Folder Structure

-dist
 - bundle.js
 - index.html
-node_modules
-server
 -server.js
-src
 -index.js
 -App.js

Have you read the manual here devcenter.heroku.com/articles/deploying-nodejs — Simon Franzen
– Simon Franzen, Commented Mar 11, 2018 at 18:44
@Aaqib i am using git repo i tried to follow heroku guide but i get application error — JEEZSUSCRIZE
– JEEZSUSCRIZE, Commented Mar 12, 2018 at 4:40

Theo Itzaris · Accepted Answer · 2018-05-25 12:43:21Z

Hi i m new to Heroku too,
i spent two days reading and trying to deploy a full-stack application, consisting of 'reacjs + expressjs + nodejs + mongodb'. I see that you also use expressjs, so you might later need a db also. :)

Things are little complicated as many tools need to be sync in order to work all together.

Quick answer:

Heroku has a detailed but long documentation about that and also provides an example Node application, ready to download it locally, check the code, and deploy it to Heroku, and see it live.

Here (https://elements.heroku.com/buttons/mongolab/hello-mongoose)

How i deal with all the full-stack lifecycle.

Below are my steps on how i succeeded Heroku deploy(fetch some data from backend to the client).

link '/': https://damp-brook-72767.herokuapp.com/
link '/users': https://damp-brook-72767.herokuapp.com/users
link '/products': https://damp-brook-72767.herokuapp.com/products

Create express skeleton with 'express-generator'
$ express shop. Creates a simple expressjs app.
Inside the express i create some routes.
Create the reactjs app with 'create-react-app'
$ create-react-app client. I run this command into the /shop folder
$ npm run eject. Eject the hidden folders 'scripts' & 'config'
Create the Heroku application either with Heroku CLI or from Heroku.com
Create a free account on mlab.com.
As soon we create a new db, we get the connection string, e.g. mongodb://<dbuser>:<dbpassword>@ds133630.mlab.com:33630/db
Dont run locally, $ npm run start, because there will be a CORS issue with the server 'https://damp-brook-72767.herokuapp.com'. I havent solve that yet.
Since everything is in place.
1. Check first NOT to be any errors, when execute '$ npm run build' locally.
2. Commit any changes to 'master' branch
3. Push to Heroku master
4. Cross our fingers and open the webpage on Heroku.
That's it, except if i forgot something. I have my test project, also, on github.

Here (https://github.com/tornado1979/fullstack-shop)

Hope this helps, good luck.

Collectives™ on Stack Overflow

How to deploy react with express to heroku

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related