npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gdn/gulp-cloudfront

v0.1.1

Published

> Updates the Default Root Object of a CloudFront distribution

Downloads

6

Readme

CircleCI

Updates the Default Root Object of a CloudFront distribution

Purpose

Content distribution networks like CloudFront let you cache static assets in Edge Locations for extended periods of time. A problem occurs however when you go to release a new version of your website, you will have to explictly tell CloudFront to expire each file or you will have to wait for the TTL to expire. In the case of CloudFront, you will need to invalidate items or wait for the cache TTL to expire before vistors of your website will see the vew version.

A solution to this problem is adding a revisioned suffix to the filename for each static asset. The gulp plugin gulp-rev-all can assist in this process. eg. unicorn.css => unicorn-098f6bcd.css You can then use gulp-s3 to upload the revisioned files to a S3 bucket which CloudFront points to.

Finally gulp-cloudfront comes in during the final step, to update a CloudFront distributions' Default Root Object to the latest revisioned index.html. Updating the Default Root Object only takes 5-10 minutes and all new visitors to your website will no longer see the old cached content. A much better solution than waiting for cached items to expire or invalidating individual files which costs $$.

You can in essence host multiple versions of your website under the same static host and if you need to revert to an older version you need only change the index.html file.

Under the Hood

This plugin will identify the index.html file based on the default or configured pattern. Once identified it will update the CloudFront distribution to the new index file.

Install

Install with npm

npm install --save-dev @gdn/gulp-cloudfront

Example

var gulp = require('gulp');
var revall = require('gulp-rev-all');
var awspublish = require('gulp-awspublish');
var cloudfront = require("@gdn/gulp-cloudfront");

var aws = {
    "key": "AKIAI3Z7CUAFHG53DMJA",
    "secret": "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",
    "bucket": "bucket-name",
    "region": "us-standard",
    "distributionId": "E1SYAKGEMSK3OD"
};

var publisher = awspublish.create(aws);
var headers = {'Cache-Control': 'max-age=315360000, no-transform, public'};

gulp.task('default', function () {
    gulp.src('dist/**')
        .pipe(revall())
        .pipe(awspublish.gzip())
        .pipe(publisher.publish(headers))
        .pipe(publisher.cache())
        .pipe(awspublish.reporter())
        .pipe(cloudfront(aws));
});

API

options.patternIndex

Type: Regular Expression Default: /^\/index\.[a-f0-9]{8}\.html(\.gz)*$/gi

Specify the pattern used to match the default root object


var aws = {
    ..,
    "patternIndex": /^\/root\-[a-f0-9]{4}\.html(\.gz)*$/gi
};

License

MIT © Joshua Bellamy-Henn