0
votes

So I'm making a simple Express.JS web app. I have some assets in /public (for example, public/images/main-back.png ). In index.scss I do:

background-image: url('../../../images/main-back.png');

And in Chrome console I get an error:

GET http://localhost:3000/images/main-back.png net::ERR_CONNECTION_REFUSED

When I refresh the page several times, this request may pass one time and the image will show on the page.

The configuration is more or less default, I have the default bin/www file. It listens on port 3000:

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);

The app has pre-configured assets serving by default. in app.js I have:

app.use(express.static(path.join(__dirname, 'public')));

The question is - why is it not working?

UPD: In the default project which was created by Express generator, there is

app.use(express.static(path.join(__dirname, 'public')));

in app.js. I added app.use(sassMiddleware) before this app.use, and this leaded to the bug I'm talking about. But when I place the app.use(sassMiddleware) after the

app.use(express.static(path.join(__dirname, 'public')));

Then the css files don't update on scss file change. What should I do?

1
What do you want to render?kedar sedai

1 Answers

3
votes

So I found a solution. I think this may be helpful for others. In the default project which was created by Express generator, the

app.use(express.static(path.join(__dirname, 'public')));

in app.js was not the first "app.use(...)" in the file. Place it on top of all the other "app.use(...)" and everything will be fine. Have a good day!