Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

aws-cdk-web

Package Overview
Dependencies
Maintainers
1
Versions
143
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aws-cdk-web

AWS CDK in your browser

  • 1.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

cdk-web :rocket: DEMO

:muscle:  AWS CDK in your browser! (experimental)

Dependabot GitHub Actions cdk-web CI badge

this package is also mirrored on NPM under aws-cdk-web. read about the differences below.

usage

load cdk-web.js somewhere into your HTML file:

<script src="https://unpkg.com/aws-cdk-web"></script>

and start writing CDK apps like you would normally do in Node:

const cdk = require("aws-cdk-lib");
const ec2 = require("aws-cdk-lib/aws-ec2");
const sqs = require("aws-cdk-lib/aws-sqs");
const sns = require("aws-cdk-lib/aws-sns");
const s3 = require("aws-cdk-lib/aws-s3");
const app = new cdk.App();
const stack = new cdk.Stack(app, "BrowserStack");
const vpc = new ec2.Vpc(stack, "VPC");
const queue = new sqs.Queue(stack, "Queue");
const topic = new sns.Topic(stack, "Topic");
const bucket = new s3.Bucket(stack, "Bucket");
const assembly = app.synth();
console.log(assembly);

output of app.synth() contains all you need to get your generated stack.

build

executing npm run build builds CDK for web. everything is bundled in dist/cdk-web.js. you may open up dist/index.html in your browser if you want to just play with the compiled bundle.

testing

testing is done by Puppeteer. the actual generated bundle is loaded into Puppeteer and tests are executed against it. run npm test to execute them.

exports

default behavior

a global require function is exposed that can resolve the following modules in a browser environment:

  • aws-cdk-lib: core CDK library
  • aws-cdk-lib/*: core scoped CDK modules
  • constructs: the AWS constructs library
  • path: node path utilities to be used with fs
  • fs: in-memory and in-browser file system API

after you call app.synth() you can investigate what normally goes into your cdk.out by calling require('fs').vol.toJSON() which returns everything on "disk" within your browser.

overriding the default behavior

you can override the default behavior by defining window.CDK_WEB_REQUIRE to a string before loading cdk-web.js in your HTML. For example:

<!DOCTYPE html>
<html>
  <body>
    <script>window.CDK_WEB_REQUIRE = "my_custom_cdk_require"</script>
    <script src="cdk-web.js"></script>
    <script>
      // window.require is now window.my_custom_cdk_require
      const cdk = my_custom_cdk_require('aws-cdk-lib');
    </script>
  </body>
</html>

cdk-web vs aws-cdk-web

The two packages are identical, mirrored, and released to at the same time. You may use the other mirror if you are behind a corporate proxy and your NPM packages go through a third-party repository such as Artifactory. The mirror does not list any packages as dependencies in its package.json (neither dev, nor prod). This prevents cdk-web to be incorrectly flagged as vulnerable due to its outdated devDependencies. cdk-web is a compiled project. Its compiler and toolchain being outdated does not impact its runtime. It's all client side JavaScript anyway. The mirror is only provided for your convenience.

known issues

  • CDK Bootstrap is not available
    • Complicated stacks that require a context and a CDK Bootstrap stack most likely will not work
    • Workaround: This tool is not for managing complicated stacks :) use the native CDK instead
  • Nothing from the aws-cdk npm package (CDK CLI) is available
    • CLI commands (cdk synth, cdk deploy, etc.) are not offered
    • Workaround: You can use the AWS SDK in your browser to implement the same functionality
  • Anything that has to do with CDK Assets is not supported
    • Limited support for CDK Assets might be added later
    • Obviously anything that has to do with shelling (e.g. Docker, Lambda Bundles, etc.) does not work natively in browser
    • Workaround: Use the combination of AWS SDK and memfs to handle simple assets in browser
  • Anything that has to do with CDK Context is not supported
    • Context by itself technically works and writes in your browser's localStorage
    • Constructs that use Context (e.g. AMI Lookup) most likely will not work
    • Workaround: You can use the AWS SDK in your browser to implement the same functionality
  • Found a new one? Open up a GitHub issue.

FAQs

Package last updated on 09 Feb 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc