CODEWITHSUNDEEP
htmlcssnode.js
user7438259
user7438259

Reputation: 143

Include CSS and JS files in Node.js

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);

Upvotes: 11

Views: 29273

Answers (4)

MasterpieceKODZ
MasterpieceKODZ

Reputation: 1

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'));

Upvotes: 0

Sagar
Sagar

Reputation: 1424

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

Upvotes: 1

Krishna Jangid
Krishna Jangid

Reputation: 5410

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

enter image description here

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

Upvotes: 9

Lalit Dashora
Lalit Dashora

Reputation: 485

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!

Upvotes: 9

Related Questions