Reputation: 143
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
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
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
Reputation: 5410
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
Upvotes: 9
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