Related
I've my site built on node + express, and trying to enable gzip compression using this tutorial but it didn't worked as shown in the tutorial. I can't see Content-Encoding in response header.
Here is my code.
const compression = require('compression');
const express = require("express");
const path = require("path");
var redirects = require('express-seo-redirects');
var proxy = require('express-http-proxy');
require('dotenv').config()
/**
* App Variables
*/
const app = express();
app.use(compression({ filter: shouldCompress, threshold: 0 }));
//app.use(compression()) - //I've also tried this.
function shouldCompress (req, res) {
if (req.headers['x-no-compression']) {
// don't compress responses with this request header
return false
}
// fallback to standard filter function
return compression.filter(req, res)
}
let setCache = function (req, res, next) {
// here you can define period in second, this one is 1 day
const period = 1 * 24 * 60 * 60 * 1000
// you only want to cache for GET requests
if (req.method == 'GET') {
res.set('Cache-control', `public, max-age=${period}`)
} else {
// for the other requests set strict no caching parameters
res.set('Cache-control', `no-store`)
}
// res.set('Content-Encoding', 'gzip')
// remember to call next() to pass on the request
next()
}
app.use(setCache)
And when I use res.set('Content-Encoding', 'gzip') inside app.get("/", (req, res) => { then it shows in response header but website stop working (not showing any error other than blank screen).
Bellow images are of my rest code.
Gzip compression was showing only for resource files (css, js etc..). So I resolved it by adding res.contentType('text/html'); in setCache function.
const exceptions = ['.js', '.css', '.ico', '.jpg', '.jpeg', '.png', '.gif', '.tiff', '.tif', '.bmp', '.svg', '.ttf', '.eot', '.woff', '.php', '.xml', '.xsl'];
let setCache = function (req, res, next) {
// here you can define period in second, this one is 5 minutes
const period = 1 * 24 * 60 * 60 * 1000;
if(!exceptions.some(v => req.url.includes(v))){
res.contentType('text/html');
}
// you only want to cache for GET requests
if (req.method == 'GET') {
res.set('Cache-control', `public, max-age=${period}`)
} else {
// for the other requests set strict no caching parameters
res.set('Cache-control', `no-store`)
}
// res.set('Content-Encoding', 'gzip')
// remember to call next() to pass on the request
next()
}
app.use(setCache)
I'm trying to add a subdomain to an existing node app using Express 3.0 and express-subdomain.
(I've added the subdomain to my hosts file and that's working fine.)
The current app has all the routes in a separate routes.js file in the same directory as the main file, and it's called like this:
var routes = require("./routes")
//other stuff
routes.routeList(app);
I've tried a bunch of different ways to use the
app.use(subdomain('test-developer', [router]));
syntax and I can't figure it out.
I've tried
var router = require("./routes.js");
app.use(subdomain('test-developer', router));
and I get an error like "The second parameter must be a function that handles fn(req, res, next) params."
here's some more of the code:
//the developerRoutes.js file
var express = require('express');
exports.developerRouteList = function(app) {
var devRouter = express.Router();
devRouter.get('/', function(req, res) {
res.send('hi!');
});
}
and from the main.js file:
var developerRoutes = require('./developerRoutes');
//...
var app = express();
app.use(subdomain('test-developer', developerRoutes.developerRouteList));
//force https with this:
app.enable('trust proxy');
app.configure(function() {
app.use(function (req, res, next){
var hostname = ( req.headers.host.match(/:/g) ) ? req.headers.host.slice( 0, req.headers.host.indexOf(":") ) : req.headers.host
console.log(hostname)
if ((hostname === 'localhost') || (hostname === 'test-developer.localhost') || req.secure) {
// request was via https, so do no special handling
next();
} else {
// request was via http, so redirect to https
res.redirect('https://' + req.headers.host + req.url);
}
});
app.use(express.bodyParser());
app.use(express.cookieParser('secret'));
app.use(function(req, res, next){
session = require("./routes/includes/session.js");
next();
});
app.use(express.static('./public'));
app.use(app.router);
});
app.engine('ejs', engine);
app.set('views',__dirname + '/views');
app.set('view engine', 'ejs');
multiLess.configure(__dirname + '/static/less/', parentDirectory + 'public/css/',['main.less'],0);
routes.routeList(app);
Any ideas on how to sort this out?
author of express-subdomain 👋
I've answered this question in a previous issue - see https://github.com/bmullan91/express-subdomain/issues/4. I should probably add that to the readme as there is still a few folk using v3.
Based on your posted code, I would try the following steps:
In developerRoutes.js, exports.developerRouteList = function(app) should be module.exports = devRouter, and it should be after var devRouter = express.Router(). Unless you're putting multiple routers in developerRoutes.js, you don't need to make a sub-object named developerRouteList within the module.exports object. Also, it doesn't look like you're using the app instance you pass in to developerRoutes.js so it should be okay to change this.
In main.js, now you can try app.use(subdomain('test-developer', developerRoutes));
i am facing the following issue:
(I am using node-client-sessions module)
I send an ajax request, through the browser, to my API : /api/request1
In my api.js I handle that request, calculate some stuff and write some results into the session like this.
router.post('/request1', function(req, response, next) {
// some wield calculations
req.session.calcData = { // some content };Â
// some other calculations
console.log(req.session.calcData); // logs the correct object
response.send('success');
}
After receiving the success on client side I send another api call like this for example: /api/request2
router.post('/request2', function(req, response, next) {
// here i want to use some of the results from the previous calculations which i stored in the calcData session.
console.log(req.session.calcData); // this logs undefined
}
Shouldn't req.session.calcData be available in both functions?
Enviroment Info
Express Framework 4.x
app.js :
...
var app = express();
...
var session = require('client-sessions');
...
app.use(session({
cookieName: 'session',
secret: 'random_string_goes_here',
duration: 30 * 60 * 9999999,
activeDuration: 5 * 60 * 1000,
}));
...
app.use('/api', api);
According to example at client-session, you must use req.csession and req.csflush();
var express = require('express');
var path = require('path')
var cs = require('client-session');
var clientSession = cs('mysecretkey');
var app = express();
app.use(clientSession.connect());
app.get('/', function(req, res){
var count = req.csession['count'];
if(!count) count = 1;
else count++;
req.csession['count'] = count;
//sync to cookie session equal to res.csflush(),make sure to call it before response
req.csflush();
res.send(count.toString());
});
app.listen(8124);
console.log('Server running at http://127.0.0.1:8124/');
By default, my browser caches webpages of my ExpressJS app.
This is causing a problem to my login system (users not logged in can open old cached pages of logged in users).
How do I disable this caching?
EDIT:
My app.js (main file):
var express = require('express');
var http = require('http');
var path = require('path');
var store = require('./routes/store');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3012);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', store.home);
app.post('/', store.home);
app.get('/addProblem', store.addProblem);
app.post('/addProblem', store.addProblem);
app.get('/problem', store.problem);
app.post('/problem', store.problem);
app.get('/problemList', store.problemList);
app.post('/problemList', store.problemList);
app.get('/main', store.main);
app.post('/main', store.main);
app.post('/login', store.login);
app.get('/login', store.login);
app.get('/createProblem', store.createProblem);
app.post('/createProblem', store.createProblem);
app.post('/register', store.register);
app.get('/register', store.register);
app.post('/evaluate', store.evaluate);
app.get('/evaluate', store.evaluate);
app.get('/logout', store.logout);
app.post('/logout', store.logout);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
There are two things to consider when dealing with cache in Express.js - ETag and Cache-Control headers.
ETag (MDN reference)
If you have dynamic content which does not benefit from ETags, it's best to disable it because it incurs small overhead with each request.
app.set('etag', false)
Cache-Control (MDN reference)
To completely disable cache, use the following header:
app.use((req, res, next) => {
res.set('Cache-Control', 'no-store')
next()
})
This header does not affect express.static() middleware. It handles cache in its own way.
nocache
Don't waste your time reinventing the wheel, use the nocache middleware instead. It has been here for 8 years (2023) and it is downloaded more than 1.5 million times per week. Having only 100 stars on github, this is actually one of those unsung heroes of the express ecosystem.
Install it
npm install --save nocache
Add it to you app:
const nocache = require('nocache');
app.use(nocache());
When installed as a middleware it sets four headers, disabling a lot of browser caching. This is the complete list of the updated headers.
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0
Surrogate-Control: no-store
Beware of ETag
Even if you are using nocache, the ETag header isn't removed, because it works in a different way. It's generated at the end of the request and could be another source of unintended caching. In order to handle it you have two choices.
app.set
The first is disabling it using express builtin app.set('etag', false); method.
on-headers
The second is removing the header just before it is sent to the client using the on-headers module:
const onHeaders = require('on-headers');
// install it as a middleware
app.use((req, res, next) => {
// listen for the headers event
onHeaders(res, () => {
this.removeHeader('ETag');
});
});
As pointed out in the comments this is actually a "ten-liner" package, but do you really want to copy and paste the same block of code on every express project? Or worse, publish another similar package? I don't think so and I'm sure your colleagues think the same too ;-)
app.disable('view cache');
^^ Code for ExpressJS
You can create a middleware, set headers in it so that there is no caching, and use in those route handlers that require authorization.
middleware cookies:
const cookie = async (req, res, next) => {
try {
const token = req.cookies.token;
const check = jwt.verify(token, process.env.JWT_SECRET);
const user = await User.findOne({_id: check._id, 'tokens.token': token});
if (!user) {
throw new Error();
}
req.token = token;
req.user = user;
res.set({
"Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
"Pragma": "no-cache",
"Expires": "0",
"Surrogate-Control": "no-store"
});
next();
} catch (e) {
res.set({
"Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
"Pragma": "no-cache",
"Expires": "0",
"Surrogate-Control": "no-store"
}).redirect(301, '/login');
}
};
used:
router.get('/all/tasks', cookie, async (req, res) => {
try {
const task = await Task.find({owner: req.user._id});
if (!task) {
return res.status(404).send();
}
res.status(200).render('tasks', {
title: 'Your task',
task: task
});
} catch {
res.status(500).send();
}
});
Ps: I took the headers from the nocashe library https://www.npmjs.com/package/nocache
I'm setting up the structure of a new project which will be built using Node.js and Express. I 'm using HTML5 Boilerplate for an optimal starting point. It comes with configuration files for multiple types of servers: Apache, Nginx, Node.js, etc. The following is the Node.js server configuration file provided by the HTML5 Boilerplate team:
/* h5bp server-configs project
*
* maintainer: #xonecas
* contributors: #niftylettuce
*
* NOTES:
* compression: use the compress middleware provided by connect 2.x to enable gzip/deflate compression
* http://www.senchalabs.org/connect/compress.html
*
* concatenation: use on of the following middlewares to enable automatic concatenation of static assets
* - https://github.com/mape/connect-assetmanager
* - https://github.com/TrevorBurnham/connect-assets
*/
var h5bp = module.exports,
_http = require('http'),
_parse = require('url').parse;
// send the IE=Edge and chrome=1 headers for IE browsers
// on html/htm requests.
h5bp.ieEdgeChromeFrameHeader = function () {
return function (req, res, next) {
var url = req.url,
ua = req.headers['user-agent'];
if (ua && ua.indexOf('MSIE') > -1 && /html?($|\?|#)/.test(url)) {
res.setHeader('X-UA-Compatible', 'IE=Edge,chrome=1');
}
next();
};
};
// block access to hidden files and directories.
h5bp.protectDotfiles = function () {
return function (req, res, next) {
var error;
if (/(^|\/)\./.test(req.url)) {
error = new Error(_http.STATUS_CODES[405]); // 405, not allowed
error.status = 405;
}
next(error);
};
};
// block access to backup and source files
h5bp.blockBackupFiles = function () {
return function (req, res, next) {
var error;
if (/\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~/.test(req.url)) {
error = new Error(_http.STATUS_CODES[405]); // 405, not allowed
error.status = 405;
}
next(error);
};
};
// Do we want to advertise what kind of server we're running?
h5bp.removePoweredBy = function () {
return function (req, res, next) {
res.removeHeader('X-Powered-By');
next();
};
};
// Enable CORS cross domain rules, more info at http://enble-cors.org/
h5bp.crossDomainRules = function () {
return function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With');
next();
};
};
// Suppress or force 'www' in the urls
// #param suppress = boolean
h5bp.suppressWww = function (suppress) {
return function (req, res, next) {
var url = req.url;
if (suppress && /^www\./.test(url)) {
res.statusCode = 302;
res.setHeader('Location', url.replace(/^www\./,''));
}
if (!suppress && !/^www\./.test(url)) {
res.statusCode = 302;
res.setHeader('Location', "www."+url);
}
next();
};
};
// Far expire headers
// use this when not using connect.static for your own expires/etag control
h5bp.expireHeaders = function (maxAge) {
return function (req, res, next) {
res.setHeader('Cache-Control', 'public, max-age='+ (maxAge));
next();
};
};
// Etag removal
// only use this is you are setting far expires for your files
// ** WARNING ** connect.static overrides this.
h5bp.removeEtag = function () {
return function (req, res, next) {
res.removeHeader('Last-Modified');
res.removeHeader('ETag');
next();
};
};
// set proper content type
// #param mime = reference to the mime module (https://github.com/bentomas/node-mime)
h5bp.setContentType = function (mime) {
return function (req, res, next) {
// I'm handling the dependency by having it passed as an argument
// we depend on the mime module to determine proper content types
// connect also has the same dependency for the static provider
// ** #TODO ** maybe connect/express expose this module somehow?
var path = _parse(req.url).pathname,
type = mime.lookup(path);
res.setHeader('Content-Type', type);
next();
};
};
// return a express/connect server with the default middlewares.
// #param serverConstructor = express/connect server instance
// #param options = {
// root: 'path/to/public/files',
// maxAge: integer, time in miliseconds ex: 1000 * 60 * 60 * 24 * 30 = 30 days,
// mime: reference to the mime module ex: require('mime')
// }
// Depends:
// express or connect server
// mime module [optional]
h5bp.server = function (serverConstructor, options) {
var server = serverConstructor.createServer(),
stack = [
this.suppressWww(true),
this.protectDotfiles(),
this.blockBackupFiles(),
this.crossDomainRules(),
this.ieEdgeChromeFrameHeader()
//,this.expireHeaders(options.maxAge),
// this.removeEtag(),
// this.setContentType(require('mime'))
];
// express/connect
if (server.use) {
stack.unshift(serverConstructor.logger('dev'));
stack.push(
//serverConstructor.compress(), // express doesn't seem to expose this middleware
serverConstructor['static'](options.root, { maxAge: options.maxAge }), // static is a reserved
serverConstructor.favicon(options.root, { maxAge: options.maxAge }),
serverConstructor.errorHandler({
stack: true,
message: true,
dump: true
})
);
for (var i = 0, len = stack.length; i < len; ++i) server.use(stack[i]);
} else {
server.on('request', function (req, res) {
var newStack = stack,
func;
(function next (err) {
if (err) {
throw err;
return;
} else {
func = newStack.shift();
if (func) func(req, res, next);
return;
}
})();
});
}
return server;
};
My question is this: how exactly do I go about integrating this with Express? The section of code that specifically confuses me is the bottom portion:
// return a express/connect server with the default middlewares.
// #param serverConstructor = express/connect server instance
// #param options = {
// root: 'path/to/public/files',
// maxAge: integer, time in miliseconds ex: 1000 * 60 * 60 * 24 * 30 = 30 days,
// mime: reference to the mime module ex: require('mime')
// }
// Depends:
// express or connect server
// mime module [optional]
h5bp.server = function (serverConstructor, options) {
var server = serverConstructor.createServer(),
stack = [
this.suppressWww(true),
this.protectDotfiles(),
this.blockBackupFiles(),
this.crossDomainRules(),
this.ieEdgeChromeFrameHeader()
//,this.expireHeaders(options.maxAge),
// this.removeEtag(),
// this.setContentType(require('mime'))
];
// express/connect
if (server.use) {
stack.unshift(serverConstructor.logger('dev'));
stack.push(
//serverConstructor.compress(), // express doesn't seem to expose this middleware
serverConstructor['static'](options.root, { maxAge: options.maxAge }), // static is a reserved
serverConstructor.favicon(options.root, { maxAge: options.maxAge }),
serverConstructor.errorHandler({
stack: true,
message: true,
dump: true
})
);
for (var i = 0, len = stack.length; i < len; ++i) server.use(stack[i]);
} else {
server.on('request', function (req, res) {
var newStack = stack,
func;
(function next (err) {
if (err) {
throw err;
return;
} else {
func = newStack.shift();
if (func) func(req, res, next);
return;
}
})();
});
}
return server;
};
My JavaScript isn't exactly at a beginners level but I wouldn't say I'm advanced either. This code is beyond me. Any pointers as to what I can read, watch, or do, to learn what I'm obviously missing here would be appreciated.
Most of the file is made up of a series of functions that generate middleware for frameworks, like Express, that conform to Connect's middleware specification. The second code listing is designed to create an HTTP server that uses all these functions. From what I can tell, it looks like you're supposed to pass in whatever you would normally call createServer on, and h5bp will do the creation and setup for you. For example, if you would normally do:
var express = require('express');
var server = express.createServer();
You would instead pass express to h5bp.server, which calls createServer on whatever you pass in right off the bat:
var express = require('express');
var server = h5bp.server(express, options);
After a bit of setup, it checks to see if the server has a function called use (the line is if (server.use)), and if so uses it to inject all the middleware it set up into the server. If it doesn't, then it assumes you're using a raw Node.js HTTP server, and sets up the necessary code to pass the request through each of the items in stack manually (this is what Connect/Express does for you).
It's worth noting that, in Express 3 (currently in release candidate stage), the applications created by Express no longer inherit from Node's HTTP server, so you don't call createServer on express; instead, you should just call express() and then pass the results of that into http.createServer. (See "Application function" at Migrating from 2.x to 3.x on the Express wiki for more information.) This means that this script is not compatible with the latest version of Express.
[update]
If you take a look at the test directory on GitHub, you can see an example app:
var express = require('express'),
h5bp = require('../node.js'),
server = h5bp.server(express, {
root: __dirname,
maxAge: 1000 * 60 * 60 * 30
});
server.listen(8080);
console.log('ok');
There was a major update of h5bp for node.js.
You can use it as an express middleware now.
The repository has moved here : https://github.com/h5bp/node-server-config.
From the documentation:
var express = require('express'),
h5bp = require('h5bp');
var app = express();
// ...
app.use(h5bp({ root: __dirname + '/public' }));
app.use(express.compress());
app.use(express.static(__dirname + '/public'));
// ...
app.listen(3000);