An easy way to prepend your CDN urls to your HTML and CSS files. It can be integrated into any existing workflow, and customized to meet the needs of your project. Use the CLI tool for quick use or use the API to implement programmatically.
cdnex will take an input of either a file path or a string, prepend a given url to all urls in the source that are not pointing to an external source (ex. anything that starts with http://, https://, or //), and will output either a new file (if a file was supplied as the source), or the processed string. Take the following HTML as an example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/app.css">
</head>
<body>
<img src="/img/logo.png" class="logo">
<script src="https://ajax.googleapis.com/.../jquery.min.js"></script>
<script src="/app.js"></script>
</body>
</html>
If the above file is specified as the input with a CDN url of https://cdn.mysite.com, the output would look like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.mysite.com/app.css">
</head>
<body>
<img src="https://cdn.mysite.com/img/logo.png" class="logo">
<script src="https://ajax.googleapis.com/.../jquery.min.js"></script>
<script src="https://cdn.mysite.com/app.js"></script>
</body>
</html>
cdnex is built handle HTML and CSS files by default, but it can be used with any kind of input string.
# to use the cli #
npm install cdnex -g
# to use the api #
npm install cdnex --save
If installed globally, cdnex will be in your system path.
$ cdnex src/index.html --output dist/index.html --url https://mycdn.com
# you can also specify directories #
$ cdnex src -o dist -u https://mycdn.com
# specify pattern and additional extensions #
$ cdnex src -o dist -p "**/*.html" -e "pdf,docx" -u https://mycdn.com
# specify a regex ignore pattern #
$ cdnex src -o dist -u https://mycdn.com -i "\/img\/"
# help #
$ cdnex --help
You can also use cdnex programmatically.
Returns a promise resolving with a boolean if an output path is specified, or with the rendered string if no output path is specified.
options
input - Input path of your file(s). Can be a directory or a single file.
Type:
string
src - An input string to parse. Note this is different from input, as that is a path to read from, and this is the actual content.
Type:
string
output - Output path for your rendered file(s). If no output is supplied, the result will be sent to the result of the promise.
Type:
string
url - The CDN url to use when rendering.
Type:
string
validate - Whether to make sure CDN url is a valid url.
Type:
boolean
Default:false
force - Whether to force overwriting any existing files. You will be prompted to overwrite if this is set to false.
Type:
boolean
Default:false
pattern - A glob-style pattern of the files to include when searching a directory. Relative to your input path.
Type:
string
Default:**/*.{html,css}
ignore - A string or array of regex url(s) to ignore when prepending the CDN url. (Note: this is for the urls in your files, not the files themselves. Use pattern for that).
Type:
string or array
extensions - An array of any extra extensions that extend from the defaults.
Type:
array
onlyExtensions - An array of extensions that will overwrite the defaults.
Type:
array
quiet - Whether to hold back from all output except errors.
Type:
boolean
Default:false
/* with ES5 */
var cdnex = require('cdnex')
/* with ES6 */
import { render } from 'cdnex'
/* using an input and output directory */
cdnex.render({
input: 'src',
output: 'dist',
url: 'https://mycdn.com',
})
/* using a src instead of a path */
cdnex.render({
src: fs.readFileSync('index.html', 'utf8'),
output: 'dist/index.html',
url: 'https://mycdn.com',
})
/* if no output is specified, get output in promise result */
cdnex.render({
src: fs.readFileSync('index.html', 'utf8'),
url: 'https://mycdn.com',
}).then(function(rendered) {
console.log(rendered)
}).catch(function(err) {
console.log(err)
})
/* only replace .css and .js files in your HTML */
cdnex.render({
...
pattern: '**/*.html',
onlyExtensions: ['.css', '.js'],
})
/* add .pdf extension to the default extensions */
cdnex.render({
...
extensions: ['.pdf']
})
By default, cdnex will prepend the CDN url to all internal paths with the following extensions: .html, .css, .js, .png, .jpg, .jpeg, .gif, .svg, .woff, .woff2, .eot, .ttf, .otf, .mp4, .webm, .ogg, .mp3, .wav. To add additional extensions, use the extensions option. To replace this list with a new list, use the onlyExtensions option.
FAQs
Prepend cdn urls to your html and css
We found that cdnex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.
Security News
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
Security News
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.