So today I try to deploy my React project to Heroku as usual. I had got 1 hour to show my customer. Then suddenly deploy failed.
When I read the logs I see the error FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory. I inspect the dyno and graphs. Memory goes up to 700mb but my limit was 500mb. I figured out that Heroku command starts the development phase of my project.
The solution was simple. I install the Express server and create a single file server.js and run the building part from there.
Do not add PORT to your environment variables from the Heroku control panel. Heroku assigns the value automatically.
const express = require("express");
const path = require("path");
const port = process.env.PORT || 3000;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
app.listen(port);
And also edited my package.json start script (also Heroku use this command to start app) to run server.js like this.
"scripts": {
"start": "node server.js",
"dev": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
},
This works perfectly and deployed successfully.
