@navigraph/cdk-spa
v0.2.0
Published
CDK Single-page application
Downloads
4
Readme
CDK Single-page application
This Construct makes it possible to deploy a single page website (Angular/React/Vue) to AWS S3 behind SSL/Cloudfront in a few lines of code.
Installation
Yarn
yarn add @navigraph/cdk-spa
NPM
npm install --save @navigraph/cdk-spa
Usage
import { NavigraphSPA } from '@navigraph/cdk-spa';
import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { resolve } from 'path';
export class CdkStack extends Stack {
constructor(scope: Construct, id: string, props?: StackProps) {
super(scope, id, props);
new NavigraphSPA(this, 'SPA', {
appName: 'cool-app',
environment: 'development',
tags: {
realm: 'charts',
},
}).createSiteFromHostedZone({
indexDoc: 'index.html',
websiteFolder: resolve(__dirname, '../../dist'),
zoneName: 'example.com',
subdomain: 'cool-app',
basicAuth: {
username: 'jsmith',
password: 'secret',
},
});
}
}
More examples
Plain & simple S3 hosting
new NavigraphSPA(this, 'SPA', {
appName: 'cool-demo',
environment: 'development',
tags: {
realm: 'charts',
},
}).createBasicSite({
indexDoc: 'index.html',
websiteFolder: resolve(__dirname, '../../dist'),
});
CloudFront with custom domain & SSL certificate
new NavigraphSPA(this, 'SPA', {
appName: 'cool-blog',
environment: 'development',
tags: {
realm: 'charts',
},
}).createSiteWithCloudfront({
indexDoc: '../blog/dist/blog',
websiteFolder: resolve(__dirname, '../../dist'),
certificateARN: 'arn:...',
cfAliases: ['www.alias.com'],
});
Custom Origin Behaviors
new NavigraphSPA(this, 'SPA', {
appName: 'cool-app',
environment: 'development',
tags: {
realm: 'charts',
},
}).createSiteWithCloudfront({
indexDoc: '../blog/dist/blog',
websiteFolder: resolve(__dirname, '../../dist'),
cfBehaviors: [
{
isDefaultBehavior: true,
allowedMethods: CF.CloudFrontAllowedMethods.ALL,
forwardedValues: {
queryString: true,
cookies: { forward: 'all' },
headers: ['*'],
},
},
{
pathPattern: '/virtual-path',
allowedMethods: CF.CloudFrontAllowedMethods.GET_HEAD,
cachedMethods: CF.CloudFrontAllowedCachedMethods.GET_HEAD,
},
],
});
Restrict access to select known IPs
new NavigraphSPA(this, 'spaDeploy', {
appName: 'secret-app',
environment: 'development',
encryptBucket: true,
ipFilter: true,
ipList: ['1.1.1.1'],
}).createBasicSite({
indexDoc: 'index.html',
websiteFolder: 'website',
});