Adding TypeScript version of AWS S3 Website example (pulumi#944)

* Adding TypeScript version of AWS S3 Website example

* Update aws-ts-s3-folder/index.ts

Incorporating TR feedback to simplify example code.

Co-authored-by: Komal <[email protected]>

Co-authored-by: Komal <[email protected]>

aws-ts-s3-folder/.gitignore

@@ -0,0 +1,2 @@
+/bin/
+/node_modules/

aws-ts-s3-folder/Pulumi.yaml

@@ -0,0 +1,3 @@
+name: aws-ts-s3-folder
+runtime: nodejs
+description: A static website hosted on AWS S3

aws-ts-s3-folder/README.md

@@ -0,0 +1,80 @@
+[![Deploy](https://get.pulumi.com/new/button.svg)](https://app.pulumi.com/new)
+
+# Host a Static Website on Amazon S3
+
+A static website that uses [S3's website support](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html).
+For a detailed walkthrough of this example, see the tutorial [Static Website on AWS S3](https://www.pulumi.com/docs/tutorials/aws/s3-website/).
+
+## Deploying and running the program
+
+Note: some values in this example will be different from run to run.  These values are indicated
+with `***`.
+
+1.  Create a new stack:
+
+    ```bash
+    $ pulumi stack init website-testing
+    ```
+
+1.  Set the AWS region:
+
+    ```
+    $ pulumi config set aws:region us-west-2
+    ```
+
+1.  Restore NPM modules via `npm install` or `yarn install`.
+
+1.  Run `pulumi up` to preview and deploy changes.  After the preview is shown you will be
+    prompted if you want to continue or not.
+
+    ```bash
+    $ pulumi up
+    Previewing update of stack 'website-testing'
+    Previewing changes:
+    ...
+
+    Updating stack 'website-testing'
+    Performing changes:
+
+        Type                    Name                                   Status      Info
+    +   pulumi:pulumi:Stack     aws-js-s3-folder-website-testing  created
+    +   ├─ aws:s3:Bucket        s3-website-bucket                      created
+    +   ├─ aws:s3:BucketPolicy  bucketPolicy                           created
+    +   ├─ aws:s3:BucketObject  favicon.png                            created
+    +   └─ aws:s3:BucketObject  index.html                             created
+
+    info: 5 changes performed:
+        + 5 resources created
+    Update duration: ***
+
+    Permalink: https://app.pulumi.com/***
+    ```
+
+1.  To see the resources that were created, run `pulumi stack output`:
+
+    ```bash
+    $ pulumi stack output
+    Current stack outputs (2):
+        OUTPUT                                           VALUE
+        bucketName                                       s3-website-bucket-***
+        websiteUrl                                       ***.s3-website-us-west-2.amazonaws.com
+    ```
+
+1.  To see that the S3 objects exist, you can either use the AWS Console or the AWS CLI:
+
+    ```bash
+    $ aws s3 ls $(pulumi stack output bucketName)
+    2018-04-17 15:40:47      13731 favicon.png
+    2018-04-17 15:40:48        249 index.html
+    ```
+
+1.  Open the site URL in a browser to see both the rendered HTML and the favicon:
+
+    ```bash
+    $ pulumi stack output websiteUrl
+    ***.s3-website-us-west-2.amazonaws.com
+    ```
+
+    ![Hello S3 example](images/part2-website.png)
+
+1.  To clean up resources, run `pulumi destroy` and answer the confirmation question at the prompt.

aws-ts-s3-folder/index.ts

@@ -0,0 +1,48 @@
+// Copyright 2016-2021, Pulumi Corporation.  All rights reserved.
+
+import * as aws from "@pulumi/aws";
+import * as awsx from "@pulumi/awsx";
+import * as pulumi from "@pulumi/pulumi";
+import * as fs from "fs";
+import * as mime from "mime";
+
+// Create a bucket and expose a website index document
+const siteBucket = new aws.s3.Bucket("s3-website-bucket", {
+    website: {
+        indexDocument: "index.html",
+    },
+});
+
+const siteDir = "www"; // directory for content files
+
+// For each file in the directory, create an S3 object stored in `siteBucket`
+for (const item of fs.readdirSync(siteDir)) {
+    const filePath = require("path").join(siteDir, item);
+    const siteObject = new aws.s3.BucketObject(item, {
+        bucket: siteBucket,                               // reference the s3.Bucket object
+        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
+    });
+}
+
+// Set the access policy for the bucket so all objects are readable
+const bucketPolicy = new aws.s3.BucketPolicy("bucketPolicy", {
+    bucket: siteBucket.id, // refer to the bucket created earlier
+    policy: siteBucket.arn.apply(bucketArn => JSON.stringify({
+        Version: "2012-10-17",
+        Statement: [{
+            Effect: "Allow",
+            Principal: "*",
+            Action: [
+                "s3:GetObject",
+            ],
+            Resource: [
+                `${bucketArn}/*`, //
+            ],
+        }],
+    })),
+});
+
+// Stack exports
+export const bucketName = siteBucket.bucket;
+export const websiteUrl = siteBucket.websiteEndpoint;

aws-ts-s3-folder/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "aws-ts-s3-folder",
+    "devDependencies": {
+        "@types/node": "^10.0.0"
+    },
+    "dependencies": {
+        "@pulumi/aws": "^3.25.1",
+        "@pulumi/awsx": "^0.24.0",
+        "@pulumi/pulumi": "^2.0.0",
+        "@types/mime": "^2.0.3",
+        "mime": "^2.5.2"
+    }
+}

aws-ts-s3-folder/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "outDir": "bin",
+        "target": "es2016",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "pretty": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitReturns": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.ts"
+    ]
+}

aws-ts-s3-folder/www/index.html

@@ -0,0 +1,7 @@
+<html>
+    <head><meta charset="UTF-8">
+    <title>Hello, Pulumi!</title></head>
+<body>
+    <p>Hello, S3!</p>
+    <p>Made with ❤️ with <a href="https://pulumi.com">Pulumi</a></p>
+</body></html>