├── .eslintrc.js ├── .github ├── dependabot.yml └── workflows │ ├── auto-merge.yml │ └── ci.yml ├── .gitignore ├── .mocharc.yml ├── .npmignore ├── .vscode └── launch.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── cdk-web.tsconfig.json ├── cdk-web.webpack.config.js ├── dist └── index.html ├── docs ├── README.md ├── assets │ ├── types-vscode-1.png │ └── types-vscode-2.png ├── async.md ├── bootstrap.md ├── cli.md ├── development.md ├── fs.md ├── lambda.md ├── logs.md ├── sample-construct │ ├── ,gitignore │ ├── .vscode │ │ ├── launch.json │ │ └── tasks.json │ ├── README.md │ ├── jest-puppeteer.config.js │ ├── jest.config.js │ ├── package.json │ ├── public │ │ └── index.html │ ├── sample-web-construct.js │ ├── sample-web-construct.test.js │ ├── utils │ │ ├── browser-aws.js │ │ ├── browser-cdk.js │ │ └── is-debugger.js │ └── webpack.config.js └── types.md ├── package-lock.json ├── package.json ├── patches ├── esbuild-wasm+0.14.39.patch ├── fs-extra+9.1.0.patch └── path-browserify+1.0.1.patch ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── manifest.json ├── mstile-144x144.png ├── mstile-150x150.png ├── mstile-310x150.png ├── mstile-310x310.png ├── mstile-70x70.png ├── safari-pinned-tab.svg └── site.webmanifest ├── scripts ├── get-source-hash.js └── strip-package-json.js ├── src ├── App.js ├── index.css ├── index.js ├── lazyLoadScript.js └── reportWebVitals.js ├── test ├── _setup.js ├── async-construct.test.js ├── basic-synthesize.test.js ├── cfn-include-patch.test.js ├── cli-bootstrap.test.js ├── cli-deploy.test.js ├── cli-diff.test.js ├── cli-render.test.js ├── cli-synthesize.test.js ├── entrypoint.test.js ├── logger-events.test.js ├── nodejs-lambda.test.js ├── sanity.test.js ├── virtual-fs.test.js └── virtual-process.test.js └── webpack ├── common.js ├── copy-declarations.js ├── generate-entrypoint.js ├── index.js ├── loaders ├── empty-loader.js └── override-loader.js ├── modules ├── aws-cdk-lib │ ├── aws-lambda-nodejs │ │ └── lib │ │ │ ├── bundling.js │ │ │ ├── esbuild.js │ │ │ ├── function.js │ │ │ └── index.js │ └── core │ │ └── lib │ │ └── stage.js ├── aws-cdk │ └── lib │ │ └── util │ │ └── directories.js ├── cli.js ├── console-browserify │ └── index.js ├── emitter.js ├── empty.js ├── entrypoint.js ├── fs.js ├── os.js └── process.js └── plugins ├── extended-alias-plugin.js ├── override-tracker-plugin.js ├── post-build-plugin.js └── search-and-destroy-plugin.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | node: true, 4 | browser: true, 5 | commonjs: true, 6 | }, 7 | plugins: ["es"], 8 | parserOptions: { 9 | ecmaVersion: "latest", 10 | }, 11 | ignorePatterns: ["src", "webpack", "build", "public"], 12 | rules: { 13 | "es/no-regexp-lookbehind-assertions": "error", 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: / 5 | schedule: 6 | interval: weekly 7 | allow: 8 | - dependency-name: "aws-sdk" 9 | - dependency-name: "aws-cdk" 10 | - dependency-name: "aws-cdk-lib" 11 | - dependency-name: "cdk-assets" 12 | - dependency-name: "constructs" 13 | - dependency-name: "@aws-cdk/*" 14 | - dependency-name: "puppeteer" 15 | labels: 16 | - npm dependencies 17 | -------------------------------------------------------------------------------- /.github/workflows/auto-merge.yml: -------------------------------------------------------------------------------- 1 | name: dependabot auto-merge 2 | on: pull_request_target 3 | 4 | permissions: 5 | pull-requests: write 6 | contents: write 7 | id-token: write 8 | 9 | jobs: 10 | dependabot: 11 | runs-on: ubuntu-latest 12 | if: ${{ github.actor == 'dependabot[bot]' }} 13 | steps: 14 | - name: setup aws 15 | uses: aws-actions/configure-aws-credentials@v1 16 | with: 17 | role-to-assume: ${{ secrets.AWS_ROLE_ARN }} 18 | role-session-name: github-actions-cdk-web 19 | aws-region: us-east-1 20 | 21 | - name: setup checkout 22 | run: | 23 | export GIT_CREDENTIAL=$(aws --output json ssm get-parameter --name /github-actions/github-pat | jq -r ".Parameter.Value") 24 | echo "GIT_CREDENTIAL=$GIT_CREDENTIAL" >> $GITHUB_ENV 25 | echo "::add-mask::$GIT_CREDENTIAL" 26 | 27 | - name: fetch dependabot metadata 28 | id: metadata 29 | uses: dependabot/fetch-metadata@v1.1.1 30 | with: 31 | github-token: "${{ env.GIT_CREDENTIAL }}" 32 | 33 | - name: enable auto-merge for dependabot PRs 34 | run: gh pr merge --auto --merge "$PR_URL" 35 | env: 36 | PR_URL: ${{github.event.pull_request.html_url}} 37 | GITHUB_TOKEN: ${{ env.GIT_CREDENTIAL }} 38 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: cdk-web CI 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: ["*"] 7 | pull_request_target: 8 | branches: ["main"] 9 | 10 | concurrency: 11 | group: ${{ github.workflow }}-${{ github.head_ref || github.ref_name }} 12 | cancel-in-progress: false 13 | 14 | permissions: 15 | id-token: write 16 | contents: write 17 | 18 | jobs: 19 | check: 20 | runs-on: ubuntu-latest 21 | outputs: 22 | release: ${{ steps.release.outputs.release }} 23 | steps: 24 | - id: release 25 | run: echo "::set-output name=release::${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}" 26 | main: 27 | needs: check 28 | runs-on: ubuntu-latest 29 | steps: 30 | - name: setup aws 31 | uses: aws-actions/configure-aws-credentials@v1 32 | with: 33 | role-to-assume: ${{ secrets.AWS_ROLE_ARN }} 34 | role-session-name: github-actions-cdk-web 35 | aws-region: us-east-1 36 | 37 | - name: setup checkout 38 | run: | 39 | export GIT_CREDENTIAL=$(aws --output json ssm get-parameter --name /github-actions/github-pat | jq -r ".Parameter.Value") 40 | echo "GIT_CREDENTIAL=$GIT_CREDENTIAL" >> $GITHUB_ENV 41 | echo "::add-mask::$GIT_CREDENTIAL" 42 | 43 | - name: setup public url 44 | run: | 45 | export PUBLIC_URL="https://$GITHUB_REPOSITORY_OWNER.github.io/$(echo $GITHUB_REPOSITORY | awk -F / '{print $2}')" 46 | echo "PUBLIC_URL=$PUBLIC_URL" >> $GITHUB_ENV 47 | echo "PUBLIC_URL=$PUBLIC_URL" 48 | 49 | - uses: actions/checkout@v3 50 | with: 51 | token: ${{ env.GIT_CREDENTIAL }} 52 | 53 | - name: setup git 54 | run: | 55 | git config user.name github-actions 56 | git config user.email github-actions@github.com 57 | 58 | - uses: actions/setup-node@v3 59 | with: 60 | cache: "npm" 61 | node-version: "16.x" 62 | registry-url: "https://registry.npmjs.org" 63 | 64 | - name: setup npm 65 | run: | 66 | export NODE_AUTH_TOKEN=$(aws --output json ssm get-parameter --name /github-actions/npm-token | jq -r ".Parameter.Value") 67 | echo "NODE_AUTH_TOKEN=$NODE_AUTH_TOKEN" >> $GITHUB_ENV 68 | echo "::add-mask::$NODE_AUTH_TOKEN" 69 | 70 | - name: install dependencies 71 | run: npm ci 72 | 73 | - name: check coverage 74 | run: npm run coverage 75 | 76 | - name: build the release bundle 77 | run: | 78 | npm run build 79 | git checkout HEAD -- 'package*.json' 80 | git diff --exit-code . 81 | env: 82 | NODE_OPTIONS: --max_old_space_size=4096 83 | 84 | - name: run unit and e2e tests 85 | run: npm test 86 | 87 | - name: release on NPM (cdk-web - with devDependencies) 88 | if: needs.check.outputs.release == 'true' 89 | run: | 90 | node scripts/strip-package-json.js cdk-web 91 | npm publish 92 | 93 | - name: release on NPM (aws-cdk-web - without devDependencies) 94 | if: needs.check.outputs.release == 'true' 95 | run: | 96 | mkdir aws-cdk-web 97 | cp -R scripts types dist ./aws-cdk-web 98 | cp README.md LICENSE index.d.ts package.json ./aws-cdk-web 99 | pushd aws-cdk-web 100 | node scripts/strip-package-json.js aws-cdk-web 101 | npm publish 102 | popd 103 | rm -rf aws-cdk-web 104 | 105 | - name: tag a new release on Git 106 | if: needs.check.outputs.release == 'true' 107 | uses: actions/github-script@v5 108 | with: 109 | github-token: ${{ env.GIT_CREDENTIAL }} 110 | script: | 111 | const { version } = require('./package.json'); 112 | await github.rest.git.createRef({ 113 | owner: context.repo.owner, 114 | repo: context.repo.repo, 115 | ref: `refs/tags/v${ version }`, 116 | sha: context.sha 117 | }) 118 | 119 | - name: deploy playground 120 | if: needs.check.outputs.release == 'true' 121 | uses: peaceiris/actions-gh-pages@v3 122 | with: 123 | github_token: ${{ env.GIT_CREDENTIAL }} 124 | publish_dir: ./build 125 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,windows,linux,macos 2 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode,windows,linux,macos 3 | 4 | ### Linux ### 5 | *~ 6 | 7 | # temporary files which can be created if a process still has a handle open of a deleted file 8 | .fuse_hidden* 9 | 10 | # KDE directory preferences 11 | .directory 12 | 13 | # Linux trash folder which might appear on any partition or disk 14 | .Trash-* 15 | 16 | # .nfs files are created when an open file is removed but is still being accessed 17 | .nfs* 18 | 19 | ### macOS ### 20 | # General 21 | .DS_Store 22 | .AppleDouble 23 | .LSOverride 24 | 25 | # Icon must end with two \r 26 | Icon 27 | 28 | 29 | # Thumbnails 30 | ._* 31 | 32 | # Files that might appear in the root of a volume 33 | .DocumentRevisions-V100 34 | .fseventsd 35 | .Spotlight-V100 36 | .TemporaryItems 37 | .Trashes 38 | .VolumeIcon.icns 39 | .com.apple.timemachine.donotpresent 40 | 41 | # Directories potentially created on remote AFP share 42 | .AppleDB 43 | .AppleDesktop 44 | Network Trash Folder 45 | Temporary Items 46 | .apdisk 47 | 48 | ### Node ### 49 | # Logs 50 | logs 51 | *.log 52 | npm-debug.log* 53 | yarn-debug.log* 54 | yarn-error.log* 55 | lerna-debug.log* 56 | .pnpm-debug.log* 57 | 58 | # Diagnostic reports (https://nodejs.org/api/report.html) 59 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 60 | 61 | # Runtime data 62 | pids 63 | *.pid 64 | *.seed 65 | *.pid.lock 66 | 67 | # Directory for instrumented libs generated by jscoverage/JSCover 68 | lib-cov 69 | 70 | # Coverage directory used by tools like istanbul 71 | coverage 72 | *.lcov 73 | 74 | # nyc test coverage 75 | .nyc_output 76 | 77 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 78 | .grunt 79 | 80 | # Bower dependency directory (https://bower.io/) 81 | bower_components 82 | 83 | # node-waf configuration 84 | .lock-wscript 85 | 86 | # Compiled binary addons (https://nodejs.org/api/addons.html) 87 | build/Release 88 | 89 | # Dependency directories 90 | node_modules/ 91 | jspm_packages/ 92 | 93 | # Snowpack dependency directory (https://snowpack.dev/) 94 | web_modules/ 95 | 96 | # TypeScript cache 97 | *.tsbuildinfo 98 | 99 | # Optional npm cache directory 100 | .npm 101 | 102 | # Optional eslint cache 103 | .eslintcache 104 | 105 | # Optional stylelint cache 106 | .stylelintcache 107 | 108 | # Microbundle cache 109 | .rpt2_cache/ 110 | .rts2_cache_cjs/ 111 | .rts2_cache_es/ 112 | .rts2_cache_umd/ 113 | 114 | # Optional REPL history 115 | .node_repl_history 116 | 117 | # Output of 'npm pack' 118 | *.tgz 119 | 120 | # Yarn Integrity file 121 | .yarn-integrity 122 | 123 | # dotenv environment variable files 124 | .env 125 | .env.development.local 126 | .env.test.local 127 | .env.production.local 128 | .env.local 129 | 130 | # parcel-bundler cache (https://parceljs.org/) 131 | .cache 132 | .parcel-cache 133 | 134 | # Next.js build output 135 | .next 136 | out 137 | 138 | # Nuxt.js build / generate output 139 | .nuxt 140 | dist 141 | 142 | # Gatsby files 143 | .cache/ 144 | # Comment in the public line in if your project uses Gatsby and not Next.js 145 | # https://nextjs.org/blog/next-9-1#public-directory-support 146 | # public 147 | 148 | # vuepress build output 149 | .vuepress/dist 150 | 151 | # vuepress v2.x temp and cache directory 152 | .temp 153 | 154 | # Docusaurus cache and generated files 155 | .docusaurus 156 | 157 | # Serverless directories 158 | .serverless/ 159 | 160 | # FuseBox cache 161 | .fusebox/ 162 | 163 | # DynamoDB Local files 164 | .dynamodb/ 165 | 166 | # TernJS port file 167 | .tern-port 168 | 169 | # Stores VSCode versions used for testing VSCode extensions 170 | .vscode-test 171 | 172 | # yarn v2 173 | .yarn/cache 174 | .yarn/unplugged 175 | .yarn/build-state.yml 176 | .yarn/install-state.gz 177 | .pnp.* 178 | 179 | ### Node Patch ### 180 | # Serverless Webpack directories 181 | .webpack/ 182 | 183 | # Optional stylelint cache 184 | 185 | # SvelteKit build / generate output 186 | .svelte-kit 187 | 188 | ### VisualStudioCode ### 189 | .vscode/* 190 | !.vscode/settings.json 191 | !.vscode/tasks.json 192 | !.vscode/launch.json 193 | !.vscode/extensions.json 194 | !.vscode/*.code-snippets 195 | 196 | # Local History for Visual Studio Code 197 | .history/ 198 | 199 | # Built Visual Studio Code Extensions 200 | *.vsix 201 | 202 | ### VisualStudioCode Patch ### 203 | # Ignore all local history of files 204 | .history 205 | .ionide 206 | 207 | # Support for Project snippet scope 208 | 209 | ### Windows ### 210 | # Windows thumbnail cache files 211 | Thumbs.db 212 | Thumbs.db:encryptable 213 | ehthumbs.db 214 | ehthumbs_vista.db 215 | 216 | # Dump file 217 | *.stackdump 218 | 219 | # Folder config file 220 | [Dd]esktop.ini 221 | 222 | # Recycle Bin used on file shares 223 | $RECYCLE.BIN/ 224 | 225 | # Windows Installer files 226 | *.cab 227 | *.msi 228 | *.msix 229 | *.msm 230 | *.msp 231 | 232 | # Windows shortcuts 233 | *.lnk 234 | 235 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,windows,linux,macos 236 | 237 | # CDK asset staging directory 238 | .cdk.staging 239 | cdk.out 240 | 241 | cdk-web.min.js* 242 | cdk-web.js* 243 | 244 | index.generated.*js 245 | 246 | !dist/ 247 | !dist/*.html 248 | 249 | aws-cdk-web/ 250 | 251 | /index.d.ts 252 | /webpack/modules/entrypoint.generated.js 253 | 254 | # Create React App 255 | build/ 256 | types/ 257 | 258 | # Esbuild 259 | 260 | dist/esbuild.wasm 261 | public/esbuild.wasm 262 | -------------------------------------------------------------------------------- /.mocharc.yml: -------------------------------------------------------------------------------- 1 | bail: false 2 | timeout: "2m" 3 | require: "choma" 4 | full-trace: true 5 | inline-diffs: true 6 | check-leaks: true 7 | global: 8 | - "CDK" 9 | - "chai" 10 | - "page" 11 | file: 12 | - "./test/_setup.js" 13 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/* 2 | !dist/ 3 | dist/index.html 4 | !types/ 5 | !types/**/*.d.ts 6 | !dist/cdk-web.js 7 | !dist/cdk-web.js.map 8 | !dist/esbuild.wasm 9 | !package.json 10 | !LICENSE 11 | !index.d.ts 12 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "args": ["${file}"], 6 | "internalConsoleOptions": "openOnSessionStart", 7 | "name": "current test", 8 | "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", 9 | "request": "launch", 10 | "skipFiles": ["/**"], 11 | "type": "node", 12 | "env": { "CDK_WEB_DEBUG": "1" } 13 | }, 14 | { 15 | "name": "webpack", 16 | "request": "launch", 17 | "runtimeArgs": ["run-script", "build:bundle"], 18 | "runtimeExecutable": "npm", 19 | "skipFiles": ["/**"], 20 | "type": "pwa-node", 21 | "outFiles": ["${workspaceFolder}/**/*.js", "!**/node_modules/**"], 22 | "env": { "CDK_WEB_DEBUG": "1" } 23 | }, 24 | { 25 | "name": "playground", 26 | "type": "chrome", 27 | "request": "launch", 28 | "url": "http://localhost:3000", 29 | "webRoot": "${workspaceFolder}/src", 30 | "sourceMapPathOverrides": { 31 | "webpack:///src/*": "${webRoot}/*" 32 | } 33 | }, 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to cdk-web 2 | 3 | Thanks for your contribution in advance! 4 | 5 | I personally welcome all sorts of colorful PRs :) 6 | 7 | Go crazy! Add crazy shit! include 2GB WASM binaries! I do not care! go for it. 8 | 9 | Here is my current procedure for PRs from outside of the circle of the people I closely work with: 10 | 11 | - Fork cdk-web 12 | - Make your changes in your own fork 13 | - Make a PR against the `main` branch of cdk-web from your fork 14 | - I will work with you to make sure the commit is all safe and sound 15 | - I will branch out of `main` for you and you'll have to re-target your PR 16 | - I will merge your newly re-targeted PR 17 | 18 | If this process seems odd to you, it really is :) this project grew faster than I thought. I'll revise if need arises. 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sepehr Laal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cdk-web :rocket: [**DEMO**](https://3p3r.github.io/cdk-web) 2 | 3 | :muscle:  AWS CDK compiled for web (and Node!) 4 | 5 | [![npm](https://img.shields.io/npm/v/cdk-web.svg)](https://www.npmjs.com/package/cdk-web)  6 | [![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/cdk-web)](https://security.snyk.io/vuln/npm/?search=cdk-web)  7 | [![continuos integration](https://github.com/3p3r/cdk-web/actions/workflows/ci.yml/badge.svg)](https://github.com/3p3r/cdk-web/actions)  8 | [![downloads](https://img.shields.io/npm/dt/cdk-web.svg?label=cdk-web)](https://www.npmjs.com/package/cdk-web) ![+](https://img.shields.io/badge/-%2B-blueviolet) [![downloads](https://img.shields.io/npm/dt/aws-cdk-web.svg?label=aws-cdk-web)](https://www.npmjs.com/package/aws-cdk-web)  9 | [![types](https://img.shields.io/npm/types/cdk-web)](https://github.com/3p3r/cdk-web/blob/main/docs/types.md)  10 | 11 | > [cdk-web](https://www.npmjs.com/package/cdk-web) and [aws-cdk-web](https://www.npmjs.com/package/aws-cdk-web) are functionally identical packages on `npm`. read about the differences [below](#cdk-web-vs-aws-cdk-web). 12 | 13 | ## index 14 | 15 | | [usage](#usage) | [docs](#documentation) | [tests](#testing) | [types](#types) | [docs](docs/README.md) | 16 | | --------------- | ---------------------- | ----------------- | --------------- | ---------------------- | 17 | 18 | ## usage 19 | 20 | ### via `npm` 21 | 22 | ```bash 23 | npm install --save cdk-web aws-sdk 24 | ``` 25 | 26 | ### via `unpkg` 27 | 28 | ```HTML 29 | 30 | 31 | ``` 32 | 33 | ## sample app 34 | 35 | ```JS 36 | const CDK = require("cdk-web"); 37 | const cdk = CDK.require("aws-cdk-lib"); 38 | const ec2 = CDK.require("aws-cdk-lib/aws-ec2"); 39 | const sqs = CDK.require("aws-cdk-lib/aws-sqs"); 40 | const sns = CDK.require("aws-cdk-lib/aws-sns"); 41 | const s3 = CDK.require("aws-cdk-lib/aws-s3"); 42 | const app = new cdk.App(); 43 | const stack = new cdk.Stack(app, "BrowserStack"); 44 | const vpc = new ec2.Vpc(stack, "VPC"); 45 | const queue = new sqs.Queue(stack, "Queue"); 46 | const topic = new sns.Topic(stack, "Topic"); 47 | const bucket = new s3.Bucket(stack, "Bucket"); 48 | const assembly = await app.synth(); 49 | console.log(assembly); 50 | ``` 51 | 52 | ## `cdk-web` vs `cdk` 53 | 54 | - `cdk-web` does not have a dependency on any NPM packages 55 | - `cdk-web` is and will always be compatible with "strict" mode 56 | - `cdk-web` core framework weighs a whopping 200MB less than native CDK 57 | - `cdk-web` runs much faster than CDK thanks to it being entirely in-memory 58 | - `cdk-web` is a symmetrical package that works both in Node and web browsers 59 | - `cdk-web` is compressed and goes through the Closure Compiler on each release 60 | - `cdk-web` is arguably securer than CDK, again thanks to it being entirely in-memory 61 | - `cdk-web` allows you to Bring Your Own AWS SDK bundle ([details here](https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/building-sdk-for-browsers.html#using-the-sdk-builder)) 62 | 63 | ## building 64 | 65 | `npm run build` builds cdk-web. everything is bundled in `dist/cdk-web.js`. 66 | you may open up `dist/index.html` in your browser if you want to just play with the compiled bundle. 67 | you can build a dev bundle verbosely with `DEBUG='CdkWeb*'` and `CDK_WEB_DEBUG=1` environment variables set. 68 | 69 | ## testing 70 | 71 | testing is done by Puppeteer. the actual generated bundle is loaded into Puppeteer and tests are executed against it. 72 | run `npm test` to execute them. tests are executed twice: once in Puppeteer vs. native CDK as ground truth, and once in 73 | NodeJS to make sure the final bundle is also usable and sane in NodeJS-like environments. Coverage is also collected in 74 | NodeJS mode solely due to the fact that currently the toolchain does not have sufficient support to collect coverage in 75 | Puppeteer (which would be ideal). Although, NodeJS coverage is a good estimate of where everything is at. 76 | 77 | ## types 78 | 79 | `cdk-web` ships with a single `.d.ts` file that gives you the same typings as the native cdk. to get it to work, check 80 | out [docs/types.md](docs/types.md). typings for `aws-cdk-lib` and `constructs` are bundled as well. 81 | 82 | ## `cdk-web` vs `aws-cdk-web` 83 | 84 | The two packages are identical, mirrored, and released to at the same time. 85 | You may use [the other mirror](https://www.npmjs.com/package/aws-cdk-web) if you are behind a corporate proxy and your 86 | NPM packages go through a third-party repository such as Artifactory. The mirror does not list any packages as 87 | devDependencies in its package.json. This prevents `cdk-web` to be incorrectly flagged as vulnerable due to its outdated 88 | devDependencies. `cdk-web` is a compiled project. Its compiler and toolchain being outdated does not impact its runtime. 89 | It's all client side JavaScript anyway. The mirror is only provided for your convenience. 90 | -------------------------------------------------------------------------------- /cdk-web.tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["webpack/modules/entrypoint.generated.js"], 3 | "exclude": [ 4 | "src", 5 | "dist", 6 | "build", 7 | "public", 8 | "index.d.ts", 9 | "node_modules", 10 | "cdk-web-test.js", 11 | "cdk-web-webpack.config.js" 12 | ], 13 | "compilerOptions": { 14 | "target": "es5", 15 | "module": "commonjs", 16 | "outDir": "/dev/null", 17 | "allowJs": true, 18 | "declaration": true, 19 | "skipLibCheck": true, 20 | "declarationMap": true, 21 | "esModuleInterop": true, 22 | "emitDeclarationOnly": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /cdk-web.webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const webpack = require("webpack"); 3 | const { generateEntrypoint, loaders, plugins, common } = require("./webpack"); 4 | 5 | generateEntrypoint(); 6 | const __ = common.crossPlatformPathRegExp; 7 | const rooted = (s = "") => path.resolve(common.__ROOT, s); 8 | 9 | module.exports = { 10 | ...(common.__DEBUG 11 | ? { 12 | mode: "development", 13 | devtool: "inline-source-map", 14 | devServer: { 15 | static: [ 16 | { directory: rooted("./dist") }, 17 | { directory: rooted("./node_modules/esbuild-wasm") } 18 | ] 19 | }, 20 | watchOptions: { 21 | ignored: /node_modules/, 22 | aggregateTimeout: 500, 23 | }, 24 | } 25 | : { 26 | mode: "production", 27 | devtool: false, 28 | optimization: { 29 | minimize: false, 30 | }, 31 | }), 32 | cache: false, 33 | entry: generateEntrypoint.ENTRYPOINT_PATH, 34 | output: { 35 | library: { 36 | commonjs: "cdk-web", 37 | amd: "cdk-web", 38 | root: "CDK", 39 | }, 40 | libraryTarget: "umd", 41 | umdNamedDefine: true, 42 | globalObject: `(typeof self !== 'undefined' ? self : this)`, 43 | filename: "cdk-web.js", 44 | path: rooted("dist"), 45 | }, 46 | externals: { 47 | ["vm2"]: "vm2", 48 | ["aws-sdk"]: { 49 | commonjs2: "aws-sdk", 50 | commonjs: "aws-sdk", 51 | amd: "aws-sdk", 52 | root: "AWS", 53 | }, 54 | }, 55 | resolve: { 56 | extensions: [".js"], 57 | fallback: { 58 | net: false, 59 | child_process: false, 60 | buffer: require.resolve('buffer'), 61 | zlib: require.resolve('browserify-zlib'), 62 | crypto: require.resolve('crypto-browserify'), 63 | stream: require.resolve('stream-browserify'), 64 | console: require.resolve('console-browserify'), 65 | constants: require.resolve('constants-browserify'), 66 | }, 67 | alias: { 68 | ["fs"]: require.resolve("./webpack/modules/fs"), 69 | ["os"]: require.resolve("./webpack/modules/os"), 70 | ["promptly"]: require.resolve("./webpack/modules/empty"), 71 | ["proxy-agent"]: require.resolve("./webpack/modules/empty"), 72 | ["path"]: require.resolve("path-browserify"), 73 | ["process"]: require.resolve("./webpack/modules/process"), 74 | ...Object.assign( 75 | ...[ 76 | "node_modules/aws-cdk-lib/core/lib/stage.js", 77 | "node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/function.js", 78 | "node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/bundling.js", 79 | "node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/index.js", 80 | "node_modules/aws-cdk/lib/util/directories.js", 81 | "node_modules/console-browserify/index.js", 82 | ].map((mod) => ({ [rooted(mod)]: rooted(mod.replace("node_modules", "webpack/modules")) })) 83 | ), 84 | }, 85 | }, 86 | plugins: [ 87 | ...(common.__CI ? [] : [new webpack.ProgressPlugin()]), 88 | new plugins.OverrideTrackerPlugin(), 89 | new plugins.ExtendedAliasPlugin(), 90 | new plugins.PostBuildPlugin(), 91 | new webpack.ProvidePlugin({ 92 | Buffer: ['buffer', 'Buffer'], 93 | process: require.resolve("./webpack/modules/process.js"), 94 | console: require.resolve("./webpack/modules/console-browserify/index.js"), 95 | }), 96 | new webpack.DefinePlugin({ 97 | "process.versions.node": JSON.stringify(process.versions.node), 98 | "process.version": JSON.stringify(process.version), 99 | "process.env.CDK_OUTDIR": JSON.stringify("/cdk.out"), 100 | }), 101 | ], 102 | performance: { 103 | hints: false, 104 | }, 105 | ignoreWarnings: [ 106 | { module: /aws-lambda-(go|nodejs|python)/ }, 107 | { module: /.*custom-resource.*/ }, 108 | ], 109 | module: { 110 | rules: [ 111 | { 112 | test: /\.html$/i, 113 | loader: "html-loader", 114 | options: { 115 | sources: false, 116 | minimize: false, 117 | esModule: false, 118 | }, 119 | }, 120 | { 121 | test: /\.m?js$/, 122 | exclude: /node_modules/, 123 | use: { 124 | loader: "babel-loader", 125 | options: { 126 | presets: [["@babel/preset-env", { targets: "last 2 Chrome versions" }]], 127 | ...(common.__DEBUG ? { plugins: ["istanbul"] } : {}), 128 | }, 129 | }, 130 | }, 131 | { 132 | use: loaders.empty.Loader, 133 | test: loaders.empty.KeepTrack([ 134 | /hotswap/, 135 | __("node_modules/aws-cdk/lib/api/plugin/plugin.js"), 136 | __("node_modules/aws-cdk/lib/api/aws-auth/aws-sdk-inifile.js"), 137 | ]), 138 | }, 139 | { 140 | loader: loaders.override.Loader, 141 | test: __("node_modules/aws-cdk-lib/package.json"), 142 | options: { 143 | replace: (source) => { 144 | const excludedModules = common.getExcludedModules(); 145 | const moduleNames = excludedModules 146 | .map((p) => p.replace("aws-cdk-lib/", "./")) 147 | .filter((p) => !p.endsWith(".js")) 148 | .concat("."); 149 | const pJson = JSON.parse(source); 150 | const { exports } = pJson; 151 | for (const mod of moduleNames) delete exports[mod]; 152 | return JSON.stringify({ ...pJson, exports }); 153 | }, 154 | }, 155 | }, 156 | { 157 | loader: loaders.override.Loader, 158 | test: __("node_modules/aws-cdk-lib/index.js"), 159 | options: { 160 | replace: (source) => { 161 | const excludedModules = common.getExcludedModules(); 162 | const moduleNames = excludedModules 163 | .map((p) => p.replace("aws-cdk-lib/", "./")) 164 | .filter((p) => !p.endsWith(".js")) 165 | .filter((p) => p !== "./package.json"); 166 | const exports = source 167 | .match(/exports\.[^=]+=require\("([^"]+)"\),/g) 168 | .filter((exp) => moduleNames.some((m) => exp.includes(m))); 169 | for (const exp of exports) { 170 | source = source.replace(exp, ""); 171 | } 172 | return source; 173 | }, 174 | }, 175 | }, 176 | { 177 | loader: loaders.override.Loader, 178 | test: __("node_modules/aws-cdk/lib/api/bootstrap/bootstrap-environment.js"), 179 | options: { 180 | search: "'lib', 'api', 'bootstrap', 'bootstrap-template.yaml'", 181 | replace: "'bootstrap-template.yaml'", 182 | }, 183 | }, 184 | { 185 | loader: loaders.override.Loader, 186 | test: __("node_modules/aws-cdk-lib/aws-eks/lib/alb-controller.js"), 187 | options: { 188 | search: 189 | 'JSON.parse(fs.readFileSync(path.join(__dirname,"addons",`alb-iam_policy-${props.version.version}.json`),"utf8"))', 190 | replace: 'require("./addons/" + `alb-iam_policy-${props.version.version}` + ".json")', 191 | }, 192 | }, 193 | { 194 | loader: loaders.override.Loader, 195 | test: __("node_modules/aws-cdk-lib/custom-resources/lib/aws-custom-resource/aws-custom-resource.js"), 196 | options: { 197 | search: 'JSON.parse(fs.readFileSync(path.join(__dirname,"sdk-api-metadata.json"),"utf-8"))', 198 | replace: 'require("./sdk-api-metadata.json")', 199 | }, 200 | }, 201 | { 202 | loader: loaders.override.Loader, 203 | test: __("node_modules/aws-cdk-lib/custom-resources/lib/aws-custom-resource/runtime/index.js"), 204 | options: { 205 | search: 'JSON.parse(fs.readFileSync(path_1.join(__dirname,`${modelFilePrefix}.service.json`),"utf-8"))', 206 | replace: 'require("./" + `${modelFilePrefix}.service` + ".json")', 207 | }, 208 | }, 209 | { 210 | loader: loaders.override.Loader, 211 | test: __("node_modules/aws-cdk-lib/core/lib/app.js"), 212 | options: { 213 | search: "process.env[cxapi.OUTDIR_ENV]", 214 | replace: '"/cdk.out"', 215 | }, 216 | }, 217 | { 218 | loader: loaders.override.Loader, 219 | test: __("node_modules/aws-cdk-lib/core/lib/private/token-map.js"), 220 | options: { 221 | search: "=global", 222 | replace: "=((typeof window === 'undefined') ? global : window)", 223 | }, 224 | }, 225 | { 226 | loader: loaders.override.Loader, 227 | test: __("node_modules/aws-cdk-lib/cloudformation-include/lib/cfn-include.js"), 228 | options: { 229 | search: "require(moduleName)", 230 | replace: "eval((typeof window === 'undefined') ? 'require' : 'window.CDK.require')(moduleName)", 231 | }, 232 | }, 233 | { 234 | loader: loaders.override.Loader, 235 | test: __("node_modules/aws-cdk-lib/cloudformation-include/lib/cfn-type-to-l1-mapping.js"), 236 | options: { 237 | search: 'futils.readJsonSync(path.join(__dirname,"..","cfn-types-2-classes.json"))', 238 | replace: 'require("../cfn-types-2-classes.json")', 239 | }, 240 | }, 241 | { 242 | loader: loaders.override.Loader, 243 | test: __("node_modules/aws-cdk/lib/logging.js"), 244 | options: { 245 | multiple: [ 246 | { 247 | search: /realStream.write\(str.*/, 248 | replace: "console.log(str);", 249 | }, 250 | { 251 | search: "exports.logLevel = LogLevel.DEFAULT;", 252 | replace: "exports.logLevel = LogLevel.TRACE;", 253 | }, 254 | ], 255 | }, 256 | }, 257 | { 258 | loader: loaders.override.Loader, 259 | test: __("node_modules/cdk-assets/lib/private/handlers/files.js"), 260 | options: { 261 | search: "Body: fs_1.createReadStream(publishFile.packagedPath),", 262 | replace: "Body: fs_1.readFileSync(publishFile.packagedPath, 'utf8'),", 263 | }, 264 | }, 265 | { 266 | loader: loaders.override.Loader, 267 | test: __("node_modules/aws-cdk-lib/node_modules/@balena/dockerignore/ignore.js"), 268 | options: { 269 | multiple: [ 270 | { 271 | search: /const REGEX_TRAILING_SLASH = .*;/, 272 | replace: "const REGEX_TRAILING_SLASH = new RegExp();", 273 | }, 274 | { 275 | search: /const REGEX_TRAILING_BACKSLASH = .*;/, 276 | replace: "const REGEX_TRAILING_BACKSLASH = new RegExp();", 277 | }, 278 | ], 279 | }, 280 | }, 281 | { 282 | loader: loaders.override.Loader, 283 | test: __("node_modules/aws-cdk-lib/aws-events/lib/input.js"), 284 | options: { 285 | search: /r\.replace\(new RegExp[^.]+`\)/g, 286 | replace: 'r.startsWith("\\\\")?r:r.replace(/"([^"]+)"/g,"$1")', 287 | }, 288 | }, 289 | ], 290 | }, 291 | }; 292 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | cdk-web 5 | 6 | 7 | 35 | 41 | 42 | 43 | 44 | 47 | 91 | 92 | 93 | 94 |
95 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # documentation 2 | 3 | - [**fs**: shared in-memory filesystem](fs.md) 4 | - [**cli**: pseudo cli of cdk-web](cli.md) 5 | - [**logs**: cdk logs and console redirection](logs.md) 6 | - [**types**: jsdoc types](types.md) 7 | - [**async**: asynchronous constructs](async.md) 8 | - [**bootstrap**: bootstrapping for web](bootstrap.md) 9 | - [**development**: developer notes](development.md) 10 | - [**sample-construct**: web-compatible construct scaffold](sample-construct/README.md) 11 | -------------------------------------------------------------------------------- /docs/assets/types-vscode-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3p3r/cdk-web/621ca5e2ffebef97b3fa97f9afabec64e0e6d9d8/docs/assets/types-vscode-1.png -------------------------------------------------------------------------------- /docs/assets/types-vscode-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3p3r/cdk-web/621ca5e2ffebef97b3fa97f9afabec64e0e6d9d8/docs/assets/types-vscode-2.png -------------------------------------------------------------------------------- /docs/async.md: -------------------------------------------------------------------------------- 1 | # asynchronous constructs 2 | 3 | cdk-web supports asynchronous logic during synthesis in a limited capacity. the original cdk has this philosophy that 4 | everything must be sync, however in a web browser that's not possible as it blocks the main UI thread of the browser. 5 | 6 | for that purpose, cdk-web supports asynchronous constructs in a limited capacity. 7 | 8 | ## the static `Compose` method 9 | 10 | an optional `Compose` static method can be defined in your constructs like so: 11 | 12 | ```JS 13 | class AsyncConstruct extends constructs.Construct { 14 | static async Compose(self: AsyncConstruct) { 15 | // do async stuff here 16 | } 17 | } 18 | ``` 19 | 20 | you may use `Compose` to perform **immutable** async actions on constructs. keep these points in mind: 21 | 22 | - > **`Compose` calls are made after `synth()` is called and the entire app has finished synthesizing** 23 | - > **you MUST NOT alter or create new constructs in `Compose` (tree stays unchanged)** 24 | - > order of execution for `Compose` calls is not guaranteed 25 | - > `Compose` receives the construct itself as an argument 26 | -------------------------------------------------------------------------------- /docs/bootstrap.md: -------------------------------------------------------------------------------- 1 | # `cdk bootstrap` for cdk-web 2 | 3 | you must bootstrap your AWS account if you want to interact and deploy directly from within the browser. 4 | 5 | ## automatically using cdk-web's pseudo cli 6 | 7 | a `bootstrap()` method is exposed that you can leverage: 8 | 9 | ```JS 10 | const cli = new CDK.PseudoCli({ credentials: { accessKeyId: "...", secretAccessKey: "..." }}); 11 | await cli.bootstrap(); 12 | ``` 13 | 14 | for more in-depth documentation take a look at cli's [documentation](./cli.md). 15 | 16 | ## manually with native tooling 17 | 18 | instructions for bootstrapping is the same as vanilla cdk. you should grab cdk native tooling and bootstrap your account 19 | with a dummy empty cdk app. 20 | 21 | after bootstrapping you need to take one extra step to get things working. you need to set a cors policy on the bucket 22 | that `cdk bootstrap` created for you. 23 | 24 | here is a snippet that bootstraps a fresh account and enables a wildcard allow-everything cors on the bucket: 25 | 26 | ```bash 27 | mkdir cdk-temp && cd cdk-temp 28 | cdk init app --language=javascript 29 | cdk bootstrap 30 | export CDKToolkitBucket=$(aws cloudformation describe-stacks --stack-name CDKToolkit --query "Stacks[0].Outputs[?OutputKey=='BucketName'].OutputValue" --output text) 31 | echo '{"CORSRules":[{"AllowedHeaders":["*"],"AllowedMethods":["HEAD","GET","POST","PUT","DELETE"],"AllowedOrigins":["*"]}]}' > cors.json 32 | aws s3api put-bucket-cors --bucket $CDKToolkitBucket --cors-configuration file://cors.json 33 | cd .. && rm -rf cdk-temp 34 | ``` 35 | 36 | to summarize you need to: 37 | 38 | 1. bootstrap your account as usual with native cdk 39 | 1. find cdk's bootstrap bucket in your account 40 | 1. set a cors policy on it that makes sense for your use case 41 | -------------------------------------------------------------------------------- /docs/cli.md: -------------------------------------------------------------------------------- 1 | ## Classes 2 | 3 |
4 |
PseudoCli
5 |
6 |
7 | 8 | ## Typedefs 9 | 10 |
11 |
CloudFormationTemplate : Object
12 |

JSON representation of a CloudFormation stack

13 |
14 |
DeployStackResult : Object
15 |

see native-cdk 16 | for full reference for this interface (look for DeployStackResult interface in aws-cdk)

17 |
18 |
PseudoCliOptions : Object
19 |

parameters to create a cdk-web pseudo cli

20 |
21 |
PseudoCliDiffOptions : Object
22 |

parameters to execute a cli diff operation with

23 |
24 |
PseudoCliRenderOptions : Object
25 |

parameters to execute a cli render operation with

26 |
27 |
BootstrapWebEnvironmentOptions : Object
28 |

parameters to bootstrap an AWS account for cdk-web

29 |
30 |
31 | 32 | 33 | 34 | ## PseudoCli 35 | **Kind**: global class 36 | 37 | * [PseudoCli](#PseudoCli) 38 | * [new PseudoCli([opts])](#new_PseudoCli_new) 39 | * [.synth([opts])](#PseudoCli+synth) ⇒ [Promise.<CloudFormationTemplate>](#CloudFormationTemplate) 40 | * [.bootstrap([opts])](#PseudoCli+bootstrap) ⇒ [Promise.<DeployStackResult>](#DeployStackResult) 41 | * [.diff([options])](#PseudoCli+diff) ⇒ Promise.<void> 42 | * [.render([options])](#PseudoCli+render) ⇒ Promise.<string> 43 | * [.deploy([opts])](#PseudoCli+deploy) ⇒ [Promise.<DeployStackResult>](#DeployStackResult) 44 | * [.destroy([opts])](#PseudoCli+destroy) ⇒ Promise.<void> 45 | 46 | 47 | * * * 48 | 49 | 50 | 51 | ### new PseudoCli([opts]) 52 | > **NOTE 1:** for this to work, the cdk bucket must have a respectable CORS policy attached to it. 53 | you can change the CORS policy in [ Properties > Permissions > Edit CORS Configuration ]. 54 | a sample policy to wildcard-allow everything looks like this: 55 | > ```JSON 56 | > [ 57 | > { 58 | > "AllowedHeaders": ["*"], 59 | > "AllowedMethods": ["HEAD","GET","POST","PUT","DELETE"], 60 | > "AllowedOrigins": ["*"] 61 | > } 62 | > ] 63 | > ``` 64 | 65 | > **NOTE 2:** Providing "credentials" is optional but you won't be able to take live actions (e.g deploy and destroy) 66 | 67 | 68 | | Param | Type | Description | 69 | | --- | --- | --- | 70 | | [opts] | [PseudoCliOptions](#PseudoCliOptions) | options for cdk-web's pseudo cli (DEFAULT: undefined) | 71 | 72 | 73 | * * * 74 | 75 | 76 | 77 | ### pseudoCli.synth([opts]) ⇒ [Promise.<CloudFormationTemplate>](#CloudFormationTemplate) 78 | just like native "cdk synth". it synthesizes your stack. 79 | 80 | **Kind**: instance method of [PseudoCli](#PseudoCli) 81 | **Returns**: [Promise.<CloudFormationTemplate>](#CloudFormationTemplate) - the cloudformation template JSON. 82 | **See**: [native-cdk](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.StageSynthesisOptions.html) 83 | for additional parameters acceptable for this object (look for `StageSynthesisOptions` interface in `aws-cdk`) 84 | 85 | | Param | Type | Description | 86 | | --- | --- | --- | 87 | | [opts] | cdk.StageSynthesisOptions | options for stack synthage (DEFAULT: undefined) | 88 | 89 | **Example** 90 | ```JS 91 | const cli = new CDK.PseudoCli({ 92 | stack, 93 | credentials: { 94 | accessKeyId: "your AWS access key goes here", 95 | secretAccessKey: "your AWS secret goes here", 96 | // sessionToken: "in case you have a session token", 97 | }, 98 | }); 99 | // just like executing "cdk synth" 100 | const template = await cli.synth(); 101 | console.log(template); 102 | ``` 103 | 104 | * * * 105 | 106 | 107 | 108 | ### pseudoCli.bootstrap([opts]) ⇒ [Promise.<DeployStackResult>](#DeployStackResult) 109 | bootstraps a live AWS account and takes "special care" for cdk-web 110 | 111 | **Kind**: instance method of [PseudoCli](#PseudoCli) 112 | 113 | | Param | Type | Description | 114 | | --- | --- | --- | 115 | | [opts] | [BootstrapWebEnvironmentOptions](#BootstrapWebEnvironmentOptions) | options for bootstrapage (DEFAULT: undefined) | 116 | 117 | 118 | * * * 119 | 120 | 121 | 122 | ### pseudoCli.diff([options]) ⇒ Promise.<void> 123 | detects changes between the current stack and the previous run of `synth()` 124 | 125 | **Kind**: instance method of [PseudoCli](#PseudoCli) 126 | **Returns**: Promise.<void> - prints diff to console. rejects IFF "fail" is true and changes are detected 127 | **Note**: executes synth() internally to generate the new stack template 128 | 129 | | Param | Type | Description | 130 | | --- | --- | --- | 131 | | [options] | [PseudoCliDiffOptions](#PseudoCliDiffOptions) | options to execute diff with (DEFAULT: undefined) | 132 | 133 | 134 | * * * 135 | 136 | 137 | 138 | ### pseudoCli.render([options]) ⇒ Promise.<string> 139 | visually renders the stack 140 | 141 | **Kind**: instance method of [PseudoCli](#PseudoCli) 142 | **Returns**: Promise.<string> - rendered html string for "html" type 143 | 144 | | Param | Type | Description | 145 | | --- | --- | --- | 146 | | [options] | [PseudoCliRenderOptions](#PseudoCliRenderOptions) | options to execute render with (DEFAULT: undefined) | 147 | 148 | 149 | * * * 150 | 151 | 152 | 153 | ### pseudoCli.deploy([opts]) ⇒ [Promise.<DeployStackResult>](#DeployStackResult) 154 | just like native "cdk deploy". it deploys your stack to a live AWS account 155 | 156 | **Kind**: instance method of [PseudoCli](#PseudoCli) 157 | **See**: [native-cdk](https://github.com/aws/aws-cdk/blob/master/packages/aws-cdk/lib/api/deploy-stack.ts) 158 | for additional parameters acceptable for this object (look for `DeployStackOptions` interface in `aws-cdk`) 159 | 160 | | Param | Type | Description | 161 | | --- | --- | --- | 162 | | [opts] | DeployStackOptions | options for stack deployage (DEFAULT: undefined) | 163 | 164 | **Example** 165 | ```JS 166 | const cli = new CDK.PseudoCli({stack, credentials: { ... }}); 167 | // just like executing "cdk deploy" 168 | await cli.deploy(); 169 | ``` 170 | 171 | * * * 172 | 173 | 174 | 175 | ### pseudoCli.destroy([opts]) ⇒ Promise.<void> 176 | just like native "cdk destroy". it destroys your previously deployed stack in a live AWS account 177 | 178 | **Kind**: instance method of [PseudoCli](#PseudoCli) 179 | **See**: [native-cdk](https://github.com/aws/aws-cdk/blob/master/packages/aws-cdk/lib/api/deploy-stack.ts) 180 | for additional parameters acceptable for this object (look for `DestroyStackOptions` interface in `aws-cdk`) 181 | 182 | | Param | Type | Description | 183 | | --- | --- | --- | 184 | | [opts] | DestroyStackOptions | options for stack destroyage (DEFAULT: undefined) | 185 | 186 | **Example** 187 | ```JS 188 | const cli = new CDK.PseudoCli({stack, credentials: { ... }}); 189 | // just like executing "cdk destroy" 190 | await cli.destroy(); 191 | ``` 192 | 193 | * * * 194 | 195 | 196 | 197 | ## CloudFormationTemplate : Object 198 | JSON representation of a CloudFormation stack 199 | 200 | **Kind**: global typedef 201 | 202 | * * * 203 | 204 | 205 | 206 | ## DeployStackResult : Object 207 | see [native-cdk](https://github.com/aws/aws-cdk/blob/master/packages/aws-cdk/lib/api/deploy-stack.ts) 208 | for full reference for this interface (look for `DeployStackResult` interface in `aws-cdk`) 209 | 210 | **Kind**: global typedef 211 | 212 | * * * 213 | 214 | 215 | 216 | ## PseudoCliOptions : Object 217 | parameters to create a cdk-web pseudo cli 218 | 219 | **Kind**: global typedef 220 | **Properties** 221 | 222 | | Name | Type | Description | 223 | | --- | --- | --- | 224 | | [stack] | cdk.Stack | stack is optional for bootstrapping (DEFAULT: undefined) | 225 | | [credentials] | AWS.Credentials | credentials is optional for synthesizing (DEFAULT: undefined) | 226 | 227 | 228 | * * * 229 | 230 | 231 | 232 | ## PseudoCliDiffOptions : Object 233 | parameters to execute a cli diff operation with 234 | 235 | **Kind**: global typedef 236 | **Properties** 237 | 238 | | Name | Type | Description | 239 | | --- | --- | --- | 240 | | [templatePath] | string | template to compare current stack with (DEFAULT: "") | 241 | | [contextLines] | number | number of contexts per line (DEFAULT: 3) | 242 | | [strict] | boolean | strict mode (DEFAULT: false) | 243 | | [fail] | boolean | fail if differences are detected (DEFAULT: false) | 244 | | [securityOnly] | boolean | only security changes to be noted (DEFAULT: false) | 245 | | [synthOptions] | boolean | optional synth options passed to generate the new stack (DEFAULT: undefined) | 246 | 247 | 248 | * * * 249 | 250 | 251 | 252 | ## PseudoCliRenderOptions : Object 253 | parameters to execute a cli render operation with 254 | 255 | **Kind**: global typedef 256 | **See**: https://visjs.github.io/vis-network/docs/network/ 257 | **Properties** 258 | 259 | | Name | Type | Description | 260 | | --- | --- | --- | 261 | | [synthOptions] | boolean | optional synth options passed to generate the new stack (DEFAULT: undefined) | 262 | | [template] | Object | HTML template to render (DEFAULT: a standalone builtin single html page) | 263 | | [type] | "html" \| "vis.js" | graph render type (DEFAULT: "html") | 264 | 265 | 266 | * * * 267 | 268 | 269 | 270 | ## BootstrapWebEnvironmentOptions : Object 271 | parameters to bootstrap an AWS account for cdk-web 272 | 273 | **Kind**: global typedef 274 | **See**: [native-cdk](https://github.com/aws/aws-cdk/blob/master/packages/aws-cdk/lib/api/bootstrap/bootstrap-props.ts) 275 | for additional parameters acceptable for this object (look for `BootstrapEnvironmentOptions` interface in `aws-cdk`) 276 | **Properties** 277 | 278 | | Name | Type | Description | 279 | | --- | --- | --- | 280 | | [account] | string | the AWS account to be bootstrapped (no-op if already done) (DEFAULT: "") | 281 | | [region] | string | the AWS region in your account to be bootstrapped (DEFAULT: "us-east-1") | 282 | | [cors] | Object | CORS policy on the CDK assets bucket. this is needed for cdk-web to work correctly in browser. (DEFAULT: "[{"AllowedHeaders":["*"],"AllowedMethods":["HEAD","GET","POST","PUT","DELETE"],"AllowedOrigins":["*"]}]") | 283 | 284 | 285 | * * * 286 | 287 | -------------------------------------------------------------------------------- /docs/development.md: -------------------------------------------------------------------------------- 1 | # development 2 | 3 | notes below might be of interest if you are trying to either fix something in the core framework or trying to write a 4 | consumer app or even a cdk web custom construct. 5 | 6 | ## debugging the core framework 7 | 8 | if you encounter errors emitted inside `cdk-web.js`, it might be time to build the core framework in debug mode and 9 | trying to fix cdk web itself. to do so, after you `npm install`, run: 10 | 11 | ```bash 12 | npm run dev:framework 13 | ``` 14 | 15 | this fires up `webpack-dev-server` and any changes to `index.generated.js` or any other bundled files 16 | causes an automatic recompile and you can open up `dist/index.html` in a browser and just refresh after recompile. 17 | 18 | ## debugging the playground app 19 | 20 | if you are trying to work on the playground app or see an example of a sample integration into a react app, you can run 21 | the same setup pretty much. run `npm install && npm run build` and then: 22 | 23 | ```bash 24 | npm run dev:playground 25 | ``` 26 | 27 | ## creating web-compatible constructs 28 | 29 | following methods come to mind when developing web-compatible cdk constructs: 30 | 31 | 1. you can `npm install --save-dev cdk-web` and then write your constructs against it like you would normally do and 32 | replace all `require("aws-cdk-lib/*")`, `require("constructs")`, `require("fs")`, and `require("path")` imports 33 | with `CDK.require` where `CDK` is `require("cdk-web")`; 34 | 35 | 1. you can write your construct against native cdk and use a build tool such as `esbuild` or `webpack` and have your 36 | sources use `cdk-web` as an [alias](https://v4.webpack.js.org/configuration/resolve/#resolvealias) to `aws-cdk-lib`. 37 | `constructs`, `path`, `process`, and `fs` must be aliased too IFF you use them directly in your construct. 38 | 39 | you can write tests for both methods with [jest-puppeteer](https://jestjs.io/docs/puppeteer) and running your code in 40 | browser. just like tests in this repo. switch puppeteer to windowed mode and you have access to breakpoints as well. 41 | 42 | you can also copy the test setup of this repository which uses mocha and chai and executes in both node and browser. 43 | what you would be interested is in `test/_setup.js` and `.mocharc.yml` 44 | coverage is only currently available in node-mode. 45 | -------------------------------------------------------------------------------- /docs/fs.md: -------------------------------------------------------------------------------- 1 | # `CDK.require('fs')` 2 | 3 | cdk-web uses an [in-memory filesystem](https://github.com/streamich/memfs) to 4 | simulate a hard disk cdk would usually use. 5 | 6 | this module implements a subset of Node's fs API. you can use this to inspect 7 | what cdk-web is doing to "disk". 8 | 9 | you can access it by `CDK.require('fs')`. most \*Sync methods are available. 10 | 11 | `CDK.require('path')` and `CDK.require('process')` are also available as Node 12 | core's module substitutes. 13 | 14 | three virtual in-memory directories of interest are: 15 | 16 | - `/cdk` 17 | - `/cdk.out` 18 | - `/tmp` 19 | 20 | `CDK.require('fs').vol.toJSON()` dumps the entire virtual "disk" as a JSON 21 | object. 22 | 23 | > if you reset the disk, you need to reinitialize it yourself with `cdk.json` 24 | > and the bootstrap stack template. 25 | 26 | In browser, you can override the internal filesystem with a custom one. 27 | This needs to happen before cdk web bundle is loaded. 28 | You may assign a existing filesystem to `window.FS`. 29 | -------------------------------------------------------------------------------- /docs/lambda.md: -------------------------------------------------------------------------------- 1 | # Lambda Functions 2 | 3 | AWS lambda functions in cdk have been patched in order to support web bundling and assets. 4 | 5 | To create a lambda function in CDK web you must use the [included filesystem](./fs.md). 6 | 7 | ## Supported Lambda Constructs 8 | 9 | - aws-cdk-lib/aws-lambda 10 | - aws-cdk-lib/aws-lambda-nodejs 11 | 12 | ## Example Nodejs Lambda 13 | 14 | ```JS 15 | // Optional: set directory where we'll build our application 16 | // process.chdir("/app"); 17 | 18 | // AWS CDK sample stack 19 | const fs = CDK.require("fs"); 20 | const cdk = CDK.require("aws-cdk-lib"); 21 | const { NodejsFunction } = CDK.require("aws-cdk-lib/aws-lambda-nodejs"); 22 | const app = new cdk.App(); 23 | const stack = new cdk.Stack(app, "BrowserStack"); 24 | 25 | // Some shared file we'll include in the lambda entrypoint 26 | const lib = `\ 27 | const lib = 'some value'; 28 | module.exports = { 29 | lib, 30 | } 31 | `; 32 | // An entrypoint file 33 | const code = `\ 34 | const lib = require('./lib'); 35 | module.exports = function handler(event, context) { 36 | console.log(event, lib); 37 | } 38 | `; 39 | // Sample empty package.json contents 40 | const packageJson = {}; 41 | // Sample empty package-lock.json file 42 | const packageLock = { 43 | name: "sample-web-construct", 44 | version: "1.0.0", 45 | lockfileVersion: 2, 46 | requires: true, 47 | packages: {}, 48 | }; 49 | // Write all the files 50 | fs.mkdirSync("./lambda", { recursive: true }); 51 | fs.writeFileSync("./lambda/lib.js", lib); 52 | fs.writeFileSync("./lambda/index.js", code); 53 | fs.writeFileSync("./package-lock.json", JSON.stringify(packageLock)); 54 | fs.writeFileSync("./package.json", JSON.stringify(packageJson)); 55 | 56 | (async () => { 57 | new NodejsFunction(stack, "Lambda", { 58 | entry: "./lambda/index.js", 59 | }); 60 | const assembly = await app.synth(); 61 | console.log(assembly); 62 | })(); 63 | ``` 64 | -------------------------------------------------------------------------------- /docs/logs.md: -------------------------------------------------------------------------------- 1 | # cdk logs and console redirection 2 | 3 | cdk-web captures all logs emitted from cdk into an [EventEmitter](https://nodejs.org/api/events.html#class-eventemitter). 4 | you can use this object to access all logs from the main library like so: 5 | 6 | ```JS 7 | const CDK = require("cdk-web") 8 | CDK.emitter.on('console', message => { 9 | // do something with the logs emitted 10 | }); 11 | CDK.emitter.on('stderr', message => { 12 | // do something with the logs emitted 13 | }); 14 | CDK.emitter.on('stdout', message => { 15 | // do something with the logs emitted 16 | }); 17 | ``` 18 | 19 | wildcard subscription to all events is also possible thanks to [EventEmitter2](https://github.com/EventEmitter2/EventEmitter2). 20 | take a look at their official API. `CDK.emitter` is an instance of `EventEmitter2`. 21 | 22 | > by default you should not see anything logged in console in your browser. if you do see logs, please open up an issue. 23 | -------------------------------------------------------------------------------- /docs/sample-construct/,gitignore: -------------------------------------------------------------------------------- 1 | bundle.js 2 | 3 | # Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,macos,windows 4 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode,macos,windows 5 | 6 | ### macOS ### 7 | # General 8 | .DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Icon must end with two \r 13 | Icon 14 | 15 | 16 | # Thumbnails 17 | ._* 18 | 19 | # Files that might appear in the root of a volume 20 | .DocumentRevisions-V100 21 | .fseventsd 22 | .Spotlight-V100 23 | .TemporaryItems 24 | .Trashes 25 | .VolumeIcon.icns 26 | .com.apple.timemachine.donotpresent 27 | 28 | # Directories potentially created on remote AFP share 29 | .AppleDB 30 | .AppleDesktop 31 | Network Trash Folder 32 | Temporary Items 33 | .apdisk 34 | 35 | ### Node ### 36 | # Logs 37 | logs 38 | *.log 39 | npm-debug.log* 40 | yarn-debug.log* 41 | yarn-error.log* 42 | lerna-debug.log* 43 | .pnpm-debug.log* 44 | 45 | # Diagnostic reports (https://nodejs.org/api/report.html) 46 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 47 | 48 | # Runtime data 49 | pids 50 | *.pid 51 | *.seed 52 | *.pid.lock 53 | 54 | # Directory for instrumented libs generated by jscoverage/JSCover 55 | lib-cov 56 | 57 | # Coverage directory used by tools like istanbul 58 | coverage 59 | *.lcov 60 | 61 | # nyc test coverage 62 | .nyc_output 63 | 64 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 65 | .grunt 66 | 67 | # Bower dependency directory (https://bower.io/) 68 | bower_components 69 | 70 | # node-waf configuration 71 | .lock-wscript 72 | 73 | # Compiled binary addons (https://nodejs.org/api/addons.html) 74 | build/Release 75 | 76 | # Dependency directories 77 | node_modules/ 78 | jspm_packages/ 79 | 80 | # Snowpack dependency directory (https://snowpack.dev/) 81 | web_modules/ 82 | 83 | # TypeScript cache 84 | *.tsbuildinfo 85 | 86 | # Optional npm cache directory 87 | .npm 88 | 89 | # Optional eslint cache 90 | .eslintcache 91 | 92 | # Optional stylelint cache 93 | .stylelintcache 94 | 95 | # Microbundle cache 96 | .rpt2_cache/ 97 | .rts2_cache_cjs/ 98 | .rts2_cache_es/ 99 | .rts2_cache_umd/ 100 | 101 | # Optional REPL history 102 | .node_repl_history 103 | 104 | # Output of 'npm pack' 105 | *.tgz 106 | 107 | # Yarn Integrity file 108 | .yarn-integrity 109 | 110 | # dotenv environment variable files 111 | .env 112 | .env.development.local 113 | .env.test.local 114 | .env.production.local 115 | .env.local 116 | 117 | # parcel-bundler cache (https://parceljs.org/) 118 | .cache 119 | .parcel-cache 120 | 121 | # Next.js build output 122 | .next 123 | out 124 | 125 | # Nuxt.js build / generate output 126 | .nuxt 127 | dist 128 | 129 | # Gatsby files 130 | .cache/ 131 | # Comment in the public line in if your project uses Gatsby and not Next.js 132 | # https://nextjs.org/blog/next-9-1#public-directory-support 133 | # public 134 | 135 | # vuepress build output 136 | .vuepress/dist 137 | 138 | # vuepress v2.x temp and cache directory 139 | .temp 140 | 141 | # Docusaurus cache and generated files 142 | .docusaurus 143 | 144 | # Serverless directories 145 | .serverless/ 146 | 147 | # FuseBox cache 148 | .fusebox/ 149 | 150 | # DynamoDB Local files 151 | .dynamodb/ 152 | 153 | # TernJS port file 154 | .tern-port 155 | 156 | # Stores VSCode versions used for testing VSCode extensions 157 | .vscode-test 158 | 159 | # yarn v2 160 | .yarn/cache 161 | .yarn/unplugged 162 | .yarn/build-state.yml 163 | .yarn/install-state.gz 164 | .pnp.* 165 | 166 | ### Node Patch ### 167 | # Serverless Webpack directories 168 | .webpack/ 169 | 170 | # Optional stylelint cache 171 | 172 | # SvelteKit build / generate output 173 | .svelte-kit 174 | 175 | ### VisualStudioCode ### 176 | .vscode/* 177 | !.vscode/settings.json 178 | !.vscode/tasks.json 179 | !.vscode/launch.json 180 | !.vscode/extensions.json 181 | !.vscode/*.code-snippets 182 | 183 | # Local History for Visual Studio Code 184 | .history/ 185 | 186 | # Built Visual Studio Code Extensions 187 | *.vsix 188 | 189 | ### VisualStudioCode Patch ### 190 | # Ignore all local history of files 191 | .history 192 | .ionide 193 | 194 | # Support for Project snippet scope 195 | 196 | ### Windows ### 197 | # Windows thumbnail cache files 198 | Thumbs.db 199 | Thumbs.db:encryptable 200 | ehthumbs.db 201 | ehthumbs_vista.db 202 | 203 | # Dump file 204 | *.stackdump 205 | 206 | # Folder config file 207 | [Dd]esktop.ini 208 | 209 | # Recycle Bin used on file shares 210 | $RECYCLE.BIN/ 211 | 212 | # Windows Installer files 213 | *.cab 214 | *.msi 215 | *.msix 216 | *.msm 217 | *.msp 218 | 219 | # Windows shortcuts 220 | *.lnk 221 | 222 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,macos,windows 223 | -------------------------------------------------------------------------------- /docs/sample-construct/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "debug test.js", 6 | "request": "launch", 7 | "runtimeArgs": [ 8 | "run-script", 9 | "test" 10 | ], 11 | "runtimeExecutable": "npm", 12 | "skipFiles": [ 13 | "/**" 14 | ], 15 | "type": "pwa-node", 16 | "preLaunchTask": "npm-serve" 17 | }, 18 | ] 19 | } -------------------------------------------------------------------------------- /docs/sample-construct/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "label": "npm-serve", 6 | "type": "npm", 7 | "script": "serve", 8 | "group": { 9 | "kind": "test", 10 | "isDefault": true 11 | }, 12 | "isBackground": true, 13 | "problemMatcher": { 14 | "owner": "custom", 15 | "pattern": { 16 | "regexp": "^$" 17 | }, 18 | "background": { 19 | "activeOnStart": true, 20 | "beginsPattern": "compiling...", 21 | "endsPattern": "compiled .*" 22 | } 23 | } 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /docs/sample-construct/README.md: -------------------------------------------------------------------------------- 1 | # sample-web-construct 2 | 3 | this folder is a sample webpack 5 project to get you started building constructs for `cdk-web`. 4 | 5 | this setup allows you to have **breakpoints in both your node tests and puppeteer** tests at the same time. 6 | 7 | in `vscode` launch its debugger. it should break both in vscode and puppeteer (don't forget to let the breakpoint go!). 8 | 9 | if you are using `ndb`, you can run `npm serve` in one shell and in another run `npx --yes ndb` to launch ndb. in `ndb` 10 | then go ahead and hit the play button next to "test" under "npm scripts" section. 11 | 12 | it is recommended that you copy this folder outside of `cdk-web`'s repository and work off-tree so webpack does not get 13 | confused with all the different configurations available in the repo. 14 | -------------------------------------------------------------------------------- /docs/sample-construct/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // this launches puppeteer in devtools mode if a debugger is present in host 2 | const isDebugger = require("./utils/is-debugger"); 3 | 4 | module.exports = { 5 | launch: { 6 | devtools: isDebugger, 7 | product: "chrome", 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /docs/sample-construct/jest.config.js: -------------------------------------------------------------------------------- 1 | // this mainly controls test timeouts. you don't want puppeteer devtools to close because jest timed out. 2 | const isDebugger = require("./utils/is-debugger"); 3 | 4 | module.exports = { 5 | preset: "jest-puppeteer", 6 | verbose: isDebugger, 7 | testTimeout: isDebugger ? 1e9 : 1e5, 8 | }; 9 | -------------------------------------------------------------------------------- /docs/sample-construct/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sample-web-construct", 3 | "version": "1.0.0", 4 | "description": "this is a sample setup to develop a web-compatible CDK construct in JavaScript", 5 | "main": "./sample-web-construct.js", 6 | "scripts": { 7 | "test": "jest", 8 | "serve": "webpack serve" 9 | }, 10 | "keywords": [ 11 | "cdk", 12 | "cdk-web" 13 | ], 14 | "author": "", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "aws-sdk": "^2.1088.0", 18 | "cdk-web": "^2.0.7", 19 | "jest": "^27.5.1", 20 | "jest-puppeteer": "^6.1.0", 21 | "puppeteer": "^13.5.0", 22 | "webpack": "^5.70.0", 23 | "webpack-cli": "^4.9.2", 24 | "webpack-dev-server": "^4.7.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /docs/sample-construct/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/sample-construct/sample-web-construct.js: -------------------------------------------------------------------------------- 1 | // this is our actual construct. this is both node and browser compatible. 2 | // for browser you can run "npx webpack" and grab the output "bundle.js". 3 | // for nodejs, you can require(".../index.js") of this package as usual. 4 | 5 | const CDK = require("cdk-web"); 6 | 7 | const cdk = CDK.require("aws-cdk-lib"); 8 | const ec2 = CDK.require("aws-cdk-lib/aws-ec2"); 9 | const sqs = CDK.require("aws-cdk-lib/aws-sqs"); 10 | const sns = CDK.require("aws-cdk-lib/aws-sns"); 11 | const s3 = CDK.require("aws-cdk-lib/aws-s3"); 12 | const app = new cdk.App(); 13 | const stack = new cdk.Stack(app, "BrowserStack"); 14 | const vpc = new ec2.Vpc(stack, "VPC"); 15 | const queue = new sqs.Queue(stack, "Queue"); 16 | const topic = new sns.Topic(stack, "Topic"); 17 | const bucket = new s3.Bucket(stack, "Bucket"); 18 | const assembly = app.synth(); 19 | 20 | console.log(assembly); 21 | -------------------------------------------------------------------------------- /docs/sample-construct/sample-web-construct.test.js: -------------------------------------------------------------------------------- 1 | const isDebugger = require("./utils/is-debugger"); 2 | 3 | describe("breakpoint test", () => { 4 | it("should break in both host and puppeteer", async () => { 5 | const value = await page.evaluate(async function () { 6 | const localValue = "test"; 7 | debugger; // this should break in puppeteer's devtools window 8 | return localValue; 9 | }); 10 | debugger; // this should break in your host (e.g vscode, ndb, etc.) 11 | expect(value).toBe("test"); 12 | }); 13 | 14 | beforeAll(async () => { 15 | if (!isDebugger) return; 16 | // webpack dev server is hosted here. you need to run "npm serve" if this is 17 | // failing on you. it should be configured to launch automatically in vscode 18 | try { 19 | await page.goto("http://localhost:9000/"); 20 | } catch { 21 | console.error("RUN: 'npm serve' before running tests if you want breakpoints"); 22 | throw new Error("debugger found but webpack dev server is not available"); 23 | } 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /docs/sample-construct/utils/browser-aws.js: -------------------------------------------------------------------------------- 1 | /** this shim is necessary for scripts to work both in node and browser */ 2 | module.exports = window.AWS; 3 | -------------------------------------------------------------------------------- /docs/sample-construct/utils/browser-cdk.js: -------------------------------------------------------------------------------- 1 | /** this shim is necessary for scripts to work both in node and browser */ 2 | module.exports = window.CDK; -------------------------------------------------------------------------------- /docs/sample-construct/utils/is-debugger.js: -------------------------------------------------------------------------------- 1 | /** this is true if a debugger is present. an example of a debugger is "ndb" by Chrome Labs or vscode's debugger. */ 2 | const isDebugger = process.env.NODE_OPTIONS && process.env.NODE_OPTIONS.search(/(ndb|vscode)/g) > 0; 3 | module.exports = isDebugger; 4 | -------------------------------------------------------------------------------- /docs/sample-construct/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | node: { global: true }, 5 | mode: "development", 6 | entry: "./sample-web-construct.js", 7 | output: { 8 | path: __dirname, 9 | filename: "bundle.js", 10 | library: { 11 | name: "sample-web-construct", 12 | type: "umd", 13 | }, 14 | }, 15 | resolve: { 16 | alias: { 17 | "cdk-web": path.resolve(__dirname, "utils/browser-cdk.js"), 18 | "aws-sdk": path.resolve(__dirname, "utils/browser-aws.js"), 19 | }, 20 | }, 21 | devServer: { 22 | static: [ 23 | { directory: path.join(__dirname, "public") }, 24 | { directory: path.join(__dirname, "node_modules/aws-sdk/dist") }, 25 | { directory: path.join(__dirname, "node_modules/cdk-web/dist") }, 26 | ], 27 | compress: true, 28 | port: 9000, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /docs/types.md: -------------------------------------------------------------------------------- 1 | # cdk types and cdk-web's `index.d.ts` 2 | 3 | if you are in a node-like environment, you do not need to read this guide. 4 | this is for users who include cdk-web directly by a `