express js blank root page - express

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