feat: configured serverless

.gitignore

@@ -45,3 +45,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+/.serverless

README.md

@@ -29,3 +29,8 @@ Follow the steps:
 - git clone
 - npm i
 - ng serve
+
+## Task 2
+
+- Cloudfront URL: https://di3lwshdkkn9h.cloudfront.net/
+- S3: https://bkb-store-app-sls.s3.eu-central-1.amazonaws.com/index.html

angular.json

@@ -25,10 +25,7 @@
             "browser": "src/main.ts",
             "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
@@ -93,10 +90,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
@@ -107,19 +101,15 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   },
   "schematics": {
     "@angular-eslint/schematics:application": {

package.json

@@ -9,7 +9,13 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "prepare": "husky",
-    "lint:format": "npx --no-install lint-staged && npx --no-install pretty-quick --staged"
+    "lint:format": "npx --no-install lint-staged && npx --no-install pretty-quick --staged",
+    "client:deploy": "sls client deploy --no-config-change --no-policy-change --no-cors-change",
+    "client:build:deploy": "npm run build && npm run client:deploy",
+    "cloudfront:setup": "sls deploy",
+    "cloudfront:domainInfo": "sls domainInfo",
+    "cloudfront:invalidateCache": "sls invalidateCloudFrontCache",
+    "cloudfront:build:deploy": "npm run client:build:deploy && npm run cloudfront:invalidateCache"
   },
   "private": true,
   "dependencies": {
@@ -60,6 +66,10 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
+    "serverless": "^3.20.0",
+    "serverless-finch": "^4.0.0",
+    "serverless-s3-cleaner": "^2.0.1",
+    "serverless-single-page-app-plugin": "file:./serverless-single-page-app-plugin",
     "typescript": "~5.3.3"
   },
   "lint-staged": {

serverless-single-page-app-plugin/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+const spawnSync = require("child_process").spawnSync;
+
+class ServerlessPlugin {
+  constructor(serverless, options) {
+    this.serverless = serverless;
+    this.options = options;
+    this.commands = {
+      syncToS3: {
+        usage: "Deploys the `app` directory to your bucket",
+        lifecycleEvents: ["sync"],
+      },
+      domainInfo: {
+        usage: "Fetches and prints out the deployed CloudFront domain names",
+        lifecycleEvents: ["domainInfo"],
+      },
+      invalidateCloudFrontCache: {
+        usage: "Invalidates CloudFront cache",
+        lifecycleEvents: ["invalidateCache"],
+      },
+    };
+
+    this.hooks = {
+      "syncToS3:sync": this.syncDirectory.bind(this),
+      "domainInfo:domainInfo": this.domainInfo.bind(this),
+      "invalidateCloudFrontCache:invalidateCache":
+        this.invalidateCache.bind(this),
+    };
+  }
+
+  runAwsCommand(args) {
+    let command = "aws";
+    if (this.serverless.variables.service.provider.region) {
+      command = `${command} --region ${this.serverless.variables.service.provider.region}`;
+    }
+    if (this.serverless.variables.service.provider.profile) {
+      command = `${command} --profile ${this.serverless.variables.service.provider.profile}`;
+    }
+    const result = spawnSync(command, args);
+
+    const stdout =
+      typeof result.stdout === "string"
+        ? result.stdout
+        : result.stdout && result.stdout.toString();
+    const sterr =
+      typeof result.stderr === "string"
+        ? result.stderr
+        : result.stderr && result.stderr.toString();
+    if (stdout) {
+      this.serverless.cli.log(stdout);
+    }
+    if (sterr) {
+      this.serverless.cli.log(sterr);
+    }
+
+    return { stdout, sterr };
+  }
+
+  // syncs the `app` directory to the provided bucket
+  syncDirectory() {
+    const s3Bucket = this.serverless.variables.service.custom.s3Bucket;
+    const args = ["s3", "sync", "app/", `s3://${s3Bucket}/`, "--delete"];
+    const { sterr } = this.runAwsCommand(args);
+    if (!sterr) {
+      this.serverless.cli.log("Successfully synced to the S3 bucket");
+    } else {
+      throw new Error("Failed syncing to the S3 bucket");
+    }
+  }
+
+  // fetches the domain name from the CloudFront outputs and prints it out
+  async domainInfo() {
+    const provider = this.serverless.getProvider("aws");
+    const stackName = provider.naming.getStackName(this.options.stage);
+    const result = await provider.request(
+      "CloudFormation",
+      "describeStacks",
+      { StackName: stackName },
+      this.options.stage,
+      this.options.region,
+    );
+
+    const outputs = result.Stacks[0].Outputs;
+    const output = outputs.find(
+      (entry) => entry.OutputKey === "WebAppCloudFrontDistributionOutput",
+    );
+
+    if (output && output.OutputValue) {
+      this.serverless.cli.log(`Web App Domain: ${output.OutputValue}`);
+      return output.OutputValue;
+    }
+
+    this.serverless.cli.log("Web App Domain: Not Found");
+    const error = new Error("Could not extract Web App Domain");
+    throw error;
+  }
+
+  async invalidateCache() {
+    const provider = this.serverless.getProvider("aws");
+
+    const domain = await this.domainInfo();
+
+    const result = await provider.request(
+      "CloudFront",
+      "listDistributions",
+      {},
+      this.options.stage,
+      this.options.region,
+    );
+
+    const distributions = result.DistributionList.Items;
+    const distribution = distributions.find(
+      (entry) => entry.DomainName === domain,
+    );
+
+    if (distribution) {
+      this.serverless.cli.log(
+        `Invalidating CloudFront distribution with id: ${distribution.Id}`,
+      );
+      const args = [
+        "cloudfront",
+        "create-invalidation",
+        "--distribution-id",
+        distribution.Id,
+        "--paths",
+        "/*",
+      ];
+      const { sterr } = this.runAwsCommand(args);
+      if (!sterr) {
+        this.serverless.cli.log("Successfully invalidated CloudFront cache");
+      } else {
+        throw new Error("Failed invalidating CloudFront cache");
+      }
+    } else {
+      const message = `Could not find distribution with domain ${domain}`;
+      const error = new Error(message);
+      this.serverless.cli.log(message);
+      throw error;
+    }
+  }
+}
+
+module.exports = ServerlessPlugin;

serverless-single-page-app-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "serverless-single-page-app-plugin",
+  "version": "1.0.1",
+  "description": "A plugin to simplify deploying Single Page Application using S3 and CloudFront",
+  "author": "",
+  "license": "MIT"
+}

serverless.yml

@@ -0,0 +1,133 @@
+service: bkb-store-app
+
+frameworkVersion: "3"
+
+provider:
+  name: aws
+  runtime: nodejs14.x
+  region: eu-central-1
+  # setup profile for AWS CLI.
+  profile: sls
+
+plugins:
+  - serverless-finch
+  # 'serverless-single-page-app-plugin' is a custom plugin that located .serverless_plugins folder.
+  # Existing plugin (https://www.npmjs.com/package/serverless-single-page-app-plugin) doesn't have invalidate cache feature that often used during CI/CD events.
+  # How to build your own plugins: https://www.serverless.com/framework/docs/providers/aws/guide/plugins#service-local-plugin
+  - serverless-single-page-app-plugin
+  - serverless-s3-cleaner
+
+custom:
+  client:
+    bucketName: bkb-store-app-sls
+    distributionFolder: dist/app/browser
+  s3BucketName: ${self:custom.client.bucketName}
+
+  ## Serverless-single-page-app-plugin configuration:
+  s3LocalPath: ${self:custom.client.distributionFolder}/
+  serverless-s3-cleaner:
+    buckets:
+      - ${self:custom.client.bucketName}
+
+resources:
+  Resources:
+    ## Specifying the S3 Bucket
+    WebAppS3Bucket:
+      Type: AWS::S3::Bucket
+      Properties:
+        BucketName: ${self:custom.s3BucketName}
+        # AccessControl: PublicRead
+        WebsiteConfiguration:
+          IndexDocument: index.html
+          ErrorDocument: index.html
+        # VersioningConfiguration:
+        #   Status: Enabled
+
+    ## Specifying the policies to make sure all files inside the Bucket are avaialble to CloudFront
+    WebAppS3BucketPolicy:
+      Type: AWS::S3::BucketPolicy
+      Properties:
+        Bucket:
+          Ref: WebAppS3Bucket
+        PolicyDocument:
+          Statement:
+            - Sid: "AllowCloudFrontAccessIdentity"
+              Effect: Allow
+              Action: s3:GetObject
+              Resource: arn:aws:s3:::${self:custom.s3BucketName}/*
+              Principal:
+                AWS:
+                  Fn::Join:
+                    - " "
+                    - - "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity"
+                      - !Ref OriginAccessIdentity
+
+    OriginAccessIdentity:
+      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
+      Properties:
+        CloudFrontOriginAccessIdentityConfig:
+          Comment: Access identity between CloudFront and S3 bucket
+
+    ## Specifying the CloudFront Distribution to server your Web Application
+    WebAppCloudFrontDistribution:
+      Type: AWS::CloudFront::Distribution
+      Properties:
+        DistributionConfig:
+          Origins:
+            - DomainName: !GetAtt WebAppS3Bucket.RegionalDomainName
+              ## An identifier for the origin which must be unique within the distribution
+              Id: myS3Origin
+              ## In case you don't want to restrict the bucket access use CustomOriginConfig and remove S3OriginConfig
+              S3OriginConfig:
+                OriginAccessIdentity: !Sub origin-access-identity/cloudfront/${OriginAccessIdentity}
+              # CustomOriginConfig:
+              #   HTTPPort: 80
+              #   HTTPSPort: 443
+              #   OriginProtocolPolicy: https-only
+          Enabled: true
+          IPV6Enabled: true
+          HttpVersion: http2
+          ## Uncomment the following section in case you are using a custom domain
+          # Aliases:
+          # - mysite.example.com
+          DefaultRootObject: index.html
+          ## Since the Single Page App is taking care of the routing we need to make sure ever path is served with index.html
+          ## The only exception are files that actually exist e.h. app.js, reset.css
+          CustomErrorResponses:
+            - ErrorCode: 404
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+          DefaultCacheBehavior:
+            AllowedMethods: ["GET", "HEAD", "OPTIONS"]
+            CachedMethods: ["GET", "HEAD", "OPTIONS"]
+            ForwardedValues:
+              Headers:
+                - Access-Control-Request-Headers
+                - Access-Control-Request-Method
+                - Origin
+                - Authorization
+              ## Defining if and how the QueryString and Cookies are forwarded to the origin which in this case is S3
+              QueryString: false
+              Cookies:
+                Forward: none
+            ## The origin id defined above
+            TargetOriginId: myS3Origin
+            ## The protocol that users can use to access the files in the origin. To allow HTTP use `allow-all`
+            ViewerProtocolPolicy: redirect-to-https
+            Compress: true
+            DefaultTTL: 0
+          ## The certificate to use when viewers use HTTPS to request objects.
+          ViewerCertificate:
+            CloudFrontDefaultCertificate: true
+          ## Uncomment the following section in case you want to enable logging for CloudFront requests
+          # Logging:
+          #   IncludeCookies: 'false'
+          #   Bucket: mylogs.s3.amazonaws.com
+          #   Prefix: myprefix
+
+  ## In order to print out the hosted domain via `serverless info` we need to define the DomainName output for CloudFormation
+  Outputs:
+    WebAppS3BucketOutput:
+      Value: !Ref WebAppS3Bucket
+    WebAppCloudFrontDistributionOutput:
+      Value: !GetAtt WebAppCloudFrontDistribution.DomainName

src/app/products/products.component.scss

@@ -3,6 +3,7 @@
 @import "bootstrap/scss/mixins/breakpoints";
 
 .container {
+  background-color: pink;
   display: grid;
   grid-template-columns: 1fr;