Xena
+A domesticated, black crazy cat.
+ +
+```
+
+This form can be found in `src/lib/CreateSite.svelte` and includes the `onCreate` function to call our API.
+
+
+
+```svelte
+
+
+
+```
+
+We have a new method inside of `src/routes/api/stacks/+server.ts` that handles this `POST` call and calls the `createHandler` function.
+
+```ts
+import { createHandler, listHandler } from './pulumi';
+
+/** @type {import('./$types').RequestHandler} */
+export const GET = async () => {
+ return listHandler();
+};
+
+export const POST = async (requestEvent) => {
+ return createHandler(requestEvent);
+};
+```
+
+The `createHandler` function within `src/routes/api/stacks/pulumi.ts`, creates the new site within AWS.
+
+```ts
+// creates new sites
+export const createHandler = (async ({ request }) => {
+ const { id, content } = await request.json();
+ const stackName = id;
+ try {
+ // create a new stack
+ const stack = await LocalWorkspace.createStack({
+ stackName,
+ projectName,
+ // generate our pulumi program on the fly from the POST body
+ program: createPulumiProgram(content)
+ });
+ await stack.setConfig('aws:region', { value: 'us-west-2' });
+ // deploy the stack, tailing the logs to console
+ const upRes = await stack.up({ onOutput: console.info });
+ return new Response(JSON.stringify({ id: stackName, url: upRes.outputs.websiteUrl.value }));
+ } catch (e) {
+ if (e instanceof StackAlreadyExistsError) {
+ return new Response(`stack "${stackName}" already exists`, { status: 409 });
+ } else {
+ return new Response(JSON.stringify(e), { status: 500 });
+ }
+ }
+}) satisfies RequestHandler;
+```
+
+A crucial part of this call is `LocalWorkspace.createStack` in which we pass `createPulumiProgram`. This program is what takes our input HTML, creates an S3 bucket, sets the correct permissions on the bucket, and creates the index.html file inside of that bucket, which returns the new websiteEndpoint.
+
+```ts
+// this function defines our pulumi S3 static website in terms of the content that the caller passes in.
+// this allows us to dynamically deploy websites based on user defined values from the POST body.
+const createPulumiProgram = (content: string) => async () => {
+ // Create a bucket and expose a website index document
+ const siteBucket = new s3.Bucket('s3-website-bucket', {
+ website: {
+ indexDocument: 'index.html'
+ }
+ });
+
+ // Allow for policy update
+ new s3.BucketPublicAccessBlock('bucketPublicAccessBlock', {
+ bucket: siteBucket.bucket,
+ blockPublicPolicy: false
+ });
+
+ // here our HTML is defined based on what the caller curries in.
+ const indexContent = content;
+
+ // write our index.html into the site bucket
+ new s3.BucketObject('index', {
+ bucket: siteBucket,
+ content: indexContent,
+ contentType: 'text/html; charset=utf-8',
+ key: 'index.html'
+ });
+
+ // Create an S3 Bucket Policy to allow public read of all objects in bucket
+ const publicReadPolicyForBucket = (bucketName: string): PolicyDocument => {
+ const policy: PolicyDocument = {
+ Version: '2012-10-17',
+ Statement: [
+ {
+ Effect: 'Allow',
+ Principal: '*',
+ Action: ['s3:GetObject'],
+ Resource: [
+ `arn:aws:s3:::${bucketName}/*` // policy refers to bucket name explicitly
+ ]
+ }
+ ]
+ };
+ console.log('POLICY: ', JSON.stringify(policy));
+ return policy;
+ };
+ // Set the access policy for the bucket so all objects are readable
+ new s3.BucketPolicy('bucketPolicy', {
+ bucket: siteBucket.bucket, // refer to the bucket created earlier
+ policy: siteBucket.bucket.apply(publicReadPolicyForBucket) // use output property `siteBucket.bucket`
+ });
+
+ return {
+ websiteUrl: siteBucket.websiteEndpoint
+ };
+};
+```
+
+When all of this finishes happening you will be forwarded to the stack page for your site.
+
+### View Stack
+
+In the stack page view for your new site you will see the site url which will open the full website, along with an iframe view of that site which you just created.
+
+
+
+In order to get the data for this stack, first capture the id in our Svelte load function at `src/routes/[id]/+page.ts`. You can do this by using the params object that is passed to the load.
+
+```ts
+import type { PageLoad } from './$types';
+
+export const load = (async ({ fetch, params }) => {
+ const stacksRes = await fetch(`/api/stacks/${params.id}`);
+ if (stacksRes.status > 200) {
+ console.error(stacksRes.status, stacksRes.statusText);
+ }
+ const stacks = await stacksRes.json();
+ return {
+ id: params.id,
+ url: stacks?.url
+ };
+}) satisfies PageLoad;
+```
+
+We get the stacks information again from our API, in a new location `src/routes/api/stacks/[id]/+server.ts` that requires our id to be used in the typing for the params.
+
+```ts
+import { getHandler } from './pulumi';
+
+export const GET = async (requestEvent) => {
+ return getHandler(requestEvent);
+};
+```
+
+The `GET` function calls the `getHandler` within `src/routes/api/stacks/[id]/pulumi.ts` and as you can see below we get the stack id from `params.id` and assign it to `stackName`.
+
+```ts
+// gets info about a specific site
+export const getHandler = (async ({ params }) => {
+ const stackName = params?.id;
+ try {
+ // select the existing stack
+ const stack = await LocalWorkspace.selectStack({
+ stackName,
+ projectName,
+ // don't need a program just to get outputs
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ program: async () => {}
+ });
+ const outs = await stack.outputs();
+ return new Response(JSON.stringify({ id: stackName, url: outs.websiteUrl.value }));
+ } catch (e) {
+ if (e instanceof StackNotFoundError) {
+ return new Response(`stack "${stackName}" does not exist`, { status: 404 });
+ } else {
+ return new Response(JSON.stringify(e), { status: 500 });
+ }
+ }
+}) satisfies RequestHandler;
+```
+
+### Delete Stack
+
+Now that the stack is created, it can be deleted by clicking the button "Delete Stack". This will remove all of the associated resources within AWS and remove your website.
+
+
+
+The Svelte component can be found at `src/lib/DeleteStack.svelte` and it contains the function `onDelete`.
+
+```svelte
+
+
+
+```
+
+Within the `onDelete` function you can see the fetch call to `/api/stacks/${id}` with the method `DELETE`. This API can be found at `src/routes/api/stacks/[id]/+server.ts`.
+
+```ts
+import { deleteHandler, getHandler } from './pulumi';
+
+export const GET = async (requestEvent) => {
+ return getHandler(requestEvent);
+};
+
+export const DELETE = async (requestEvent) => {
+ return deleteHandler(requestEvent);
+};
+```
+
+As you can see the `DELETE` function calls `deleteHandler` within `src/routes/api/stacks/[id]/pulumi.ts`. Once again using the Pulumi Automation API you can use the [LocalWorkspace](https://www.pulumi.com/docs/using-pulumi/automation-api/concepts-terminology/#localworkspace) class to select the correct stack and then call the destroy and remove methods.
+
+```ts
+export const deleteHandler = (async ({ params }) => {
+ const stackName = params.id;
+ try {
+ // select the existing stack
+ const stack = await LocalWorkspace.selectStack({
+ stackName,
+ projectName,
+ // don't need a program for destroy
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ program: async () => {}
+ });
+ // deploy the stack, tailing the logs to console
+ await stack.destroy({ onOutput: console.info });
+ await stack.workspace.removeStack(stackName);
+ return new Response(undefined, { status: 200 });
+ } catch (e) {
+ if (e instanceof StackNotFoundError) {
+ return new Response(`stack "${stackName}" does not exist`, { status: 404 });
+ } else if (e instanceof ConcurrentUpdateError) {
+ return new Response(`stack "${stackName}" already has update in progress`, { status: 409 });
+ } else {
+ return new Response(JSON.stringify(e), { status: 500 });
+ }
+ }
+}) satisfies RequestHandler;
+```
+
+### Stack Update
+
+For bonus points I have left a `PUT` method in `src/routes/api/stacks/[id]/+server.ts` which calls the`updateHandler` function in `src/routes/api/stacks/[id]/pulumi.ts`.
+
+Try using the below code to wire up an update to the current stack for changing the website.
+
+```ts
+// updates the content for an existing site
+export const updateHandler = (async ({ request, params }) => {
+ const stackName = params?.id;
+ const { content } = await request.json();
+ try {
+ // select the existing stack
+ const stack = await LocalWorkspace.selectStack({
+ stackName,
+ projectName,
+ // generate our pulumi program on the fly from the POST body
+ program: createPulumiProgram(content)
+ });
+ await stack.setConfig('aws:region', { value: 'us-west-2' });
+ // deploy the stack, tailing the logs to console
+ const upRes = await stack.up({ onOutput: console.info });
+ return new Response(JSON.stringify({ id: stackName, url: upRes.outputs.websiteUrl.value }));
+ } catch (e) {
+ if (e instanceof StackNotFoundError) {
+ return new Response(`stack "${stackName}" does not exist`, { status: 404 });
+ } else if (e instanceof ConcurrentUpdateError) {
+ return new Response(`stack "${stackName}" already has update in progress`, { status: 409 });
+ } else {
+ return new Response(JSON.stringify(e), { status: 500 });
+ }
+ }
+}) satisfies RequestHandler;
+```