The code snippet below is found in my index.js file:
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 file:
var express = require('express');
var router = express.Router();
var request = require('request');
router.get('/', function (req, res) {
// rest of the code...
});
router.get('/subreddit/:subreddit', function (req, res) {
// rest of the code...
});
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 +"')")
If I access localhost:3000 in my browser, everything functions correctly and displays a list of images from the subreddit earthporn.
But when I try to access localhost:3000/subreddit/cute, there seems to be an issue with the request for app.css. The logs indicate this unexpected behavior.
Upon inspecting the network tab in Chrome, I notice two sequential requests being made - first for
http://localhost:3000/subreddit/cutehttp://localhost:3000/subreddit/app.cssThis peculiar behavior only occurs when accessing specific subreddits through the URL. I believe it might be related to how Chrome handles requests, as everything works fine when accessing the base URL localhost:3000.