0

Am having a single Git repository where it contains both client and server. This is my Webpack.config.js

const path = require("path");

module.exports = {
    devServer: {
        contentBase: path.resolve(__dirname, "./src"),
        historyApiFallback: true
    },
    entry: path.resolve(__dirname, "./src/index.js"),
    module:{
        rules: [
            {
                test: /\.js$/,
                use:"babel-loader"
            },
            {
                test: /\.css$/,
                use:['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        filename: "bundle.js"
    }

}

So when I run npm run Build Its creating a single file bundle.js. I placed bundle.js in the server static folder

app.get('/',(req,res)=>{
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
    console.log('welcome')  
    res.send(req.sessionID)
})

in index.html

<html>
    <body>
        hello
        <script src='./bundle.js'></script>
    </body>
</html>

if i try to start the node server. i cant see my browser serving the bundle.js am getting the below error

 Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200

If this is not the right approach, can anybody suggest a better so that i can deploy both my client and server code in heroku.

Hariwarshan
  • 303
  • 3
  • 14

2 Answers2

0

Considering your directory structure (DS) wasn't provided, the DS (in a MERN stack app) I find gives the least issues when deploying to Heroku is the following:

App (root)
|
|
+---client
|   |
|   +---src
|   +---...
|   +---package.json (react)
|
+---models
+---routes
+---package.json (node)
+---Procfile
+---server.js

Your package.json (node) scripts should look something like this (keeping other custom scripts):

"scripts": {
  "start": "nodemon server.js",
  "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
}

Procfile should be:

web: node server.js

The package.json (react) scripts should stay relatively unchanged:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

}

I understand that you have customized a Webpack.config.js, bundle.js, and index.html, and that your app functionality has a particularly defined implementation - for purposes of providing insight and potentially helping you reach a resolve, here's what has worked and what continues to work for me...

In the server.js:

app.use("/", routes);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "/client/build")));

  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}

Notice that I'm declaring the use of my routes above, which has worked for me.

Hope this guides you...

csarmiento
  • 71
  • 1
  • 2
-1

you can deploy them to separate Heroku dynos to deploy two apps.

More information regarding this is present in this Deploy two separate heroku apps from same git repo

Note: It is always a good option to serve JS files from your API server after building React files.

asfandyar24
  • 78
  • 2
  • 8
  • 1
    1. You absolutely can deploy completely unrelated non-web programs simultaneously as one program, [see here](https://stackoverflow.com/questions/62529869/run-two-programs-off-the-same-procfile/62531358#62531358) - 2. It is possible to deploy a web client and web server simultaneously as one app on Heroku, [see here](https://stackoverflow.com/questions/61497258/how-to-run-two-servers-in-heroku/61499366#61499366) – Tin Nguyen Jun 25 '20 at 07:01