Merge pull request #584 from canopas/cloudflare-deploy

Feat: cloudflare deployment

.github/workflows/build.yml

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

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

@@ -1,4 +1,4 @@
-name: DeployFrontendServerlessDev
+name: DeployFrontendCloudflarePagesDev
 
 on:
   workflow_run:
@@ -11,9 +11,6 @@ on:
 jobs:
   deploy-frontend-dev:
     runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: read
     steps:
       - name: Checkout
         uses: actions/[email protected]
@@ -22,33 +19,17 @@ jobs:
         with:
           node-version: "20"
 
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-frontend-access
-          aws-region: ap-south-1
-
-      - name: Build frontend and copy zip to S3
+      - name: Install dependencies and Build the project
         run: |
           cd nuxt-frontend
           sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.js
           sed -i "s|RESOURCES_URL|${{ secrets.RESOURCES_URL }}|g" config.js
-          sed -i "s|CLOUDFRONT_URL_VALUE|${{ secrets.CLOUDFRONT_URL_VALUE_DEV }}|g" config.js
-          yarn install --frozen-lockfile && yarn build
-          cd .output/server && zip canopas_website_SSR_dev_${{ github.sha }}-${{ github.run_attempt }}.zip -r . && aws s3 cp canopas_website_SSR_dev_${{ github.sha }}-${{ github.run_attempt }}.zip s3://canopas-lambda-handlers && cd ../..
-          aws s3 rm s3://canopas-website-ssr-dev --recursive
-          aws s3 sync --cache-control 'max-age=604800' --exclude *.html ./.output/public s3://canopas-website-ssr-dev
-          aws s3 sync ./.output/public s3://canopas-website-ssr-dev
-
-      - name: Deploy cloudformation stack
-        id: canopas-website-dev-lambda-stack-frontend
-        uses: aws-actions/aws-cloudformation-github-deploy@v1
+          yarn install && yarn build
+      
+      - name: Build & Deploy Worker
+        uses: cloudflare/wrangler-action@v3
         with:
-          name: canopas-website-dev-lambda-stack-frontend
-          template: infrastructure/frontend.yml
-          capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM, CAPABILITY_AUTO_EXPAND
-          timeout-in-minutes: "10"
-          no-fail-on-empty-changeset: "1"
-          parameter-overrides: >-
-            EnvName=dev,
-            ZipFileName=canopas_website_SSR_dev_${{ github.sha }}-${{ github.run_attempt }}.zip
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: "nuxt-frontend"
+          command: pages deploy ./dist --project-name=canopas-website-dev --branch=main

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

@@ -1,4 +1,4 @@
-name: DeployFrontendServerlessProd
+name: DeployFrontendCloudflarePagesProd
 
 on:
   workflow_run:
@@ -11,9 +11,6 @@ on:
 jobs:
   deploy-frontend-prod:
     runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: read
     steps:
       - name: Checkout
         uses: actions/[email protected]
@@ -22,34 +19,18 @@ jobs:
         with:
           node-version: "20"
 
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-frontend-access
-          aws-region: ap-south-1
-
-      - name: Build frontend and copy zip to S3
+      - name: Install dependencies and Build the project
         run: |
           cd nuxt-frontend
           sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.prod.js
           sed -i "s|RESOURCES_URL|${{ secrets.RESOURCES_URL }}|g" config.prod.js
-          sed -i "s|CLOUDFRONT_URL_VALUE|${{ secrets.CLOUDFRONT_URL_VALUE_PROD }}|g" config.prod.js
           mv config.prod.js config.js
-          yarn install --frozen-lockfile && yarn build
-          cd .output/server && zip canopas_website_SSR_prod_${{ github.sha }}-${{ github.run_attempt }}.zip -r . && aws s3 cp canopas_website_SSR_prod_${{ github.sha }}-${{ github.run_attempt }}.zip s3://canopas-lambda-handlers && cd ../..
-          aws s3 rm s3://canopas-website-ssr-dev --recursive
-          aws s3 sync --cache-control 'max-age=604800' --exclude *.html ./.output/public s3://canopas-website-ssr-prod
-          aws s3 sync ./.output/public s3://canopas-website-ssr-prod
-
-      - name: Deploy cloudformation stack
-        id: canopas-website-prod-lambda-stack-frontend
-        uses: aws-actions/aws-cloudformation-github-deploy@v1
+          yarn install && yarn build
+      
+      - name: Build & Deploy Worker
+        uses: cloudflare/wrangler-action@v3
         with:
