在 Node.js 中包含 CSS 和 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);

Answer 1

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!

Answer 2

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

Answer 3

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