Using CSS with Express

Question

I am trying to get my CSS links to work on my localhost. Right now the Index.html will show in plain text on my server. None of the styling included. Tried the express middleware, but it's still not serving the file. I get a 404 for the CSS files. Below is my code:

App.js:

app.set('view engine', 'html');
app.engine('html', hbs.__express);


app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'Public')));

Index.html:

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" media="all" href="/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="/switchery.min.css">
<script type="text/javascript" src="/switchery.min.js"></script>
</head>

//EDIT//

I was setting up the argument for path.join incorrectly. Thanks for all of the answers. Greatly appreciated. Below is the code that worked:

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

try: app.use(express.static(__dirname + '/Public')); ? and of course make sure your styles.css is inside the /Public/ directory. — TheIronDeveloper
– TheIronDeveloper, Commented Jan 18, 2015 at 1:57
@mscdex the layout of my public folder includes three files: styles.css, switchery.min.css, switchery.min.js. — Nathan Bernard
– Nathan Bernard, Commented Jan 18, 2015 at 17:48

MaximeF · Accepted Answer · 2015-01-18 15:02:46Z

2

Rename your folder public and not Public. Don't use capital for folders.

And change for app.use(express.static(__dirname + '/public'));

answered Jan 18, 2015 at 15:02

MaximeF

5,4635 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brandon Anzaldi Over a year ago

Using path.join() is the proper convention in this case. It will normalize paths across systems.

MaximeF Over a year ago

Yes you have reason :)

Brandon Anzaldi · Accepted Answer · 2015-01-18 15:11:23Z

0

As MaximeF said, it's a good practice to use lower-case, or camelCase for folder names. However, ensure that your public directory is properly structured. If your CSS is within a folder inside of public, for example, public/css/styles.css, to use that style in your browser, you need to include the full path relative to public. In that case, it'd be <link rel="stylesheet" href="/css/styles.css" type="text/css">.

answered Jan 18, 2015 at 15:11

Brandon Anzaldi

7,3103 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Using CSS with Express

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related