riotvan riotvan - 9 days ago 6
Javascript Question

Express Router render and public static files

I have the following code in

index.js
:

var express = require('express');
var app = express();
var PORT = 3000;
var routes = require('./scripts/routes/routes');

app.set('views', './views');

app.set('view engine', 'pug');

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

app.use('/', routes);

app.listen(PORT, function() {
console.log('App running');
});


In my
routes.js
:

var express = require('express');
var router = express.Router();
var request = require('request');

router.get('/', function (req, res) {
request('https://www.reddit.com/r/earthporn.json', function(error, response, body) {
if (!error && response.statusCode == 200) {
var data = JSON.parse(body);
var items = data['data']['children'];
var urls = items.map(function(item) {
item_data = item['data'];
item_preview = item_data['preview'];
item_images = item_preview['images'];
return item_images.map(function(image) {
return image['source']['url'];
});
});

res.render('index', { subReddit: 'earthporn', images: urls });
}
});
});

router.get('/subreddit/:subreddit', function (req, res) {
var subreddit = '/r/' + req.params['subreddit'];
request('https://www.reddit.com'+ subreddit +'.json', function(error, response, body) {
if (!error && response.statusCode == 200) {
var data = JSON.parse(body);
var items = data['data']['children'];
var urls = items.map(function(item) {
item_data = item['data'];
item_preview = item_data['preview'];
item_images = item_preview['images'];
return item_images.map(function(image) {
return image['source']['url'];
});
});

res.render('index', { subReddit: subreddit, images: urls });
}
});
});

module.exports = router;


In my
views/index.pug
:

html
head
link(href='app.css' rel="stylesheet")
title Hello World!
body
div(class="container")
h1= subReddit

div(class="images_gird")
each url in images
div(class="image", style="background-image: url('"+ url +"')")


In my browser, if I access
localhost:3000
, everything works correctly, I see a list of images from the subreddit
earthporn
.

However, if I access
localhost:3000/subreddit/cute
, for example, I get this in the logs:

express:router dispatching GET /subreddit/cute +2s
express:router query : /subreddit/cute +1ms
express:router expressInit : /subreddit/cute +1ms
express:router serveStatic : /subreddit/cute +0ms
express:router router : /subreddit/cute +5ms
express:router dispatching GET /subreddit/cute +0ms
express:view lookup "index.pug" +4s
express:view stat ".../views/index.pug" +0ms
express:view render ".../views/index.pug" +0ms
express:router dispatching GET /subreddit/app.css +83ms !! <<--- Why is this happening?
express:router query : /subreddit/app.css +0ms
express:router expressInit : /subreddit/app.css +1ms
express:router serveStatic : /subreddit/app.css +0ms
express:router router : /subreddit/app.css +0ms
express:router dispatching GET /subreddit/app.css +1ms


This is preventing me from rendering the images of the subreddit that the user enters in the URL. I don't know why on earth is express receiving a request with
subreddit/app.css
, doesn't make any sense.

In the network tab, in Chrome, when I enter
localhost:3000/subreddit/cute
I do see two requests:

GET http://localhost:3000/subreddit/cute

And right after
GET http://localhost:3000/subreddit/app.css


So maybe this is a problem in chrome, I really don't understand. For the request
localhost:3000
, everything works fine and just one request made.

AM0 AM0
Answer

This line

express:router dispatching GET /subreddit/app.css +83ms

is trying to request https://www.reddit.com'+ app.css +'.json' which is wrong so it is taking so long.

In index.pug try putting full url for app.css