Heroku：无法加载资源：服务器以状态404（未找到）响应

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)

1. Here is my app structure in github

App repo in github

2. 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); }); 

3. 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?

Answer 1

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