Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@povio/spa-deploy-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SPA Deploy CLI

Use this tool to deploy and configure an SPA.

Features:

Static SPA deploy:

Deploy to AWS S3
Targeted CloudFront invalidation and caching
Embed environment variables into HTML

Next.js Configuration:

From SSM Parameter Store

Examples:

Vue Basic

Setup

Running without installing. Make sure to lock the version, check the latest version on npm.

yarn dlx @povio/spa-deploy-cli@4.1.0

If using yarn cache, you can install the package:

yarn add @povio/spa-deploy-cli

Configure

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

# Static SPA deploy config
deploy:
    buildPath: "./dist"
    #includeGlob: "**"
    #ignoreGlob:
        
    s3:
        acl: "public-read"
        bucket: myapp-dev-website
        #prefix:
        purge: false
        force: false
        # extra glob for invalidation
        #invalidateGlob: 
        # ignore s3 changes for invalidation
        #skipChangesInvalidation: false
          
        cacheControl: "max-age=2628000, public"
        
        # pattern match cache control, first match wins, default is cacheControl
        #cacheControlGlob:
        # - glob: "*.html"
        #   cacheControl: "no-cache, no-store, must-revalidate"
          
    cloudfront:
        distributionId: CF000000000000
        invalidatePaths: "/*"

# Environment file config
configs:
    # Write into env file (Next.js)
    #  destination: ./.env.local
    
    # Write into yaml
    #  destination: ./production.yaml
    
    # Write into .html, in the head section or <script id="env-data"></script>
    # Warning: all values will be public
    #  destination: ./dist/index.html

    
    values:
        # load config from ./.config/${stage}.base.template.env
        # and interpolate ${arn:aws:ssm..} and ${env:ENV_VALUE} values
        # load them onto the root
      - name: "@"
        configFrom: base.template
    
        # simple value mapping
      - name: database__password
        valueFrom: arn:aws:ssm:::parameter/myapp-dev/database/password
    
        # JSON object mapping
      - name: database
        valueFrom: arn:aws:ssm:::parameter/myapp-dev/database
    
      - name: database__host
        valueFrom: env:DATABASE_HOST

Example

Where configFrom: base.template and the config file is .config/${stage}.base.template.yml:

APP_RELEASE: ${func:release}
APP_STAGE: ${func:stage}
APP_VERSION: ${env:APP_VERSION}
STATIC_URL: https://static.example.com
NEXT_PUBLIC_SENTRY_CDN: https://public@sentry.example.com/1

the output will be at the set destination, for example .env.local:

APP_RELEASE=61be6e2c61be6e2c61be6e2c61be6e2c
APP_STAGE=myapp-stg
APP_VERSION=0.0.1
STATIC_URL: https://static.example.com
NEXT_PUBLIC_SENTRY_DSN=https://public@sentry.example.com/1

Injecting the environment

yarn spa-deploy bootstrap --stage myapp-stg

Pure SPA or after build time configuration

Using the destination: ./dist/index.html option, you can inject the environment into the HTML file.

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.APP_STAGE = "myapp-stg";
</script>

Static SPA Deploy

yarn spa-deploy deploy --stage myapp-stg

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