sendFile() not sending ng build dist/index.html file when pushing to heroku

user_8182808 0
Viewed 920

EDIT: The only thing I changed to make it not work was changing the angular build outDir from ../dist to dist. Now I want the server to send the new location.

When I build my application using ng build and start the express server, everything works. After pushing it to Heroku however, the dist/index.html is not found. It works if I just send a string like: res.send('testing)' but when sending the index.html from dist it just says "Not Found".

I've been trying bunch of ways to declare the file path, this is the current code: `

//Set static folder
app.use(express.static(path.join(__dirname, 'angular-src/dist')));

//Index route
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'angular-src/dist/', 'index.html'));
})

`

I've also been trying with only dist and dist/index/html

Since it works on the local server, starting on specified port, it should work right?

It worked on heroku when I had the "dist"-folder in the same directory as the server.js file. Then I just put the folder name instead of the path to dist folder like angular-src/dist/.

Since I updated the angular-cli it's messier to make the outDir go outside of the angular project so I want it to go the "real" dist.

EDIT: Adding my whole server.js file below

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const config = require('./config/database');
const compression = require('compression');

//Connect to database
mongoose.connect(config.database);

//If connected to the database 
mongoose.connection.on('connected', () => {
    console.log("connected to db: " + config.database);
});
//IF there's problems with the connection to the database
mongoose.connection.on('error', (err) => {
    console.log("Db error: " + err);
});

const app = express();

const users = require('./routes/users');
const friends = require('./routes/friends');

const port = process.env.PORT || 8080;

//Cors middleware
app.use(cors());
app.use(compression);

//Set static folder
app.use(express.static(__dirname +'/dist'));

//Body parser middleware
app.use(bodyParser.json());

app.use('/users', users);
app.use('/friends', friends);

//Index route
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
})

//Start server
app.listen(port, () => {
    console.log("server started on port: "+ port);
});
angular express node.js heroku
1 Answers

Your server.js have to be something like below:

    const compression = require('compression');
    const path = require('path');
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8080;

    // Gzip
    app.use(compression());

    // Run the app by serving the static files in the dist directory
    app.use(express.static(__dirname + '/dist'));

    // Start the app by listening on the default Heroku port
    app.listen(port);

    // For all GET requests, send back index.html so that PathLocationStrategy can be used
    app.get('/*', function(req, res) {
      res.sendFile(path.join(__dirname + '/dist/index.html'));
    });

    console.log(`Server listening on ${port}`);
user_58707110
Related