FEDE: @twreporter/static-fe-deployer

A tool for deploying twreporter/static-fe-boilerplate projects to GCS

Environment

Node

• 6.0.0 above

Project Files

• The project directory structure should have:
  • a dist folder contains .html and .js files bundled by Webpack
  • a static folder contains any other static files

project-directory
├── dist
├── static

IMPORTANT

The name of <project-directory> will be the basename of remote root folder. For example:

local:

awsome-infographic
├── dist
├── static

remote will be:

<gcs-project-id>
├─ <gcs-bucket-name>
  ├─ <root-prefix>-awsome-infographic-<root-postfix>
    ├─ dist
    ├─ static

<gcs-project-id>, <gcs-bucket-name>, <root-prefix>, and <root-postfix> are be set in fede-config.json. (See below)

Install and Setup

Install

# npm
npm i -g @twreporter/static-fe-deployer

# yarn
yarn global add @twreporter/static-fe-deployer

Setup GCS authentication

Follow the instruction to setup authetication: Google Cloud Platform Documentation > Authentication > Getting Started with Authentication

Setup fede-config.json

Make sure you have already cd to the project's root folder you want to deploy

fede build-config --project-id <your-gcs-project-id> --bucket-name <your-gcs-bucket-name>

It will create a fede-config.json at your project directory. You can edit it manually after it had been built.

Usage

  Usage: fede [options] [command]

  Options:

    -h, --help                             output usage information

  Commands:

    deploy [options] [files-or-subfolder]  deploy files to remote device
    archive [options] [subfolder-type]     set remote files cache-control
    build-config [options]                 build `fede-config.json` at current directory

deploy

# deploy all files to staging
fede deploy

# deploy `dist` to staging
fede deploy dist

# deploy custom files to production (only allow files under `static` or `dist`)
fede deploy "static/maps/*" --production

# deploy static to production with custom cache time
fede deploy static --production --cache-time 600

# deploy all files to staging with cache-control = 'no-cache, no-store, must-revalidate'
fede deploy --cache-time 0

Archive

# archive all files in staging `dist` and `static`
fede archive

# archive staging `dist`
fede archive dist

# archive production `static`
fede archive static -p

# set production static metadata with custom cache time
fede archive static --production --cache-time 600

# disable staging cache (cache-control = 'no-cache, no-store, must-revalidate')
fede archive --cache-time 0

Default cache-control value

• staging: public, max-age=60
• production: public, max-age=600
• archive: public, max-age=604800 (7 days)

Developement

npm run dev

npm link will be broken if you modify the binary entry file. So we make npm run dev run the npm link right after babel compiled the src/index.js into bin/index.js.

After npm link, it complies other files and watches changes of these files .

If you update the src/index.js, you will need to restart this process with npm run dev again.

Testing

npm test

TODO

• [ ] Add tests for src/utils and src/actions