-          name: canopas-website-prod-lambda-stack-frontend
-          template: infrastructure/frontend.yml
-          capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM, CAPABILITY_AUTO_EXPAND
-          timeout-in-minutes: "10"
-          no-fail-on-empty-changeset: "1"
-          parameter-overrides: >-
-            EnvName=prod,
-            ZipFileName=canopas_website_SSR_prod_${{ github.sha }}-${{ github.run_attempt }}.zip
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: "nuxt-frontend"
+          command: pages deploy ./dist --project-name=canopas-website --branch=main

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .env
 base64
+.yarn

nuxt-frontend/.gitignore

@@ -4,6 +4,7 @@
 .nuxt
 .nitro
 .cache
+.wrangler
 dist
 
 # Node dependencies

nuxt-frontend/components/contributions/DesktopLanding.vue

@@ -85,7 +85,7 @@
       </div>
 
       <div
-        class="absolute top-[19rem] xl:top-[25rem] left-[46%] flex flex-row justify-between w-4/5"
+        class="absolute top-[19rem] xl:top-[25rem] left-[46%] flex flex-row justify-between w-fit"
       >
         <div
           class="flex flex-row justify-between gap-x-11 xl:gap-x-28 2xll:gap-x-36"
@@ -117,7 +117,7 @@
         </div>
       </div>
       <div
-        class="absolute left-[86%] 2xl:left-[79%] xll:left-[82%] top-[35%] xll:top-[42%] flex flex-row justify-between w-4/5"
+        class="absolute left-[86%] 2xl:left-[79%] xll:left-[82%] top-[35%] xll:top-[42%] flex flex-row justify-between w-fit"
       >
         <div
           class="flex flex-col justify-between gap-y-36 lg:gap-y-40 xl:gap-y-48 2xl:gap-y-36"
@@ -148,7 +148,7 @@
         </div>
       </div>
       <div
-        class="absolute left-[90%] top-[13%] flex flex-row justify-between w-4/5"
+        class="absolute left-[90%] top-[13%] flex flex-row justify-between w-fit"
       >
         <div
           class="flex flex-col justify-between gap-y-20 lg:gap-20 xl:gap-28 2xl:gap-y-36"

nuxt-frontend/components/home-new/LandingSection.vue

