CODEWITHSUNDEEP
node.jsexpressstatic-files
CodyBugstein
CodyBugstein

Reputation: 23352

Local files with relative paths are not loading in NodeJS Express app

I'm trying to build an app in Express and Node.js. My server files are contained in the app folder and the frontend stuff is in the public folder.

My file structure is like:

my_project
|- app
|     |-(server stuff)
|     |- ....
|- public
|     |- modules
|     |     |- core
|     |     |     |- index.html
|     |     |     |- style
|     |     |     |     |style.css
|     |     |     |     |sidebar.css
|     |     |     |- img
|     |     |     |     |- faceicon.png
|     |     |     |     |- main.png
|     |     |     |- js
|     |     |     |     |main.js
|     |     |     |     |sidebar.js
|     |     |- articles
|     |     |     |- ....

The problem is that in my index.html file, when I reference a file like 

<link href="style/style.css" rel="stylesheet">

or in my style.css like

background: url(../img/faceicon.jpg) no-repeat bottom center scroll;

The expected result doesn't show on the screen, and I get console messages like

GET http://localhost:3000/img/faceicon.png 500 (Internal Server Error)

How do I fix this?

Upvotes: 3

Views: 4469

Answers (1)

NarendraSoni
NarendraSoni

Reputation: 2258

express.static middleware is based on serve-static, and is responsible for serving the static assets of an Express application.

How it works:

  • Serve static content for the app from the "public" directory in the application directory

    // GET /style.css etc

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

  • Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static"

    // GET /static/style.css etc.

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

  • Serve static files from multiple directories, but give precedence to "./public" over the others

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

    app.use(express.static(__dirname + '/files'));

    app.use(express.static(__dirname + '/uploads'));

Upvotes: 3

Related Questions