Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
electricity
Advanced tools
An alternative to the built-in Express middleware for serving static files. Electricity follows a number of best practices for making web pages fast.
An alternative to the built-in Express middleware for serving static files. Electricity follows a number of best practices for making web pages fast.
The built-in Express middleware for serving static files is great if you need basic support for serving static files. But if you want to follow Best Practices for Speeding Up Your Web Site you need something that can concat, gzip, and minify your static files. Electricity does all this and more without the need to create a complicated build process using Grunt or a similar build tool.
Typically, in an Express app you'd serve static files using the built-in middleware. Like this:
const express = require('express');
app.use(express.static('public'));
To begin using Electricity simply replace the default static middleware:
const express = require('express');
const electricity = require('electricity');
app.use(electricity.static('public'));
A common best practice for serving static files is to set a far future Expires
header: http://developer.yahoo.com/performance/rules.html#expires
When you set a far future Expires
header you have to change the file name whenever the contents of the file change.
Electricity makes this easy for you by automatically adding an MD5 hash of the file's contents to the file name.
You have access to this file name using a view helper method that builds URLs for you.
If you're using EJS it looks something like this:
<img src="<%= electricity.url('/images/image.png') %>" />
<link href="<%= electricity.url('/styles/style.css') %>" rel="stylesheet" />
<script src="<%= electricity.url('/scripts/script.js') %>"></script>
Which ultimately gets rendered as something like this:
<img src="/images/image-423251d722a53966eb9368c65bfd14b39649105d.png" />
<link href="/styles/style-22a53914b39649105d66eb9368c65b423251d7fd.css" rel="stylesheet" />
<script src="/scripts/script-5d66eb9368c22a53914b39d7fd6491065b423251.js"></script>
Electricity comes with a variety of features to help make your web pages fast without the need to setup a complicated build process.
Cache-Control
, ETag
, and Expires
, headers to help avoid unnecessary HTTP requests on subsequent page views.Default options look like this:
const options = {
babel: {},
hashify: true,
headers: {},
hostname: '',
sass: {},
snockets: {},
uglifyjs: {
enabled: true
},
uglifycss: {
enabled: true
}
};
You can override the default options to look something like this:
var options = {
babel: { // Object passed straight to @babel/core options: https://babeljs.io/docs/en/options
generatorOpts: {
compact: true
},
parserOpts: {
errorRecovery: true
}
},
hashify: false, // Do not generate hashes for URLs
headers: { // Any additional headers you want a specify
'Access-Control-Allow-Origin': 'https://example.com'
},
hostname: 'cdn.example.com', // CDN hostname
sass: { // Object passed straight to node-sass options
outputStyle: 'compressed',
quietDeps: true
},
snockets: { // Object passed straight to snockets options: https://www.npmjs.com/package/snockets
},
uglifyjs: { // Object passed straight to uglify-js options: https://github.com/mishoo/UglifyJS#minify-options
enabled: false // Do not minify Javascript
},
uglifycss: { // Object passed straight to uglifycss options: https://github.com/fmarcia/uglifycss
enabled: false // Do not minify CSS
}
};
Pass options to the middleware like this:
app.use(electricity.static('public', options));
Electricity sets proper Cache-Control
, ETag
, and Expires
headers to help avoid unnecessary HTTP requests on subsequent page views. If you'd like to specify literal values for specific HTTP headers you can set them in the headers
option. This is useful if you need to specify a Access-Control-Allow-Origin
header when loading fonts or JSON data off a CDN.
app.use(electricity.static('public', {
headers: { 'Access-Control-Allow-Origin': '*' }
}));
Electricity will automatically rewrite URIs in CSS to use SHA1 hashes (if a matching file is found). For example:
background-image: url(/background.png);
becomes this to allow caching and avoid unnecessary redirects:
background-image: url(/background-423251d722a53966eb9368c65bfd14b39649105d.png);
If you specify a hostname like this:
const express = require('express');
const electricity = require('electricity');
const options = {
hostname: 'cdn.example.com'
};
app.use(electricity.static('public'), options);
Then render URLs using the view helper like this:
<img src="<%= electricity.url('/images/image.png') %>" />
<link href="<%= electricity.url('/styles/style.css') %>" rel="stylesheet" />
<script src="<%= electricity.url('/scripts/script.js') %>"></script>
Your HTML will ultimately get rendered using absolute URLs like this:
<img src="https://cdn.example.com/images/image-423251d722a53966eb9368c65bfd14b39649105d.png" />
<link href="https://cdn.example.com/styles/style-22a53914b39649105d66eb9368c65b423251d7fd.css" rel="stylesheet" />
<script src="http://cdn.example.com/scripts/script-5d66eb9368c22a53914b39d7fd6491065b423251.js"></script>
FAQs
An alternative to the built-in Express middleware for serving static files. Electricity follows a number of best practices for making web pages fast.
The npm package electricity receives a total of 80 weekly downloads. As such, electricity popularity was classified as not popular.
We found that electricity demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.