@@ -7,7 +7,7 @@
       :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`"
       class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
       alt="canopas-landing"
-      loading="eager"
+      preload
     />
     <div
       class="relative container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] lg:pb-[3.125rem]"
@@ -21,7 +21,7 @@
           :src="landing400"
           :srcset="`${landing400} 400w, ${landing800} 800w`"
           alt="landing-view-image"
-          loading="eager"
+          preload
         />
       </aspect-ratio>
       <div

nuxt-frontend/components/partials/NewFooter.vue

@@ -41,38 +41,36 @@
 </template>
 
 <script setup>
-import bg from "@/assets/images/footer/new-bg.svg";
-import Config from "@/config.js";
+import config from "@/config.js";
 
-const hover = ref(false);
 const socialMediaIcons = [
   {
-    url: Config.FACEBOOK_URL,
+    url: config.FACEBOOK_URL,
     icon: "fa6-brands:facebook-f",
     event: "tap_footer_facebook",
   },
   {
-    url: Config.INSTAGRAM_URL,
+    url: config.INSTAGRAM_URL,
     icon: "fa6-brands:instagram",
     event: "tap_footer_instagram",
   },
   {
-    url: Config.TWITTER_URL,
+    url: config.TWITTER_URL,
     icon: "fa6-brands:x-twitter",
     event: "tap_footer_twitter",
   },
   {
-    url: Config.LINKEDIN_URL,
+    url: config.LINKEDIN_URL,
     icon: "fa6-brands:linkedin-in",
     event: "tap_footer_linkedin",
   },
   {
-    url: Config.YOUTUBE_URL,
+    url: config.YOUTUBE_URL,
     icon: "fa6-brands:youtube",
     event: "tap_footer_youtube",
   },
   {
-    url: Config.GITHUB_URL,
+    url: config.GITHUB_URL,
     icon: "fa6-brands:github",
     event: "tap_footer_github",
   },

nuxt-frontend/components/portfolio/BrandingSection.vue

@@ -176,7 +176,10 @@
 </template>
 <script>
 import AspectRatio from "@/components/utils/AspectRatio.vue";
-import LottieAnimation from "@/components/utils/LottieAnimation.vue";
+
+const LottieAnimation = defineAsyncComponent(
+  () => import("@/components/utils/LottieAnimation.vue"),
+);
 
 export default {
   props: ["json"],

nuxt-frontend/components/portfolio/DesignSection.vue

@@ -98,8 +98,12 @@
 
 <script>
 import AspectRatio from "@/components/utils/AspectRatio.vue";
-import LottieAnimation from "@/components/utils/LottieAnimation.vue";
 import { elementInViewPort } from "@/utils.js";
+
+const LottieAnimation = defineAsyncComponent(
+  () => import("@/components/utils/LottieAnimation.vue"),
+);
+
 export default {
   props: ["json"],
   data() {

nuxt-frontend/nuxt.config.js

@@ -4,13 +4,13 @@ import config from "./config";
 import robots from "./robots.config";
 
 export default defineNuxtConfig({
+  compatibilityDate: "2024-04-03",
   app: {
     head: {
       htmlAttrs: {
         lang: "en",
       },
     },
-    cdnURL: config.CLOUDFRONT_URL,
   },
   devtools: { enabled: true },
   modules: [
@@ -34,12 +34,15 @@ export default defineNuxtConfig({
     xsl: false,
     xslTips: false,
   },
-  css: ["~/assets/css/global.css", "~/assets/css/app.css"],
+  css: ["~/assets/css/app.css"],
+  features: {
+    inlineStyles: false,
+  },
   generate: { fallback: true },
   imports: {
     dirs: ["stores"],
   },
-  plugins: [{ src: "~/plugins/mixpanel" }],
+  plugins: [{ src: "~/plugins/mixpanel", mode: "client" }],
   hooks: {
     "pages:extend"(pages) {
       pages.push({
@@ -58,7 +61,9 @@ export default defineNuxtConfig({
     "/": { prerender: true },
     "/services": { prerender: true },
     "/portfolio": { prerender: true },
-    "/portfolio/**": { prerender: true },
+    "/portfolio/justly": { prerender: true },
+    "/portfolio/togness": { prerender: true },
+    "/portfolio/luxeradio": { prerender: true },
     "/contributions": { prerender: true },
     "/about": { prerender: true },
     "/contact": { prerender: true },
@@ -73,6 +78,6 @@ export default defineNuxtConfig({
   },
   nitro: {
     compressPublicAssets: true,
-    preset: "aws-lambda",
+    preset: "cloudflare-pages",
   },
 });

nuxt-frontend/package.json

@@ -71,5 +71,6 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

nuxt-frontend/pages/portfolio/[id].vue

@@ -31,7 +31,6 @@ import tognessResponse from "@/json-data/togness-portfolio.js";
 import ErrorPage from "@/error.vue";
 import { elementInViewPort } from "@/utils.js";
 import config from "@/config.js";
-
 import { useRoute } from "vue-router";
 
 const { $mixpanel } = useNuxtApp();

nuxt-frontend/plugins/mixpanel.js

@@ -5,6 +5,6 @@ import mixpanel from "mixpanel-browser";
 import config from "../config.js";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  mixpanel.init(config.MIX_PANEL_TOKEN);
+  mixpanel.init(config.MIX_PANEL_TOKEN, { debug: true });
   nuxtApp.provide("mixpanel", mixpanel);
 });