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',
});