SPAJS
SPAJS is a simple tool intended for quick and easy setup of static websites and single page application hosting on your AWS account.
Features
The tool automates following:
- S3 bucket creation and static website hosting setup
- CloudFront distribution creation with CNAME and SSL configuration
- File versioning and optimization/minification before uploading to S3
- File caching configuration
Install
$ npm install @fci/spajs -gnpm is a builtin CLI when you install Node.js - Installing Node.js with package manager
Initialization
To initialize website environment use the init command:
$ spajs init --help
Usage: init [options] <env>
initialize site environment
Options:
-h, --help output usage information
-d, --site-domain <domain> site domain
-p, --profile [profile] aws profile to use from ~/.aws/credentials file
-r, --region [region] aws region to use for site bucket
-s, --ssl setup ssl
This command automates most of the steps described in Setting Up a Static Website Using a Custom Domain. For using SSL and CNAME with CloudFront you can find more information here.
Env parameter is the name of environment. For example if you are using GitFlow you can have dev environment for latest code version, staging for next release QA and production for current stable release.
When you initialize environment configuration will be save under current directory in .spajs/<env>.json
Example
Following command creates S3 bucket test.foundcenter.com in eu-central-1 region, sets up CloudFront distribution for it with custom SSL certificate from AWS Certificate Manager and binds distrubution to CNAME test.foundcenter.com. When using CNAME option make sure that same CNAME is not used for any other distribution. To be able to setup SSL you will need to create domain certificate using AWS Certificate Manager.
$ spajs init dev -d test16.foundcenter.com -r eu-central-1 -s
Output:
Creating bucket test16.foundcenter.com in region eu-central-1...
Bucket test16.foundcenter.com created and configured for static website hosting.
Creating CloudFront distribution...
Setting CloudFront distribution domain test16.foundcenter.com...
Setting SSL certificate for domain test16.foundcenter.com...
CloudFront distribution E8LEBN3xxxx created.
Update your DNS settings! You need to set CNAME for domain test16.foundcenter.com to d205dq8zsd4fv.cloudfront.net
In order to use you custom domain setup DNS CNAME record to point to newely created CloudFront distribution. In our example test16.foundcenter.com needs to point to d205dq8zsd4fv.cloudfront.net.
Deployment
To deploy website content use deploy command:
$ spajs deploy --help
Usage: deploy [options] <env> [path]
deploy content to environment
Options:
-h, --help output usage information
Example
$ spajs deploy dev
Output:
[14:10:20] [create] index.html
[14:10:20] [create] page2.html
[14:10:21] [create] css/style1.css
[14:10:23] [create] images/image1.png
[14:10:23] [create] js/app.js
[14:10:23] [create] js/app1.js
[14:10:24] [create] js/dyn.js
[14:10:24] [create] templates/template1.html
[14:10:25] [create] tmp/index.html
[14:10:25] [create] xxx/template1.xxx
[14:10:25] [create] css/style1.70cd6184.css
[14:10:27] [create] images/image1.991d6e1d.png
[14:10:27] [create] js/app.46d6ffa2.js
[14:10:27] [create] js/app1.39a89d88.js
[14:10:28] [create] js/dyn.d050a82d.js
[14:10:28] [create] xxx/template1.9cfdf0d7.xxx
[14:10:29] [update] index.html
[14:10:29] [update] page2.html
[14:10:29] [skip] templates/template1.html
[14:10:29] [update] tmp/index.html
You can also deploy project (dir containing .spajs/) subfolder (e.g. dist/):
$ spajs deploy dev dist/
Deploy command first uses uglify and csso to optimize all css and js files than it uses rev-all to version each file and awspublish to push the to AWS S3 bucket.
In order to do caching correctly all files (except .html files) are versioned and aggressively cached Cache-Control: max-age=315360000, no-transform, public. All .html files are not cached Cache-Control: no-cache, no-store, must-revalidate.