CODEWITHSUNDEEP
reactjstypescriptexpress
gpbaculio
gpbaculio

Reputation: 5968

Express+Typescript+React: Error: ENOENT: no such file or directory, stat '/app/frontend/build/index.html'?

i have this express server in ts and this is the converted js, code:

class App {
    constructor() {
        this.app = express();
        ...
        this.config();
        ...
    }
    config() {
        if (process.env.NODE_ENV === 'production') {
            // Serve any static files
            this.app.use(express.static(path.join(__dirname, '../../frontend/build')));
            // Handle React routing, return all requests to React app
            this.app.get('*', (req, res) => {
                res.sendFile(path.join(__dirname, '../../frontend/build', 'index.html'));
            });
        }
    }
}
exports.default = new App().app;

but I am getting this error on heroku:

Error: ENOENT: no such file or directory, stat '/app/frontend/build/index.html'

I have checked the directories on heroku bash and build is there, and this is not my first time deploying app, but this time it is typescript, I'm used to to javascript and I am thinking maybe this is different? I am 100% certain the folder is properly targeted on config(). Help?

Upvotes: 2

Views: 2647

Answers (1)

Dan
Dan

Reputation: 5070

TypeScript does not copy files that it does not actively compile to the destination directory, such as assets and template files.

I suspect that index.html was not copied to the output directory from where your code resolves the absolute path for res.sendFile(...).

You might want to move those files into a separate directory that is untouched by the TypeScript compilation process. Alternatively, implement a gulp or grunt task that recursively copies all non-JavaScript, non-JSON and non-TypeScript files over to your TypeScript output folder so that all relative paths resolve correctly.

This thread might help you: Angular 2 + Typescript compiler copy html and css files

Upvotes: 1

Related Questions