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 🙏

© 2021 – Pkg Stats / Ryan Hefner

@designsystemsinternational/static

v3.3.10

Published

A simple, opinionated command-line tool to deploy a static website to S3 and Cloudfront with Cloudformation

Downloads

98

Readme

Static

This is a simple, opinionated command-line client that takes the pain out of deploying a static website to S3 and CloudFront via CloudFormation. We use this at Design Systems International for deploying our websites.

Features:

  • Creation of resources via CloudFormation. The tool will create an S3 bucket and CloudFront distribution with healthy defaults such a CORS and HTTPS to serve your static website.
  • Basic auth. Optionally hide the website behind basic authentication using a Lambda Edge function attached to the CloudFront distribution. This can be set per environment, and is automatically provisioned.
  • Custom domain. Optionally attach a custom domain to the CloudFront distribution. You must have a hosted zone ID in Route53 to take advantage of this functionality.
  • Multiple environments. Deploy different versions of the website based on Git branches. This allows you to e.g. have a staging and production environment for the same website.
  • File metadata. Easily customize the cache-control header for specific file types, or any other metadata supported by S3.
  • AWS profiles. Use a named profile in your AWS credentials file, or just use the AWS environment variables to authenticate with an AWS account.

Setup

Make sure to globally install the command line tool.

$ npm install -g @designsystemsinternational/static

You need to run the init command once inside your project folder to create a config file.

$ cd myproject
$ static init

Deploying

To upload a website, run the deploy command. If this is the first time you are running the command on this Git branch, static will prompt a number of questions about the new environment, and a new CloudFormation stack with the needed resources will be created based on the answers.

$ static deploy

You can optionally run the command with a --env parameter to ignore the Git branch name and set the environment name directly. This is helpful for e.g. GitHub actions or other CI servers that return null for the git branch command.

$ static deploy --env somename

If you at any time want to reconfigure the environment, run the command with the --configure parameter to rerun the deployment prompts.

$ static deploy --configure

Configuration file

The static configuration file resides inside package.json and will automatically be created when running static init and updated after creating an environment with static deploy. It has the following keys, many of whom will be pre-populated by static when running init or deploy.

  • profile - Name of the AWS profile in the AWS credentials file to use
  • region - Region where the CloudFormation stacks will be created
  • buildDir - Name of the folder where the build files of the website are located
  • shouldRunBuildCommand - A boolean indicating whether static should run a build command during static deploy
  • buildCommand - The command to run to generate the website files
  • environments - An object with environment-specific settings
    • stack - Name of the CloudFormation stack to use for this environment
    • bucket - Name of the S3 bucket to use for this environment
    • fileParams - An array of objects that defines extra metadata for the uploaded files. This can be used to control the cache, content type, or any other parameter allowed by S3. See below.

File params

When deploying the website, the fileParams setting can be used to control certain S3 metadata for the files in this environment. The default fileParams array makes sure that .html and .json files have a faster cache expiration than other files (which are expected to be fingerprinted).

{
  "static": {
    "environments": {
      "production": {
        "fileParams": [
          {
            "match": ["**/*.(html|json)"],
            "params": {
              "CacheControl": "public, max-age=300"
            }
          },
          {
            "match": ["!**/*.(html|json)"],
            "params": {
              "CacheControl": "public, max-age=31536000, immutable"
            }
          }
        ]
      }
    }
  }
}

Every file will be matched against the .match attribute, and the first item in the array that matches will add its .params to the S3 putObject call when uploading the file.

Commands

  • static init. Initialize a new project.
  • static deploy. Deploy a distribution, creating it if needed.
  • static destroy. Delete all resources and environment config.
  • static show. Shows the CloudFormation outputs for the current environment.
  • static --help. Shows available commands and other documentation.