How to add static file(css, images, js etc..) to our node js application?

Question

This is my project folder structure:

XYZ_PROJECT_FOLDER

  ASSETS
    CSS
    IMAGES
    JS
    VENDOR

  CONTACT.html
  INDEX.html
  INDEX.js

And this is the code inside the INDEX.js file to render all the static files and other routing code:


    const express = require("express");
    const nodemailer = require("nodemailer");
    const multiparty = require("multiparty");
    require("dotenv").config();
    
    
    const app = express();
    
    app.use(express.static('assets'));
    
    app.route("/").get(function (req,res){
        res.sendFile(process.cwd()+"/index.html")
    })
    
    app.route("/contact").get(function (req,res){
        res.sendFile(process.cwd()+"/contact-form.html")
    })
    
    const PORT = process.env.PORT || 5000;
    app.listen(PORT, () => {
      console.log(`Listening on port ${PORT}...`);
    });

Whenever I run the command "node INDEX.js" it works all fine but it is not rendering any css, image, or js scripts any leads would be appreciated.

Lawrence Cherone · Accepted Answer · 2023-02-12 13:25:57Z

1

You can have Express serve static files to resolve this. Here's an example:

app.use(express.static(path.join(__dirname, 'client', 'build')));

edited Feb 12, 2023 at 13:25

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

answered Feb 12, 2023 at 13:10

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

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

Comments

Shivam Kumar · Accepted Answer · 2023-02-12 13:20:00Z

-1

Hey so the issue was in the HTML code I was using the whole path i.e. assets/css/style.css instead of using /css/style.css

changed the path in HTML and it worked.

answered Feb 12, 2023 at 13:20

Shivam Kumar

1251 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to add static file(css, images, js etc..) to our node js application?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related