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:
yarn add spa-deploy-cli@poviolabs/spa-deploy-cli#v4.1or install globally
npm i -g spa-deploy-cli@poviolabs/spa-deploy-cli#v4.1 --forceregion: us-east-1
accountId: 000000000000
# 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
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
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://[email protected]/1the 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://[email protected]/1
yarn spa-deploy bootstrap --stage myapp-stgUsing 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>yarn spa-deploy deploy --stage myapp-stg# 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