express js blank root page

Question

I have simple vue js app with next express js config file

var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);
app.use(express.static('.'));
server.listen(1111);

Result of build is located in /dist folder. However my express js file is located in /

After I run it I see blank page on localhost:1111 and actually it retrieves index.html from / but, I see my app on localhost:1111/dist and it retrieves index.html from /dist

My purpose is to receive index.html from /dist when I visit localhost:1111 .

I've tried to change express config to app.use(express.static('./dist')) and similar to this. But it only breaks anything (i'm not able to reach my app on localhost:1111/dist and localhost:1111/ )

In general I have next project structure

/ -> express js config is here and basic index.html is here

/dist -> build result is located here (index.html + static files)

/dist/static -> static files are here

/build -> webpack config is here

Answer 1

The problem why app.use(express.static('dist')); didn't work was that in index.html I had link to other files like /dist/static/.. what is not correct if my root folder is dist . So, despite moderator set that webpack doesn't related to this the solution was to change webpack config for production to make build script generate links to file in /dist/index.html like /static/.. instead of /dist/static/..

And obviously I had to change

app.use(express.static('.'));

to

app.use(express.static('dist'));

As a conclusion - it make sense to check generated index.html and analyze if the paths there are correct.

Answer 2

Sometimes this issue may come because of, the app doesn't server from the root folder. For example, /home/user/path-to-the-project" The app need to serve like this.

So here you need to change like below,

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

For more information, you check express doc. See here