How can I include css files using node express and ejs

Question

I m trying to follow the instructions to https   stackoverflow com a 18633827 2063561  but I still can t get my styles css to load    From app js  app use express static path join   dirname   public        In my  ejs  I have tried both of these lines   lt link rel  stylesheet  type  text css  href   css style css    gt   lt link rel  stylesheet  type  text css  href   public css style css    gt    Neither loads the css  I ve gone into the developer s console noticed the type is set to  text html  instead of  text css     My path looks like      app js   public      css          style css

User · Accepted Answer

Use this in your server js file  app use express static   dirname     public       and add css like   lt link rel  stylesheet  type  text css  href  css style css    gt    dont need   before css like    lt link rel  stylesheet  type  text css  href   css style css    gt

User · Answer

the order of registering routes is important   register 404 routes after static files  correct order  app use  quot  admin quot   admin        app use express static join   dirname   quot public quot       app use  req  res    gt      res status 404     res send  quot 404 quot         otherwise everything which is not in routes   like css files etc     will become 404

User · Answer

For NodeJS I would get the file name from the res url  write the header for the file by getting the extension of the file with path extname  create a read stream for the file  and pipe the response   const http   require  http    const fs   require  fs    const path   require  path    const port   process env PORT    3000   const server   http createServer  req  res    gt        let filePath   path join            dirname           public           req url            index html    req url             let extName   path extname filePath       let contentType    text html        switch  extName            case   css               contentType    text css               break          case   js               contentType    text javascript               break          case   json               contentType    application json               break          case   png               contentType    image png               break          case   jpg               contentType    image jpg               break             console log  File path    filePath         console log  Content-Type    contentType         res writeHead 200    Content-Type   contentType         const readStream   fs createReadStream filePath       readStream pipe res        server listen port   err    gt        if  err            console log  Error    err          else           console log  Server listening at port   port

User · Answer

The custom style sheets that we have are static pages in our local file system  In order for server to serve static files  we have to use   app use express static  public       where    public is a folder we have to create inside our root directory and it must have other folders like css  images   etc  The directory structure would look like      Then in your html file  refer to the style css as   lt link type  text css  href  css styles css  rel  stylesheet  gt

User · Answer

I have used the following steps to resolve this problem   create new folder   static  and move all js and css file into this folder  then add app use   static   express static  static    add css like  lt  link rel  stylesheet  type  text css  href   static style css    restart server to view impact after changes

User · Answer

Its simple if you are using express static   dirname    public   then don t forget to put a forward slash before public that is express static   dirname     public   or use express static  public   its also going to work   and don t change anything in CSS linking

User · Answer

1 Create a new folder named  public  if none exists       2 Create a new folder named  css  under the newly created  public  folder  3 create your css file under the public css path  4 On your html link css i e   lt link rel  stylesheet  type  text css    href   css style css  gt      note the href uses a slash    before and you do not need to include the  public   5 On your app js include    app use express static  public      Boom It  works

User · Answer

Use in your main  js file   app use   css  express static   dirname    css       use in you main  html file    lt link rel  stylesheet  type  text css  href  css style css    gt    The reason you getting an error because you are using a comma instead of a concat   after   dirname

User · Answer

IMHO answering this question with the use of ExpressJS is to give a superficial answer  I am going to answer the best I can with out the use of any frameworks or modules  The reason this question is often answerd with the use of a framework is becuase it takes away the requirment of understanding  Hypertext-Transfer-Protocall     The first thing that should be pointed out is that this is more a problem surrounding  Hypertext-Transfer-Protocol  than it is Javascript  When request are made the url is sent  aswell as the content-type that is expected   The second thing to understand is where request come from  Iitialy a person will request a HTML document  but depending on what is written inside the document  the document itsself might make requests of the server  such as  Images  stylesheets and more  This question refers to CSS so we will keep our focus there  In a  tag that links a CSS file to an HTML file there are 3 properties  rel  stylesheet  type  text css  and href  http   localhost      for this example we are going to focus on type and href  Type sends a request to the server that lets the server know it is requesting  text css   and  href  is telling it where the request is being made too    so with that pointed out we now know what information is being sent to the server now we can now seperate css request from html request on our serverside using a bit of javascript     var http   require  http    var url   require  url    var fs   require  fs            function onRequest request  response             if request headers accept split      0      text css                  console log  TRUE                  fs readFile  index css    err  data   gt                    response writeHeader 200    Content-Type    text css                      response write data                    response end                                          else               console log  FALSE                     fs readFile  index html   function err  data                   response writeHead 200    Content type    text html                     response write data                   response end                                           http createServer onRequest  listen 8888       console log   SERVER  - Started         Here is a quick sample of one way I might seperate request  Now remember this is a quick example that would typically be split accross severfiles  some of which would have functions as dependancys to others  but for the sack of  all in a nutshell  this is the best I could do  I tested it and it worked  Remember that index css and index html can be swapped with any html css files you want

User · Answer

Use this in your server js file    x000D   x000D  app use express static  public     x000D   x000D   x000D    without the directory     dirname   and then within your project folder create a new file and name it public then put all your static files inside it

User · Answer

In your app or server js file include this line  app use express static  public     In your index ejs  following line will help you   lt link rel  quot stylesheet quot  type  quot text css quot  href  quot  css style css quot    gt  I hope this helps  it did for me

User · Answer

The above responses half worked and I m not why they didn t on my machine but I had to do the following for it work    Created a directory at the root      public js   Paste this into your server js file with name matching the name of directory created above  Note adding  public as the first param     app use   public  express static  public      Finally in the HTML page to which to import the javascript file into       lt script src  public js bundle js  gt  lt  script gt

[css] How can I include css files using node, express, and ejs?

Examples related to css

Examples related to node.js

Examples related to express

Examples related to ejs