Feat: migrate to nuxt.js

.githooks/pre-commit

@@ -14,4 +14,4 @@ else
     done
 fi
 
-cd vue-frontend && npx prettier -w . && git add . 
+cd nuxt-frontend && npx prettier -w . && git add . 

.github/workflows/build.yml

@@ -55,7 +55,7 @@ jobs:
 
       - name: Build frontend
         run: |
-          cd vue-frontend
+          cd nuxt-frontend
           yarn install --frozen-lockfile
           npx prettier -c .
           npx eslint .

.github/workflows/deploy-frontend-dev.yml

@@ -1,8 +1,6 @@
 name: DeployFrontendDev
 
 on:
-  repository_dispatch:
-    types: [deploy-blog-dev]
   push:
     branches:
       - "master"
@@ -27,38 +25,13 @@ jobs:
           role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-frontend-access
           aws-region: ap-south-1
 
-      - name: Build nginx and push on ECR
+      - name: Build frontend and copy to S3
         run: |
-          cd nginx 
-          sed -i "s|WEBSITE_URL|dev-stack.canopas.com|g" conf.d/default.conf
-          sed -i "s|API_URL|dev-stack-api.canopas.com|g" conf.d/default.conf
-          bash ./../deploy/deploy-ecr-image.sh dev-nginx ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-nginx
-
-      - name: Build frontend and push on ECR
-        run: |
-          cd vue-frontend
-          echo VITE_RECAPTCHA_SITE_KEY=${{ secrets.RECAPTCHA_SITE_KEY }} >> .env
+          cd nuxt-frontend
+          sed -i "s|VITE_IFRAMELY_KEY_VALUE|${{ secrets.IFRAMELY_KEY }}|g" config.js
+          sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.js
           sh ./../deploy/generate-sitemap.sh https://dev-stack.canopas.com https://dev-stack-api.canopas.com
-          bash ./../deploy/deploy-ecr-image.sh dev-frontend ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-frontend
-
-      - name: Get latest blog image tag
-        id: get_blog_image_tag
-        run: |
-          aws ecr get-login-password --region ap-south-1 | docker login --username AWS --password-stdin ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-south-1.amazonaws.com
-          echo "::set-output name=blogImageTag::$(aws ecr describe-images --repository-name canopas-blog --output text --query 'sort_by(imageDetails,& imagePushedAt)[*].imageTags[*]' | grep -w 'dev' | tr '\t' '\n' | tail -1)"
-
-      - name: Deploy cloudformation stack
-        id: canopas-website-dev-ECS-EC2-stack
-        uses: aws-actions/aws-cloudformation-github-deploy@v1
-        with:
-          name: canopas-website-dev-ECS-EC2-stack
-          template: infrastructure/frontend.yml
-          capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM
-          timeout-in-minutes: "10"
-          no-fail-on-empty-changeset: "1"
-          parameter-overrides: >-
-            EnvName=dev,
-            ClusterName=canopas-website-dev,
-            ImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-frontend,
-            NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-nginx,
-            BlogImageTag=${{steps.get_blog_image_tag.outputs.blogImageTag}}
+          yarn install --frozen-lockfile && yarn generate
+          aws s3 sync ./.output/public s3://dev-stack.canopas.com --exclude "*.js"
+          aws s3 sync ./.output/public s3://dev-stack.canopas.com --include "*.js" --content-type "application/javascript"
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.github/workflows/deploy-frontend-prod.yml

@@ -1,8 +1,6 @@
 name: DeployFrontendProd
 
 on:
-  repository_dispatch:
-    types: [deploy-blog-prod]
   push:
     branches:
       - "master"
@@ -27,39 +25,14 @@ jobs:
           role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-frontend-access
           aws-region: ap-south-1
 
-      - name: Build nginx and push on ECR
-        run: |
-          cd nginx 
-          sed -i "s|WEBSITE_URL|canopas.com|g" conf.d/default.conf
-          sed -i "s|API_URL|prod-stack-api.canopas.com|g" conf.d/default.conf
-          bash ./../deploy/deploy-ecr-image.sh prod-nginx ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-nginx
-
       - name: Build frontend and push on ECR
         run: |
