Express-js can t GET my static files why

Question

I ve reduced my code to the simplest express-js app I could make   var express   require  express        app   express createServer    app use express static   dirname     styles     app listen 3001     My directory look like this   static file js  styles   default css   Yet when I access http   localhost 3001 styles default css I get the following error   Cannot GET   styles   default css   I m using express 2 3 3 and node 0 4 7  What am I doing wrong

User · Accepted Answer

Try http   localhost 3001 default css   To have  styles in your request URL  use   app use   styles   express static   dirname     styles       Look at the examples on this page     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

User · Answer

Webpack makes things awkward As a supplement to all the other already existing solutions  First things first  If you base the paths of your files and directories on the cwd  current working directory   things should work as usual  as the cwd is the folder where you were when you started node  or npm start  yarn run etc   However    If you are using webpack    dirname behavior will be very different  depending on your node   dirname settings  and your webpack version   In Webpack v4  the default behavior for   dirname is just    as documented here   In this case  you usually want to add this to your config which makes it act like the default in v5  that is   filename and   dirname now behave as-is but for the output file  module exports                  node            generate actual output file information         see  https   webpack js org configuration node  node  filename        dirname  false         filename  false            This has also been discussed here    In Webpack v5  per the documentation here  the default is already for   filename and   dirname to behave as-is but for the output file  thereby achieving the same result as the config change for v4   Example For example  let s say   you want to add the static public folder it is located next to your output  usually dist  folder  and you have no sub-folders in dist  it s probably going to look like this  const ServerRoot   path resolve   dirname     dist                   app use express static path join ServerRoot   public      important  again  this is independent of where your source file is  only looks at where your output files are   More advanced Webpack scenarios Things get more complicated if you have multiple entry points in different output directories  as the   dirname for the same file might be different for output file  that is each file in entry   depending on the location of the output file that this source file was merged into  and what s worse  the same source file might be merged into multiple different output files  You probably want to avoid this kind of scenario scenario  or  if you cannot avoid it  use Webpack to manage and infuse the correct paths for you  possibly via the DefinePlugin or the EnvironmentPlugin

User · Answer

Try accessing it with http   localhost 3001 default css      app use express static   dirname     styles       You are actually giving it the name of folder i e  styles not your suburl

User · Answer

The problem with serving   dirname is that   dirname returns the path of the current file  not the project s file  Also  if you use a dynamic header  each page will look for the static files in a different path and it won t work  The best  for me  is to substitute   dirname for process cwd   which ALWAYS donates the path to the project file  app use express static process cwd       public      And in your project  link rel  quot stylesheet quot  href  quot  styles default css quot   See  What  39 s the difference between process cwd   vs   dirname

User · Answer

I am using Bootstrap CSS  JS and Fonts in my application  I created a folder called asset in root directory of the app and place all these folder inside it  Then in server file added following line   app use   asset  express static  asset       This line enables me to load the files that are in the asset directory from the  asset path prefix like  http   localhost 3000 asset css bootstrap min css   Now in the views I can simply include CSS and JS like below    lt link href   asset css bootstrap min css  rel  stylesheet  gt

User · Answer

if your setup  myApp           public                        stylesheets                                   style css                        img                                   logo png           app js   then  put in app js   app use   static   express static  public       and refer to your style css   in some  pug file    link rel  stylesheet   href   static stylesheets style css

User · Answer

to serve static files  css images js files just two steps    pass the directory of css files to built in middleware express static  var express   require  express    var app   express      public is folder in my project directory contains three folders css image js      css    gt folder contains css file   image  gt folder contains images   js     gt folder contains javascript files app use express static   public css      to access css files or images just type in url http   localhost port filename css ex http   localhost 8081 bootstrap css   note  to link css files to html just type lt link href  file name css  rel  stylesheet  gt    if i write this code   var express   require  express    var app   express    app use   css  express static   public css       to access the static files just type in url localhost port css filename css ex http   localhost 8081 css bootstrap css  note to link css files with html just add the following line   lt link href  css file name css  rel  stylesheet  gt

User · Answer

Create a  folder   with     public   name in   Nodejs  project folder  Put  index html file into of Nodejs project folder  Put  all    script  and   css   file  into    public  folder  Use app use  express static  public     and  in  index html      correct   path  of  scripts  to  lt script type  text javascript  src   javasrc example js  gt  lt  script gt    And  Now all things work fine

User · Answer

This work for me   app use    css  express static  public css     app use    js  express static  public js     app use    images  express static  public images

User · Answer

this one worked for me  app use express static path join   dirname   public       app use   img  express static path join   dirname   public images       app use   shopping-cart javascripts  express static path join   dirname   public javascripts       app use   shopping-cart stylesheets  express static path join   dirname   public stylesheets       app use   user stylesheets  express static path join   dirname   public stylesheets       app use   user javascripts  express static path join   dirname   public javascripts

User · Answer

In addition to above  make sure the static file path begins with     ex     assets css     to serve static files in any directory above the main directory   main

User · Answer

static directory  check the above image static directory  for dir structure  const publicDirectoryPath   path join   dirname     public   app use express static publicDirectoryPath         or  app use      express static publicDirectoryPath   app use  req  res  next    gt    res sendFile path join publicDirectoryPath  index html

User · Answer

I have the same problem  I have resolved the problem with following code   app use   img  express static path join   dirname   public images      app use   js  express static path join   dirname   public javascripts      app use   css  express static path join   dirname   public stylesheets        Static request example   http   pruebaexpress lite c9 io js socket io js   I need a more simple solution  Does it exist

User · Answer

What worked for me is   Instead of writing  app use express static   dirname    public images     in your app js  Simply write  app use express static  public images      i e  remove the root directory name in the path  And then you can use the static path effectively in other js files  For example     lt img src   images misc background jpg  gt    Hope this helps

User · Answer

i just try this code and working const exp   require  express    const app   exp     app use exp static  quot public quot      and working  before  not working    const express   require  express    const app   express    app use express static  quot public quot      just try

User · Answer

default css should be available at http   localhost 3001 default css  The styles in app use express static   dirname     styles     just tells express to look in the styles directory for a static file to serve  It doesn t  confusingly  then form part of the path it is available on

User · Answer

I find my css file and  add a route to it   app get   css MyCSS css   function req  res     res sendFile   dirname     public css MyCSS css          Then it seems to work

User · Answer

In your server js    var express         require  express    var app             express    app use express static   dirname     public       You have declared express and app separately  create a folder named  public  or as you like  and yet you can access to these folder  In your template src  you have added the relative path from  public  or the name of your folder destiny to static files   Beware of the bars on the routes

[node.js] Express-js can't GET my static files, why?

Examples related to node.js

Examples related to express