I'm creating my first Node app using Express and Pug (former Jade). Everything is working fine, except getting my css files running on the browser. (Error 404: GET http://localhost:3000/css/syles.css)

Project structure:

server.js
views
    bag.pug
public
    css
      styles.css

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');

// Set views path
app.set('views', path.join(__dirname, 'views'));
// Set public path
app.use(express.static(path.join(__dirname, 'public')));
// Set pug as view engine
app.set('view engine', 'pug');

// Player's index
app.get('/player', (req, res) => {
    res.render('player', {
        title: 'PLAYER Dashboard'
    });
});

// Player's bag
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, {
              error: e
            });
        });
});

// Start server
app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});

bag.pug

doctype html
html
    head
        meta(charset='UTF-8')
        title #{title}
        link(rel='stylesheet', href='/css/syles.css')

I'm creating my first Node app using Express and Pug (former Jade). Everything is working fine, except getting my css files running on the browser. (Error 404: GET http://localhost:3000/css/syles.css)

Project structure:

server.js
views
    bag.pug
public
    css
      styles.css

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');

// Set views path
app.set('views', path.join(__dirname, 'views'));
// Set public path
app.use(express.static(path.join(__dirname, 'public')));
// Set pug as view engine
app.set('view engine', 'pug');

// Player's index
app.get('/player', (req, res) => {
    res.render('player', {
        title: 'PLAYER Dashboard'
    });
});

// Player's bag
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, {
              error: e
            });
        });
});

// Start server
app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});

bag.pug

doctype html
html
    head
        meta(charset='UTF-8')
        title #{title}
        link(rel='stylesheet', href='/css/syles.css')

• javascript
• css
• node.js
• express
• pug

Share Improve this question Follow asked Dec 9, 2016 at 1:03 nipnip 1,70711 gold badge1212 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have a typo: syles instead styles

doctype html
html
    head
        meta(charset='UTF-8')
        title #{title}
        link(rel='stylesheet', href='/css/styles.css')