How to include static files in html using node.js

Question

This is not a question about express.static()

I have a application where I need to serve multiple pages which have same js and css dependencies. Hence, writing css and js includes using <script> or <link> tags on every single page is bad practice.

I am looking for a look alike php include way to do it. As php would process all php code and send compiled html, I think same could be done with js on node server.

So a server would do kinda like below:

get html from a resources.html
push above html to index.html
send index.html

Or perhaps there could be other way around. Any idea?

Why don't you include it in your index.html?

Demnogonis
– Demnogonis

2016-06-07 08:22:58 +00:00
Commented Jun 7, 2016 at 8:22 — Demnogonis
– Demnogonis, Commented Jun 7, 2016 at 8:22

MrWillihog · Accepted Answer · 2016-06-07 08:24:08Z

1

You can use layouts with your chosen template engine and each view can extend that layout. For example, if you're using Jade as your template engine.

index.js

var express = require("express");
var app = express();
var port = process.env.PORT || 7080;

app.set('view engine', 'jade'); 

app.get('/', function (req, res) {
  res.render('home');
});

app.listen(3000);

views/layout.jade

doctype html
html
  head
    script(src='/javascripts/home.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
    block title
      title= "My Website"
  body
    .container
      block content

views/home.jade

extends ./layout.jade

block content
  h1 Hello World!

The home.jade view extends the layout and overrides the content block. Visiting http://localhost:3000/ returns the following:

<!DOCTYPE html>
<html>
  <head>
    <script src="/javascripts/home.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title>My Website</title>
  </head>
  <body>
    <div class="container"><h1>Hello World!</h1></div>
  </body>
</html>

answered Jun 7, 2016 at 8:24

MrWillihog

2,67620 silver badges17 bronze badges

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

3 Comments

Uday Hiwarale Over a year ago

I got the concept of template engines but it make simple things more complicated. Thanks for the answer btw. :)

MrWillihog Over a year ago

Unfortunately, Node doesn't work like PHP so I think this is your best bet. I'd be interested if someone has an alternative.

Uday Hiwarale Over a year ago

Yeah unfortunately. I am using express which provide sendFile option but doesn't allow to modify file on fly before sending it. But I find ejs little better above all template engines for this functionality only.

Gaurav joshi · Accepted Answer · 2016-06-07 08:32:16Z

Make a public folder in your root directory

then in main app.js/server.js

add the following line :-

`var express    = require('express'),
bodyParser = require('body-parser'),
userRoutes = require('./routes/user'),
mongoose = require('mongoose');
var app = express();
mongoose.connect('mongodb://localhost/meanDemo');
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true
}));
app.use(express.static('public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', userRoutes);
app.get('/',function(req, res){
 res.render('userlist');
});
app.listen(3000);
console.log("sever started at 3000");

`

Then in views use /*filename to / will be your public directory

Collectives™ on Stack Overflow

How to include static files in html using node.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related