I'm currently working on my first Node application using Express and Pug (formerly Jade). Everything seems to be functioning smoothly, except for getting my CSS files to load in the browser. (I keep receiving a "404 Error: GET" when trying to access http://localhost:3000/css/syles.css)
Here is an outline of my project structure:
server.js
views
bag.pug
public
css
styles.css
This is a snippet from my server.js file:
const pug = require('pug');
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const inv = require('./api/pogoni/inventory');
// Specify views path
app.set('views', path.join(__dirname, 'views'));
// Specify public path
app.use(express.static(path.join(__dirname, 'public')));
// Set pug as the view engine
app.set('view engine', 'pug');
// Player index route
app.get('/player', (req, res) => {
res.render('player', {
title: 'PLAYER Dashboard'
});
});
// Player's bag route
app.get('/bag', (req, res) => {
inv.getInventory()
.then((inventory) => {
if(!inventory) {
throw new Error('Unable to fetch inventory.');
}
res.render('bag', {
title: 'PLAYER bag',
inventory
});
})
.catch((e) => {
res.status(500).json({
error: e.message
});
});
});
// Start the server
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
The content of the bag.pug file:
doctype html
html
head
meta(charset='UTF-8')
title #{title}
link(rel='stylesheet', href='/css/syles.css')