-          cd vue-frontend
-          echo VITE_RECAPTCHA_SITE_KEY=${{ secrets.RECAPTCHA_SITE_KEY }} >> .env
-          mv src/config.prod.js src/config.js
+          cd nuxt-frontend
+          sed -i "s|VITE_IFRAMELY_KEY_VALUE|${{ secrets.IFRAMELY_KEY }}|g" config.prod.js
+          sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.prod.js
+          mv config.prod.js config.js
           sh ./../deploy/generate-sitemap.sh https://canopas.com https://prod-stack-api.canopas.com
-          bash ./../deploy/deploy-ecr-image.sh prod-frontend ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-frontend
-
-      - name: Get latest blog image tag
-        id: get_blog_image_tag
-        run: |
-          aws ecr get-login-password --region ap-south-1 | docker login --username AWS --password-stdin ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-south-1.amazonaws.com
-          echo "::set-output name=blogImageTag::$(aws ecr describe-images --repository-name canopas-blog --output text --query 'sort_by(imageDetails,& imagePushedAt)[*].imageTags[*]' | grep -w 'prod' | tr '\t' '\n' | tail -1)"
-
-      - name: Deploy cloudformation stack
-        id: canopas-website-prod-ECS-EC2-stack
-        uses: aws-actions/aws-cloudformation-github-deploy@v1
-        with:
-          name: canopas-website-prod-ECS-EC2-stack
-          template: infrastructure/frontend.yml
-          capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM
-          timeout-in-minutes: "10"
-          no-fail-on-empty-changeset: "1"
-          parameter-overrides: >-
-            EnvName=prod,
-            ClusterName=canopas-website-prod,
-            ImageTag=${{ github.sha }}-${{ github.run_attempt }}-prod-frontend,
-            NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-prod-nginx,
-            BlogImageTag=${{steps.get_blog_image_tag.outputs.blogImageTag}}
+          yarn install --frozen-lockfile && yarn generate
+          aws s3 sync ./.output/public s3://canopas.com --exclude "*.js"
+          aws s3 sync ./.output/public s3://canopas.com --include "*.js" --content-type "application/javascript"
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.PROD_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.gitignore

@@ -1,4 +1,3 @@
 .DS_Store
 .env
-*.json
-base64
+base64

README.md

@@ -137,7 +137,7 @@ This repository contains the working code of [Canopas website](https://canopas.c
 ### Install dependencies
 
 ```
-cd vue-frontend && yarn install
+cd nuxt-frontend && yarn install
 ```
 
 ### Start website in dev mode using,

go.sum

@@ -138,6 +138,8 @@ github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/lib/pq v1.2.0 h1:LXpIM/LZ5xGFhOpXAQUIMM1HdyqzVYM13zNdjCEEcA0=
 github.com/lib/pq v1.2.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
+github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
+github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=

nuxt-frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt-frontend/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

nuxt-frontend/assets/css/app.css

@@ -0,0 +1,87 @@
+@font-face {
+  font-display: swap;
+  font-family: Product Sans;
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/ProductSans-Regular-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: FuturaLT-Bold;
+  font-style: bold;
+  font-weight: 700;
+  src: url(../fonts/FuturaLT-Bold-Subset.woff2);
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter-Bold;
+  font-style: bold;
+  font-weight: 700;
+  src: url(../fonts/Inter-Bold-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter-SemiBold;
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Inter-SemiBold-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter-Medium;
+  font-style: medium;
+  font-weight: 500;
+  src: url(../fonts/Inter-Medium-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter-Regular;
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/Inter-Regular-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter-Light;
+  font-style: normal;
+  font-weight: 300;
+  src: url(../fonts/Inter-Light-Subset.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Roboto-Bold;
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Roboto-Bold-Subset.woff2);
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Roboto-Medium;
+  font-style: normal;
+  font-weight: 500;
+  src: url(../fonts/Roboto-Medium-Subset.woff2);
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Opensans-Bold;
+  font-style: bold;
+  font-weight: 700;
+  src: url(../fonts/Open-Sans-Bold.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Opensans-SemiBold;
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Open-Sans-SemiBold.woff2) format("woff2");
+}