From 019a15b6632b284c780484880f24c6d79670d2cf Mon Sep 17 00:00:00 2001 From: Julien Poissonnier Date: Wed, 13 Mar 2024 17:10:29 +0100 Subject: [PATCH] Update monorepo example --- nx-monorepo/README.md | 107 +++++++++++------- .../s3folder/index.ts | 5 + nx-monorepo/components/s3folder/package.json | 12 ++ .../s3folder/tsconfig.json | 0 .../website-deploy/index.ts | 13 ++- .../components/website-deploy/package.json | 16 +++ .../website-deploy/tsconfig.json | 0 nx-monorepo/infra/index.ts | 6 +- nx-monorepo/infra/package.json | 13 ++- nx-monorepo/nx.json | 24 ++-- nx-monorepo/package.json | 7 +- nx-monorepo/packages/s3folder/package.json | 12 -- .../packages/website-deploy/package.json | 16 --- nx-monorepo/packages/website/package.json | 15 --- nx-monorepo/packages/website/tsconfig.json | 3 - nx-monorepo/website/README.md | 9 ++ .../{packages => }/website/astro.config.mjs | 0 nx-monorepo/website/package.json | 22 ++++ .../{packages => }/website/public/favicon.svg | 0 .../website/src/components/Card.astro | 0 .../{packages => }/website/src/env.d.ts | 0 .../website/src/layouts/Layout.astro | 0 .../website/src/pages/index.astro | 0 nx-monorepo/website/tsconfig.json | 3 + 24 files changed, 171 insertions(+), 112 deletions(-) rename nx-monorepo/{packages => components}/s3folder/index.ts (91%) create mode 100644 nx-monorepo/components/s3folder/package.json rename nx-monorepo/{packages => components}/s3folder/tsconfig.json (100%) rename nx-monorepo/{packages => components}/website-deploy/index.ts (68%) create mode 100644 nx-monorepo/components/website-deploy/package.json rename nx-monorepo/{packages => components}/website-deploy/tsconfig.json (100%) delete mode 100644 nx-monorepo/packages/s3folder/package.json delete mode 100644 nx-monorepo/packages/website-deploy/package.json delete mode 100644 nx-monorepo/packages/website/package.json delete mode 100644 nx-monorepo/packages/website/tsconfig.json create mode 100644 nx-monorepo/website/README.md rename nx-monorepo/{packages => }/website/astro.config.mjs (100%) create mode 100644 nx-monorepo/website/package.json rename nx-monorepo/{packages => }/website/public/favicon.svg (100%) rename nx-monorepo/{packages => }/website/src/components/Card.astro (100%) rename nx-monorepo/{packages => }/website/src/env.d.ts (100%) rename nx-monorepo/{packages => }/website/src/layouts/Layout.astro (100%) rename nx-monorepo/{packages => }/website/src/pages/index.astro (100%) create mode 100644 nx-monorepo/website/tsconfig.json diff --git a/nx-monorepo/README.md b/nx-monorepo/README.md index 9258efd5d..f509bec31 100644 --- a/nx-monorepo/README.md +++ b/nx-monorepo/README.md @@ -4,10 +4,10 @@ This example shows how to use Nx to organize a mono repo and track dependencies The example consists of the following components: -- packages/s3folder: a [ComponentResource](https://www.pulumi.com/docs/concepts/resources/components/) that manages a S3 bucket and its access policies. -- packages/website-deploy: [ComponentResource](https://www.pulumi.com/docs/concepts/resources/components/) resource that manages files in a S3 bucket -- packages/website: A website built with [Astro](https://astro.build). -- infra: Pulumi program that uses the `s3folder` and `website-deploy` resources to deploy the generated website. +- **components/s3folder**: A [Component Resource](https://www.pulumi.com/docs/concepts/resources/components/) that manages a S3 bucket and its access policies. +- **components/website-deploy**: A [Component Resource](https://www.pulumi.com/docs/concepts/resources/components/) resource that manages files in a S3 bucket +- **website**: A website built with [Astro](https://astro.build). +- **infra**: A Pulumi program that uses the `s3folder` and `website-deploy` resources to deploy the generated `website`. The components are written in TypeScript and have a build step to compile them. @@ -59,11 +59,11 @@ npx nx deploy infra ``` ``` - ✔ 4/4 dependent project tasks succeeded [0 read from cache] + ✔ 3/3 dependent project tasks succeeded [0 read from cache] Hint: you can run the command with --verbose to see the full dependent project outputs -——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— +————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— > nx run infra:build @@ -79,55 +79,53 @@ npx nx deploy infra > infra@1.0.0 deploy > pulumi up --stack dev -The stack 'dev' does not exist. - -If you would like to create this stack now, please press , otherwise press ^C: -Created stack 'dev' Previewing update (dev) -View in Browser (Ctrl+O): https://app.pulumi.com/julienp/nx-monorepo/dev/previews/fc7630fd-7dc4-4c7e-baa0-3d6e014fc90a +View in Browser (Ctrl+O): https://app.pulumi.com/v-julien-pulumi-corp/nx-monorepo/dev/previews/19e33681-e8fa-49f0-b830-494cfd996c50 Type Name Plan + pulumi:pulumi:Stack nx-monorepo-dev create + ├─ pulumi:examples:WebsiteDeploy my-website create - + │ └─ aws:s3:BucketObject index.html create + + │ ├─ aws:s3:BucketObject index.html create + + │ └─ aws:s3:BucketObject favicon.svg create + └─ pulumi:examples:S3Folder my-folder create + ├─ aws:s3:Bucket my-folder create + ├─ aws:s3:BucketPublicAccessBlock public-access-block create + └─ aws:s3:BucketPolicy bucketPolicy create Outputs: + bucketId : output websiteUrl: output Resources: - + 7 to create + + 8 to create Do you want to perform this update? yes Updating (dev) -View in Browser (Ctrl+O): https://app.pulumi.com/julienp/nx-monorepo/dev/updates/1 +View in Browser (Ctrl+O): https://app.pulumi.com/v-julien-pulumi-corp/nx-monorepo/dev/updates/25 Type Name Status + pulumi:pulumi:Stack nx-monorepo-dev created (6s) - + ├─ pulumi:examples:S3Folder my-folder created (5s) - + │ ├─ aws:s3:Bucket my-folder created (1s) - + │ ├─ aws:s3:BucketPublicAccessBlock public-access-block created (0.76s) - + │ └─ aws:s3:BucketPolicy bucketPolicy created (0.85s) - + └─ pulumi:examples:WebsiteDeploy my-website created (2s) - + └─ aws:s3:BucketObject index.html created (0.80s) + + ├─ pulumi:examples:WebsiteDeploy my-website created (1s) + + │ ├─ aws:s3:BucketObject favicon.svg created (0.94s) + + │ └─ aws:s3:BucketObject index.html created (1s) + + └─ pulumi:examples:S3Folder my-folder created (5s) + + ├─ aws:s3:Bucket my-folder created (2s) + + ├─ aws:s3:BucketPublicAccessBlock public-access-block created (0.85s) + + └─ aws:s3:BucketPolicy bucketPolicy created (1s) Outputs: - websiteUrl: "my-folder-a64ab3c.s3-website.eu-central-1.amazonaws.com" + bucketId : "my-folder-c073a6e" + websiteUrl: "http://my-folder-c073a6e.s3-website.eu-central-1.amazonaws.com" Resources: - + 7 created - -Duration: 9s + + 8 created +Duration: 10s -——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— - NX Successfully ran target deploy for project infra and 5 tasks it depends on (42s) +——————————————————————————————————————————————————————————————————————————— ``` To destroy the stack, we run: @@ -137,6 +135,20 @@ npx nx destroy infra ``` ``` + ✔ 2/2 dependent project tasks succeeded [2 read from cache] + + Hint: you can run the command with --verbose to see the full dependent project outputs + +————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— + + +> nx run infra:build [existing outputs match the cache, left as is] + + +> infra@1.0.0 build +> tsc + + > nx run infra:destroy @@ -145,49 +157,56 @@ npx nx destroy infra Previewing destroy (dev) -View in Browser (Ctrl+O): https://app.pulumi.com/julienp/nx-monorepo/dev/previews/b640cce7-a9df-49a5-b004-3fbdbe65c4eb +View in Browser (Ctrl+O): https://app.pulumi.com/v-julien-pulumi-corp/nx-monorepo/dev/previews/8cfe44be-b3e1-4858-8d48-8bf3223a344c Type Name Plan - pulumi:pulumi:Stack nx-monorepo-dev delete - ├─ pulumi:examples:S3Folder my-folder delete - - │ ├─ aws:s3:BucketPolicy bucketPolicy delete - │ ├─ aws:s3:BucketPublicAccessBlock public-access-block delete - - │ └─ aws:s3:Bucket my-folder delete + - │ ├─ aws:s3:Bucket my-folder delete + - │ └─ aws:s3:BucketPolicy bucketPolicy delete - └─ pulumi:examples:WebsiteDeploy my-website delete + - ├─ aws:s3:BucketObject favicon.svg delete - └─ aws:s3:BucketObject index.html delete Outputs: - - websiteUrl: "my-folder-a64ab3c.s3-website.eu-central-1.amazonaws.com" + - bucketId : "my-folder-c073a6e" + - websiteUrl: "http://my-folder-c073a6e.s3-website.eu-central-1.amazonaws.com" Resources: - - 7 to delete + - 8 to delete Do you want to perform this destroy? yes Destroying (dev) -View in Browser (Ctrl+O): https://app.pulumi.com/julienp/nx-monorepo/dev/updates/2 +View in Browser (Ctrl+O): https://app.pulumi.com/v-julien-pulumi-corp/nx-monorepo/dev/updates/26 Type Name Status - - pulumi:pulumi:Stack nx-monorepo-dev deleted (0.31s) - - ├─ pulumi:examples:WebsiteDeploy my-website deleted (0.60s) - - │ └─ aws:s3:BucketObject index.html deleted (0.88s) - - └─ pulumi:examples:S3Folder my-folder deleted (0.82s) - - ├─ aws:s3:BucketPolicy bucketPolicy deleted (0.96s) - - ├─ aws:s3:BucketPublicAccessBlock public-access-block deleted (0.91s) - - └─ aws:s3:Bucket my-folder deleted (0.74s) + - pulumi:pulumi:Stack nx-monorepo-dev deleted (0.25s) + - ├─ pulumi:examples:WebsiteDeploy my-website deleted (0.31s) + - │ ├─ aws:s3:BucketObject favicon.svg deleted (1s) + - │ └─ aws:s3:BucketObject index.html deleted (1s) + - └─ pulumi:examples:S3Folder my-folder deleted (0.56s) + - ├─ aws:s3:BucketPolicy bucketPolicy deleted (0.86s) + - ├─ aws:s3:BucketPublicAccessBlock public-access-block deleted (0.88s) + - └─ aws:s3:Bucket my-folder deleted (0.71s) Outputs: - - websiteUrl: "my-folder-a64ab3c.s3-website.eu-central-1.amazonaws.com" + - bucketId : "my-folder-c073a6e" + - websiteUrl: "http://my-folder-c073a6e.s3-website.eu-central-1.amazonaws.com" Resources: - - 7 deleted + - 8 deleted -Duration: 7s +Duration: 8s The resources in the stack have been deleted, but the history and configuration associated with the stack are still maintained. If you want to remove the stack completely, run `pulumi stack rm dev`. -——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— +————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— + + NX Successfully ran target destroy for project infra and 3 tasks it depends on (33s) + +Nx read the output from the cache instead of running the command for 3 out of 4 tasks. - NX Successfully ran target destroy for project infra (18s) ``` diff --git a/nx-monorepo/packages/s3folder/index.ts b/nx-monorepo/components/s3folder/index.ts similarity index 91% rename from nx-monorepo/packages/s3folder/index.ts rename to nx-monorepo/components/s3folder/index.ts index 6a736fd8b..31253c14c 100644 --- a/nx-monorepo/packages/s3folder/index.ts +++ b/nx-monorepo/components/s3folder/index.ts @@ -5,6 +5,11 @@ export class S3Folder extends pulumi.ComponentResource { readonly bucket: pulumi.Output; readonly websiteUrl: pulumi.Output; + /** + * S3Folder manages a S3 bucket and configures it to serve a static website. + * @param bucketName The name of the S3 bucket. + * @param opts + */ constructor(bucketName: string, opts: pulumi.ComponentResourceOptions) { super("pulumi:examples:S3Folder", bucketName, {}, opts); diff --git a/nx-monorepo/components/s3folder/package.json b/nx-monorepo/components/s3folder/package.json new file mode 100644 index 000000000..35b647808 --- /dev/null +++ b/nx-monorepo/components/s3folder/package.json @@ -0,0 +1,12 @@ +{ + "name": "s3folder", + "main": "dist/index.js", + "version": "1.0.0", + "dependencies": { + "@pulumi/pulumi": "latest", + "@pulumi/aws": "^6.23.0" + }, + "scripts": { + "build": "tsc" + } +} \ No newline at end of file diff --git a/nx-monorepo/packages/s3folder/tsconfig.json b/nx-monorepo/components/s3folder/tsconfig.json similarity index 100% rename from nx-monorepo/packages/s3folder/tsconfig.json rename to nx-monorepo/components/s3folder/tsconfig.json diff --git a/nx-monorepo/packages/website-deploy/index.ts b/nx-monorepo/components/website-deploy/index.ts similarity index 68% rename from nx-monorepo/packages/website-deploy/index.ts rename to nx-monorepo/components/website-deploy/index.ts index 785687528..cd45adf35 100644 --- a/nx-monorepo/packages/website-deploy/index.ts +++ b/nx-monorepo/components/website-deploy/index.ts @@ -5,14 +5,22 @@ import * as mime from "mime"; import * as path from "path"; export class WebsiteDeploy extends pulumi.ComponentResource { - constructor(name: string, bucket: pulumi.Input, directory: string, opts: pulumi.ComponentResourceOptions) { + + /** + * WebsiteDeploy uploads files from a directory to an S3 bucket. + * @param name The name of the resource. + * @param bucket The S3 bucket to upload files to. + * @param directory The directory to upload files from. + * @param opts + */ + constructor(name: string, bucketId: pulumi.Input, directory: string, opts: pulumi.ComponentResourceOptions) { super("pulumi:examples:WebsiteDeploy", name, {}, opts); // For each file in the directory, create an S3 object stored in `bucket` walk(directory, (filePath: string) => { const name = path.relative(directory, filePath); let object = new aws.s3.BucketObject(name, { - bucket: bucket, + bucket: bucketId, source: new pulumi.asset.FileAsset(filePath), // use FileAsset to point to a file contentType: mime.getType(filePath) || undefined, // set the MIME type of the file }, { parent: this }); // specify resource parent @@ -20,6 +28,7 @@ export class WebsiteDeploy extends pulumi.ComponentResource { } } +// Walk recursively walks the file tree at dir and calls callback for each file found. function walk(dir: string, callback: (path: string) => void) { for (let f of fs.readdirSync(dir)) { let filePath = path.join(dir, f); diff --git a/nx-monorepo/components/website-deploy/package.json b/nx-monorepo/components/website-deploy/package.json new file mode 100644 index 000000000..df1c3a45f --- /dev/null +++ b/nx-monorepo/components/website-deploy/package.json @@ -0,0 +1,16 @@ +{ + "name": "website-deploy", + "main": "dist/index.js", + "version": "1.0.0", + "dependencies": { + "@pulumi/aws": "^6.23.0", + "@pulumi/pulumi": "latest", + "mime": "^2.6.0" + }, + "scripts": { + "build": "tsc" + }, + "devDependencies": { + "@types/mime": "^3.0.4" + } +} \ No newline at end of file diff --git a/nx-monorepo/packages/website-deploy/tsconfig.json b/nx-monorepo/components/website-deploy/tsconfig.json similarity index 100% rename from nx-monorepo/packages/website-deploy/tsconfig.json rename to nx-monorepo/components/website-deploy/tsconfig.json diff --git a/nx-monorepo/infra/index.ts b/nx-monorepo/infra/index.ts index 582f95d19..8149ecd7d 100644 --- a/nx-monorepo/infra/index.ts +++ b/nx-monorepo/infra/index.ts @@ -4,9 +4,11 @@ import * as websiteDeploy from "website-deploy" // Create the folder to hold our website files const folder = new s3folder.S3Folder("my-folder", {}) + +export const bucketId = folder.bucket.id; export const websiteUrl = folder.websiteUrl.apply(url => `http://${url}`) // Deploy the website to the folder -const websiteFiles = path.join("..", "..", "packages", "website", "dist") -const website = new websiteDeploy.WebsiteDeploy("my-website", folder.bucket, websiteFiles, {}) +const websiteFiles = path.join("..", "..", "website", "dist") +const website = new websiteDeploy.WebsiteDeploy("my-website", bucketId, websiteFiles, {}) diff --git a/nx-monorepo/infra/package.json b/nx-monorepo/infra/package.json index 992c7f7b4..57182150c 100644 --- a/nx-monorepo/infra/package.json +++ b/nx-monorepo/infra/package.json @@ -5,21 +5,28 @@ "dependencies": { "@pulumi/pulumi": "latest", "s3folder": "*", - "website-deploy": "*", - "website": "*" + "website": "*", + "website-deploy": "*" }, "scripts": { "build": "tsc", "deploy": "pulumi up --stack dev", - "destroy": "pulumi destroy --stack dev" + "destroy": "pulumi destroy --stack dev", + "refresh": "pulumi refresh --stack dev" }, "nx": { "targets": { "deploy": { + "cache": true, "dependsOn": [ "build", "website:generate" ] + }, + "destroy": { + "dependsOn": [ + "build" + ] } } } diff --git a/nx-monorepo/nx.json b/nx-monorepo/nx.json index 24e032e41..7efc3f384 100644 --- a/nx-monorepo/nx.json +++ b/nx-monorepo/nx.json @@ -1,15 +1,15 @@ { - "extends": "nx/presets/npm.json", - "$schema": "./node_modules/nx/schemas/nx-schema.json", - "targetDefaults": { - "build": { - "cache": true, - "dependsOn": [ - "^build" - ], - "outputs": [ - "{projectRoot}/dist" - ] + "extends": "nx/presets/npm.json", + "$schema": "./node_modules/nx/schemas/nx-schema.json", + "targetDefaults": { + "build": { + "cache": true, + "dependsOn": [ + "^build" + ], + "outputs": [ + "{projectRoot}/dist" + ] + } } - } } \ No newline at end of file diff --git a/nx-monorepo/package.json b/nx-monorepo/package.json index 9ceabfa2b..9a29d40b0 100644 --- a/nx-monorepo/package.json +++ b/nx-monorepo/package.json @@ -6,10 +6,11 @@ "devDependencies": { "@nx/js": "18.0.5", "nx": "18.0.5", - "typescript": "^5.3.3" + "typescript": "^5.4.2" }, "workspaces": [ - "packages/*", - "infra" + "components/*", + "infra", + "website" ] } \ No newline at end of file diff --git a/nx-monorepo/packages/s3folder/package.json b/nx-monorepo/packages/s3folder/package.json deleted file mode 100644 index 890e9109e..000000000 --- a/nx-monorepo/packages/s3folder/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "s3folder", - "main": "dist/index.js", - "version": "1.0.0", - "dependencies": { - "@pulumi/pulumi": "latest", - "@pulumi/aws": "^6.23.0" - }, - "scripts": { - "build": "tsc" - } -} \ No newline at end of file diff --git a/nx-monorepo/packages/website-deploy/package.json b/nx-monorepo/packages/website-deploy/package.json deleted file mode 100644 index 74a85d2aa..000000000 --- a/nx-monorepo/packages/website-deploy/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "website-deploy", - "main": "dist/index.js", - "version": "1.0.0", - "dependencies": { - "@pulumi/aws": "^6.23.0", - "@pulumi/pulumi": "latest", - "mime": "^2.6.0" - }, - "scripts": { - "build": "tsc" - }, - "devDependencies": { - "@types/mime": "^3.0.4" - } -} \ No newline at end of file diff --git a/nx-monorepo/packages/website/package.json b/nx-monorepo/packages/website/package.json deleted file mode 100644 index 1ab7b2474..000000000 --- a/nx-monorepo/packages/website/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "website", - "version": "1.0.0", - "scripts": { - "dev": "astro dev", - "start": "astro dev", - "generate": "astro check && astro build", - "preview": "astro preview", - "astro": "astro" - }, - "dependencies": { - "astro": "^4.5.2", - "@astrojs/check": "^0.5.8" - } -} \ No newline at end of file diff --git a/nx-monorepo/packages/website/tsconfig.json b/nx-monorepo/packages/website/tsconfig.json deleted file mode 100644 index 4082f16a5..000000000 --- a/nx-monorepo/packages/website/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../tsconfig.json" -} diff --git a/nx-monorepo/website/README.md b/nx-monorepo/website/README.md new file mode 100644 index 000000000..e86ac628b --- /dev/null +++ b/nx-monorepo/website/README.md @@ -0,0 +1,9 @@ +# Website + +This website uses [Astro](https://astro.build) to generate static HTML. + +It was created with: + +```sh +npm create astro@latest -- --template basics +``` diff --git a/nx-monorepo/packages/website/astro.config.mjs b/nx-monorepo/website/astro.config.mjs similarity index 100% rename from nx-monorepo/packages/website/astro.config.mjs rename to nx-monorepo/website/astro.config.mjs diff --git a/nx-monorepo/website/package.json b/nx-monorepo/website/package.json new file mode 100644 index 000000000..476f6bfd9 --- /dev/null +++ b/nx-monorepo/website/package.json @@ -0,0 +1,22 @@ +{ + "name": "website", + "version": "1.0.0", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "generate": "astro check && astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "astro": "^4.5.2", + "@astrojs/check": "^0.5.8" + }, + "nx": { + "targets": { + "generate": { + "cache": true + } + } + } +} \ No newline at end of file diff --git a/nx-monorepo/packages/website/public/favicon.svg b/nx-monorepo/website/public/favicon.svg similarity index 100% rename from nx-monorepo/packages/website/public/favicon.svg rename to nx-monorepo/website/public/favicon.svg diff --git a/nx-monorepo/packages/website/src/components/Card.astro b/nx-monorepo/website/src/components/Card.astro similarity index 100% rename from nx-monorepo/packages/website/src/components/Card.astro rename to nx-monorepo/website/src/components/Card.astro diff --git a/nx-monorepo/packages/website/src/env.d.ts b/nx-monorepo/website/src/env.d.ts similarity index 100% rename from nx-monorepo/packages/website/src/env.d.ts rename to nx-monorepo/website/src/env.d.ts diff --git a/nx-monorepo/packages/website/src/layouts/Layout.astro b/nx-monorepo/website/src/layouts/Layout.astro similarity index 100% rename from nx-monorepo/packages/website/src/layouts/Layout.astro rename to nx-monorepo/website/src/layouts/Layout.astro diff --git a/nx-monorepo/packages/website/src/pages/index.astro b/nx-monorepo/website/src/pages/index.astro similarity index 100% rename from nx-monorepo/packages/website/src/pages/index.astro rename to nx-monorepo/website/src/pages/index.astro diff --git a/nx-monorepo/website/tsconfig.json b/nx-monorepo/website/tsconfig.json new file mode 100644 index 000000000..3c43903cf --- /dev/null +++ b/nx-monorepo/website/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../tsconfig.json" +}