Include CSS and JS files in Node.js

Question

I am learning how to use Node.js but I'm stuck. I am unable to load css and js files in my project. I am loading Bootstrap and Fontawesome from a CDN and they're rendering fine. As for my own custom css and js, they are not loading at all.

My folder file path:

folder
index.html
app.js
package.json
css
main.css
files
file.pdf

app.js:

 var http = require('http');
     var fs = require('fs');

 //creating server
 http.createServer(function (req, res) {
   fs.readFile('index.html', function (err, html) {
     res.writeHead(200, { 'Content-Type': 'text/html' });
     res.write(html);
     res.end();

   });
 }).listen(8080);

You might want to consider using expressjs. It makes it really easy to serve up static files and use nodejs for custom server side code as well. expressjs.com/en/starter/static-files.html — jrasm91
– jrasm91, Commented May 21, 2018 at 1:49
If you are looking to use Node.js with CSS and JS on the client side I would suggest using Angular, which makes things like this much easier in my opinion. Anything you want to serve up you can simply include in your app's folder. Try this sudo npm install -g @angular/cli then create a new folder and type ng new myApp && cd myApp && ng-serve -o. Now find your src/app/index.html file and hack away! — Hunter Frazier
– Hunter Frazier, Commented May 21, 2018 at 3:18

Lalit Dashora · Accepted Answer · 2018-05-21 05:04:15Z

9

I would suggest you create a public directory where you should keep all your javascript, CSS, images etc.

Now in app.js file, you can add this code to make all these files available anywhere in your node.js project.

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

Don't forget to include path and express in your header like this:

var express = require('express');
var path = require('path');

Now you can use your CSS/JS files wherever you want like this.

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

Here style.css is your custom CSS file. Hope this way works fine to you.

HTH Thanks!

answered May 21, 2018 at 5:04

Lalit Dashora

4855 silver badges16 bronze badges

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

Comments

Krishna Jangid · Accepted Answer · 2020-02-10 06:12:36Z

9

if your assets directory(css,js,fonts directory) on the root like below

then use this code

in app.js

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

and in .html file import css like that

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

if your assets are under another any parent folder like that

public/assets/css/style.css

then just replace / with public/assets folder like below

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

and the <link> tag will remain same

answered Feb 10, 2020 at 6:12

Krishna Jangid

5,5066 gold badges33 silver badges37 bronze badges

Comments

Sagar · Accepted Answer · 2020-08-24 08:37:11Z

1

There are various packages available to ease handling and creating the server. Like Express, Connect etc.

But if you prefer plain node.js I would suggest looking at below links.

https://gist.github.com/ryanflorence/701407

http://www.tutorialsteacher.com/nodejs/serving-static-files-in-nodejs

To summarize :

var express = require('express');
var app = express();

//setting middleware
app.use(express.static(__dirname + 'public')); //Serves resources from public folder

edited Aug 24, 2020 at 8:37

answered May 21, 2018 at 3:48

Sagar

1,42412 silver badges20 bronze badges

Comments

MasterpieceKODZ · Accepted Answer · 2023-04-08 03:24:05Z

0

This might sound impractical but one way to achieve this without express.js is to create different server port dedicated to serving each src or href attr in your html template with their required data i.e creating a new http server for each data request and each server runs on a unique port and then set the absolute uri to of the appropriate port to each src of href attr, each port reads and supplys data from a different file. I think dis is working analogy of express.js

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

answered Apr 8, 2023 at 3:24

MasterpieceKODZ

12 bronze badges

Collectives™ on Stack Overflow

Include CSS and JS files in Node.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related