web application shows blank page after deployment on heroku?

Question

I create web app using reactjs, nodejs and postgres and its working fine on localhost, then I deployed it on heroku and it builds successfully but when I open it using heroku link it returns me blank page and When I see in browser console I see some errors, error is common and repeat 10 times. Errors are

Error in console displays in image

My project structure is:

Rootfolder/
/client
      /build
      /static
          /css
          /js
      /node_modules
      /public
      /src
         /css
            myform.css
            hrcss.css
      /component (this folder contains all my reactjs that is fronent files)
   /routes
   package.json
   Server.js

index.html(client/build/)

React App

package.json (from root directory)

{
  "name": "backend",
  "version": "1.0.0",
  "engines": {
    "npm": "6.x",
    "node": "12.18.2"
  },
  "main": "index.js",
  "start": "node Server.js",
  "heroku-postbuild": "cd client && npm install && npm run build",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "npm run start --prefix client",
    "server": "nodemon Server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "start": "node Server.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "jquery": "^3.5.1",
    "pg": "^8.3.0",
    "pg-hstore": "^2.3.3",
    "restify": "^8.5.1",
    "restify-cors-middleware2": "^2.1.0",
    "sequelize": "^6.3.3",
    "sequelize-cli": "^6.2.0",
    "serve-static-restify": "^3.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/path.git"
  },
  "keywords": [],
  "bugs": {
    "url": "https://github.com/path"
  },
  "homepage": "https://github.com/path",
  "description": ""
}

Server.js

var restify=require('restify')
const { logIn,userCreation, demotable } = require('./routes/Function');
const corsMiddleware = require('restify-cors-middleware2');
const { data } = require('jquery');
const PORT=process.env.PORT || 8080;
var path=require('path')
var serveStatic = require('serve-static-restify')
var server=restify.createServer() //server created

server.use(
    function crossOrigin(req,res,next){
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
      res.setHeader('Access-Control-Allow-Credentials', true); // If needed
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      return next();
    }
  );
const cors = corsMiddleware({
  preflightMaxAge: 5, //Optional
  origins: ['*'],
  allowHeaders: ['*'],
  exposeHeaders: ['*']
})

server.pre(cors.preflight)
server.use(cors.actual)

console.log(__dirname);
console.log(path.join(__dirname, "client/build"));
server.post('/', userCreation);  
server.use(restify.plugins.bodyParser());
server.get('/login',logIn)
server.get('/employees',demotable)


if(process.env.NODE_ENV==='production')
{
  server.get("*", restify.plugins.serveStatic({
    directory: __dirname+"/client/build",
    default: 'index.html',
    appendRequestPath: false
   })
  );
}
server.listen(PORT, function(){
    console.log("server started...")

})

And heroku logs doesnot show any errors but it shows status 404 for all files which gives error in browser console. heroku log sample

2020-08-10T17:38:57.167522+00:00 heroku[router]: at=info method=GET path="/static/css/main.a8c455be.chunk.css" host=deployableema.herokuapp.com request_id=82757ef5-eeff-4640-b435-0414e90c2f80 fwd="157.47.17.61" dyno=web.1 connect=1ms service=4ms status=404 bytes=700 protocol=https

user_129086 · Answer

404 is the error code for "file not found", and in your case, those CSS and JS files aren't being found because the hashed CSS and JS filenames produced by your webpack config for production builds do not match the filenames that your HTML file requests.

Try building in production mode on your local machine. This will help you debug the issue.

web application shows blank page after deployment on heroku?

1 Answers