Heroku: Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I have angular 6 app in my local machine , everything works perfectly as I want, after finishing the project I deployed it to heroku, when I run my app here is the link to the app in heroku :Testing App

as you can see I get the following error in console browser

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is my app structure in github

App repo in github

for quick reference , Here is server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000

app.use(express.static(path.join(__dirname, '/majeni/dist/majeni/')));

app.use(bodyParser.json());

app.use(cors());



 const forceSSL = function () {
  return function (req, res, next) {
    if (req.headers['x-forwarded-proto'] !== 'https') {
      return res.redirect(
        ['https://', req.get('Host'), req.url].join('')
      );
    }
    next();
  }}app.use(forceSSL());

app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname + '/majeni/dist/majeni/index.html'));
     });

 app.listen(port, () => {
  console.log('Server started on port '+port);
  });

Here is heroku logs.

2018-08-16T17:46:38.891333+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/majeni/dist/majeni/index.html'

What is wrong with my code?

Are you building the Angular app in your Heroku environment? How are you generating the dist directory? — user184994
No , cd agency and then cd majeni and then ng build as you can see the directory structure in github — The Dead Man
Right, but are you doing that in your Heroku environment? If you're only doing that on your local machine, then Heroku will not have a copy of that directory. There is no dist directory in your checked in code — user184994
Not in heroku environment just in a local machine after ng-build i run git push heroku master — The Dead Man
Your dist directory is in your .gitignore, so it's not being committed. The best option is to provide a postinstall script that builds your project devcenter.heroku.com/articles/… — user184994

user184994 user184994 · Accepted Answer · 2018-08-16T18:45:31

Heroku is failing to find the dist directory, because it is not part of your committed repository. The dist directory has been added to the .gitignore file.

It's generally a bad idea to commit the dist directory, so we should generate it on Heroku.

You can do this by adding a postinstall script in package.json

"scripts": {
  "postinstall": "ng build"
}

More info can be found in the Heroku docs

Heroku: Failed to load resource: the server responded with a status of 404 (Not Found)

1 Answers