Skip to content

povio/spa-deploy-cli

Repository files navigation

SPA Deploy CLI

Deploy and configure an SPA.

Features:

Static SPA deploy:

  • Deploy to AWS S3
  • Invalidate CloudFront based on GLOB rules
  • Purge old files based on GLOB rules or a state file
  • Embed environment variables into HTML

Examples:

Setup

One time execution or installed - make sure you pin the package.

yarn dlx @povio/spa-deploy-cli@5.0
yarn add @povio/spa-deploy-cli@5.0

Deploy

yarn spa-deploy deploy --stage myapp-stg --apply

Arguments

  • --purge remove all files not defined, forces --scan
  • --force re-upload all files, even unchanged
  • --scan force scanning (update stateFile is set)
  • --apply apply changes, dry run is default
  • --module use another name for config, eq .config/${stage}.${module}$.yml
  • --stage set the environment .config/${stage}.spa.yml
  • --verbose output all logs
  • --cwd run in another directory

Config

Simple SPA Config

.config/myapp-dev.spa.yml

deploy:

  context:
    accountId: "000000000000"
    region: us-east-1

  s3:
      bucket: myapp-dev-website
      stateFile: true
          
  cloudfront:
    distributionId: CF000000000000

  prefix: dist

  files:
    - includeGlob: "**/*.html"
      cacheControl: "no-cache, must-revalidate"
      purge: true
      invalidate: true
      priority: 2

    - includeGlob: 
        - "assets/**/*"
      cacheControl: "public, max-age=2628000, immutable"
      priority: 1
      purge:
        keepDays: 2
        keepVersions: 2

    - includeGlob: "**/*"
      cacheControl: "no-cache, must-revalidate"
      invalidate: true
      priority: 2

All config options

deploy:

  context:
    # AWS details
    accountId: "000000000000"
    region: us-east-1
    
  # local prefix
  prefix: dist
  
  files:
    - includeGlob:
        - "**/*.html"

      # Set cache
      cacheControl: "no-cache, must-revalidate"

      # Do not re-upload files if unchanged, requires scan or stateFile
      #skipUnchanged: false

      # Delete all non-local files, requires scan or stateFile
      #  false, true, 
      #purge: false
      
      # Targeted CloudFront invalidation, adds extra costs
      #invalidate: false

      # Override Mime Type
      #contentType: text/html

      # Override Content Disposition
      #contentDisposition: inline;

      # ACL, not required if using bucket policy
      #acl: "public-read"

      # Priority, lower number is uploaded first
      #  assets should be uploaded before HTML files
      #priority: 2

      # Ignore this pattern entirely
      #ignore: false
      
  s3:
      bucket: myapp-dev-website
      
      # Prefix to upload to, default is root
      #prefix:

      # Fully scan remote
      #scan: false

      # Keep a state file for versioning
      #  true/false or name of file
      #stateFile: false

      # Do not re-upload files if unchanged
      #  requires scan or stateFile
      #skipUnchanged: false

      # Delete all ignored/unknown files
      #  requires scan or stateFile
      #purge: false

      # Keep versions for x days or x versions
      #  requires stateFile
      #purge:
      #  keepDays: 2 
      #  keepVersions: 2

      
      # Set ACL, not needed if using bucket policy
      #acl: "public-read"
          
  cloudfront:
    distributionId: CF000000000000
    invalidatePaths: 
      # it may be cheaper to just invalidate everything
      - "/*"

Injecting the environment into .html

yarn spa-deploy inject --stage myapp-stg

.config/myapp-dev.spa.yml

Config

inject:
  - name: "html"

    # files to replace the env into
    sourceGlob: "**/*.html"
    sourcePrefix: ./dist

    #destinationPrefix: ./dist
    
    # resolve-config configuration name and module
    config: html
    #configModule: spa

    #scriptVariable: 'window.__ENV__'
    #scriptTag: 'id="env-data"'

# https://github.com/povio/resolve-config
configs:
  - name: html
    values:
      - name: "APP_STAGE"
        valueFrom: "func:STAGE"
      - name: "APP_API"
        value: "https://api.example.com"

Example

The file will be edited in place, with the following content inserted into the <head> section, replacing any existing <script id="env-data">:

<script id="env-data">
  // you can add local testing variables here,
  // this will get overwritten at build
  window.__ENV__ = {"APP_STAGE":"myapp-dev"}
</script>

Development

Test locally

# prerequisites
corepack install
yarn

# run tests
yarn test

# run sources with tsx
yarn start --help
yarn start bootstrap --pwd ./test --stage myapp-dev

# build new version
yarn build

# test build
yarn start:prod --help
yarn start:dist bootstrap --pwd ./test --stage myapp-dev

# test deploy
yarn start:dist deploy --pwd ./test --stage myapp-dev

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published