Repository: dotkom/monoweb
Pull request #1299: Set up continous deployment for splash
Author: login: henrikskog
Created: 2025-03-19T19:15:12Z | Merged: 2025-03-19T19:39:08Z



Diff:
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
index 528f1154d0..4cb3bcaf06 100644
--- a/.github/workflows/deploy-prod.yml
+++ b/.github/workflows/deploy-prod.yml
@@ -2,7 +2,7 @@ name: Production deployment
 on:
   push:
     branches:
-      - main
+      - 03-19-set_up_continous_deployment_for_splash
 permissions:
   id-token: write   
   contents: read
@@ -118,4 +118,81 @@ jobs:
                 project: 'monoweb-kvittering-backend',
                 targets: 'module.evergreen_service',
               },
-            });
\ No newline at end of file
+            });
+  deploy-splash-frontend:
+    name: Deploy monoweb/splash-2025
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-region: eu-north-1
+          role-to-assume: arn:aws:iam::891459268445:role/MonowebProdSplashFrontendCIRole
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.15.7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0
+          cache: 'pnpm'
+          
+      - name: Get OIDC Token
+        uses: actions/github-script@v6
+        id: get-oidc-token
+        with:
+          script: |
+            const id_token = await core.getIDToken()
+            core.setOutput('oidc_token', id_token)
+      - uses: dopplerhq/cli-action@v2
+      # Identity comes from the configured doppler account identity 
+      # (see last step https://docs.doppler.com/docs/service-account-identities#configure-the-identity)
+      - run: |
+          doppler oidc login \
+            --api-host https://api.doppler.com \
+            --scope=. \
+            --identity=8f25d2a1-28b9-4f2a-8fb3-115b10f456b2 \
+            --token=${{ steps.get-oidc-token.outputs.oidc_token }}
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build frontend
+        working-directory: apps/splash-2025
+        run: doppler run -p monoweb-splash-frontend -c prd -- pnpm build
+        
+      - name: Deploy to S3
+        run: |
+          aws s3 sync apps/splash-2025/dist "s3://splash.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.html" \
+            --content-type "text/html" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/splash-2025/dist "s3://splash.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.css" \
+            --content-type "text/css" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/splash-2025/dist "s3://splash.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.js" \
+            --content-type "application/javascript" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/splash-2025/dist "s3://splash.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.svg" \
+            --content-type "image/svg+xml" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/splash-2025/dist "s3://splash.online.ntnu.no" \
+            --exclude "*.html" \
+            --exclude "*.css" \
+            --exclude "*.js" \
+            --exclude "*.svg" \
+            --region "eu-north-1"
+      - name: Invalidate CloudFront cache
+        run: aws cloudfront create-invalidation --distribution-id E60JFQ13PM11R --paths '/*'
\ No newline at end of file
diff --git a/apps/splash-2025/src/App.tsx b/apps/splash-2025/src/App.tsx
index 224affa509..2911b7348b 100644
--- a/apps/splash-2025/src/App.tsx
+++ b/apps/splash-2025/src/App.tsx
@@ -4,7 +4,7 @@ function App() {
 	return (
 		<div>
 			<Header />
-			<main>Team onboarding ftw</main>
+			<main>Team onboarding ftw 1</main>
 		</div>
 	);
 }
diff --git a/apps/splash-2025/src/components/ui/button.tsx b/apps/splash-2025/src/components/ui/button.tsx
deleted file mode 100644
index 91b784a288..0000000000
--- a/apps/splash-2025/src/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/apps/splash-2025/src/lib/api.ts b/apps/splash-2025/src/lib/api.ts
deleted file mode 100644
index b25f5432c3..0000000000
--- a/apps/splash-2025/src/lib/api.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface ApiFormData {
-	full_name: string;
-	email: string;
-	committee: string;
-	type: string;
-	card_number: string;
-	account: string;
-	amount: number;
-	intent: string;
-	comments: string;
-	attachments: {
-		url: string;
-		mime_type: string;
-	}[];
-	start_time: Date;
-}
diff --git a/apps/splash-2025/src/lib/compress-img.ts b/apps/splash-2025/src/lib/compress-img.ts
deleted file mode 100644
index 4721241197..0000000000
--- a/apps/splash-2025/src/lib/compress-img.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import imageCompression from "browser-image-compression";
-import heic2any from "heic2any";
-
-type CompressedFile = {
-	blob: Blob | Blob[] | File;
-	downloadLink: string;
-};
-
-// https://www.npmjs.com/package/browser-image-compression
-export async function compressImageWithLibrary(
-	file: File,
-	maxSizeBytes: number = 1024 * 1024 * 10,
-	onProgress?: (progress: number) => void,
-): Promise<CompressedFile> {
-	let imageFile: Blob | Blob[] | File = file;
-	console.log("originalFile instanceof Blob", imageFile instanceof Blob); // true
-	console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
-
-	const options = {
-		maxSizeMB: maxSizeBytes / 1024 / 1024,
-		maxWidthOrHeight: 1000,
-		useWebWorker: true,
-		onProgress: onProgress,
-		fileType: "image/jpeg",
-	};
-
-	console.log(file.name);
-	try {
-		if (
-			file.name.toUpperCase().endsWith(".HEIC") ||
-			file.name.endsWith(".HEIF")
-		) {
-			console.log("Converting HEIC/HEIF to JPEG...");
-			imageFile = await heic2any({ blob: imageFile, toType: "image/jpeg" });
-			console.log("Conversion completed:", file);
-		}
-
-		const compressedFile = await imageCompression(imageFile as File, options);
-		console.log(
-			"compressedFile instanceof Blob",
-			compressedFile instanceof Blob,
-		); // true
-		console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
-
-		// Create a download link for the compressed file
-		const downloadLink = URL.createObjectURL(compressedFile);
-
-		return {
-			blob: compressedFile,
-			downloadLink,
-		};
-	} catch (error) {
-		console.log(error);
-		throw error;
-	}
-}
diff --git a/apps/splash-2025/src/lib/upload-s3.ts b/apps/splash-2025/src/lib/upload-s3.ts
deleted file mode 100644
index dd6dd645dd..0000000000
--- a/apps/splash-2025/src/lib/upload-s3.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-export const uploadFileToS3 = async (
-	fileBlob: File,
-	fileName: string,
-	mimeType: string,
-) => {
-	const body = {
-		route: "presigned_post",
-		key: fileName,
-		mime_type: mimeType,
-	};
-
-	const resp = await fetch(
-		`${import.meta.env.VITE_API_URL}/generate_presigned_post`,
-		{
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(body),
-		},
-	);
-
-	const response = await resp.json();
-
-	const presignedPost = response.data;
-
-	const url = await uploadFileToS3PresignedUrl(
-		fileBlob,
-		mimeType,
-		presignedPost.fields,
-		presignedPost.url,
-	);
-
-	return url;
-};
-
-async function uploadFileToS3PresignedUrl(
-	fileBlob: File,
-	mimeType: string,
-	fields: Record<string, string>,
-	url: string,
-): Promise<string> {
-	try {
-		const formData = new FormData();
-		for (const [key, value] of Object.entries(fields)) {
-			formData.append(key, value);
-		}
-
-		formData.append("Content-Type", mimeType);
-		formData.append("file", fileBlob);
-
-		const response = await fetch(url, {
-			method: "POST",
-			body: formData,
-		});
-
-		for (const [key, value] of Object.entries(response.headers)) {
-			console.log(key, value);
-		}
-
-		// S3 returns a Location header with the url of the uploaded file
-		const location = response.headers.get("Location");
-		if (!location) {
-			throw new Error("File upload failed: No location header");
-		}
-
-		return location;
-	} catch (e) {
-		throw new Error(`File upload failed: ${e}`);
-	}
-}
diff --git a/apps/splash-2025/upload.sh b/apps/splash-2025/upload.sh
index 308809cf35..f839d4734a 100644
--- a/apps/splash-2025/upload.sh
+++ b/apps/splash-2025/upload.sh
@@ -9,7 +9,7 @@ set -e
 pnpm build
 
 # Configuration - CHANGE THESE VALUES
-BUCKET_NAME="kvittering.online.ntnu.no"  # Must be globally unique
+BUCKET_NAME="splash.online.ntnu.no"  # Must be globally unique
 REGION="eu-north-1"                  # AWS region
 DIST_DIR="dist"
 


Reviews:
user: login: junlarsen
body: two small nits otherwise fine
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-19T19:22:36Z
user: login: henrikskog
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T19:24:52Z

Review comments:
diff_hunk: @@ -0,0 +1,90 @@
+name: Production deployment 2
+on:
+  push:
+    branches:
+      - 03-19-set_up_continous_deployment_for_splash
+permissions:
+  id-token: write   
+  contents: read
+jobs:
+  deploy-splash-frontend:
+    name: Deploy monoweb/splash-2025
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-region: eu-north-1
+          role-to-assume: arn:aws:iam::891459268445:role/MonowebProdSplashFrontendCIRole
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.15.7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0
+          cache: 'pnpm'
+          
+      - name: Get OIDC Token
+        uses: actions/github-script@v6
+        id: get-oidc-token
+        with:
+          script: |
+            const id_token = await core.getIDToken()
+            core.setOutput('oidc_token', id_token)
+      - uses: dopplerhq/cli-action@v2
+      # Identity comes from the configured doppler account identity 
+      # (see last step https://docs.doppler.com/docs/service-account-identities#configure-the-identity)
+      - run: |
+          doppler oidc login \
+            --api-host https://api.doppler.com \
+            --scope=. \
+            --identity=8f25d2a1-28b9-4f2a-8fb3-115b10f456b2 \
+            --token=${{ steps.get-oidc-token.outputs.oidc_token }}
+      - name: Install dependencies
+        working-directory: apps/splash-2025
path: .github/workflows/test-deploy.yml
user: login: junlarsen
body: Isn't thiss a part of the monorepo? In that case it should just be from the root
created_at: 2025-03-19T19:21:47Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,90 @@
+name: Production deployment 2
+on:
+  push:
+    branches:
+      - 03-19-set_up_continous_deployment_for_splash
+permissions:
+  id-token: write   
+  contents: read
+jobs:
+  deploy-splash-frontend:
+    name: Deploy monoweb/splash-2025
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-region: eu-north-1
+          role-to-assume: arn:aws:iam::891459268445:role/MonowebProdSplashFrontendCIRole
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.15.7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0
+          cache: 'pnpm'
+          
+      - name: Get OIDC Token
+        uses: actions/github-script@v6
+        id: get-oidc-token
+        with:
+          script: |
+            const id_token = await core.getIDToken()
+            core.setOutput('oidc_token', id_token)
+      - uses: dopplerhq/cli-action@v2
+      # Identity comes from the configured doppler account identity 
+      # (see last step https://docs.doppler.com/docs/service-account-identities#configure-the-identity)
+      - run: |
+          doppler oidc login \
+            --api-host https://api.doppler.com \
+            --scope=. \
+            --identity=8f25d2a1-28b9-4f2a-8fb3-115b10f456b2 \
+            --token=${{ steps.get-oidc-token.outputs.oidc_token }}
+      - name: Install dependencies
+        working-directory: apps/splash-2025
+        run: pnpm install
+      - name: See projects
+        working-directory: apps/splash-2025
+        run: doppler projects
path: .github/workflows/test-deploy.yml
user: login: junlarsen
body: Remove probably?
created_at: 2025-03-19T19:22:00Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,90 @@
+name: Production deployment 2
+on:
+  push:
+    branches:
+      - 03-19-set_up_continous_deployment_for_splash
+permissions:
+  id-token: write   
+  contents: read
+jobs:
+  deploy-splash-frontend:
+    name: Deploy monoweb/splash-2025
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-region: eu-north-1
+          role-to-assume: arn:aws:iam::891459268445:role/MonowebProdSplashFrontendCIRole
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.15.7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0
+          cache: 'pnpm'
+          
+      - name: Get OIDC Token
+        uses: actions/github-script@v6
+        id: get-oidc-token
+        with:
+          script: |
+            const id_token = await core.getIDToken()
+            core.setOutput('oidc_token', id_token)
+      - uses: dopplerhq/cli-action@v2
+      # Identity comes from the configured doppler account identity 
+      # (see last step https://docs.doppler.com/docs/service-account-identities#configure-the-identity)
+      - run: |
+          doppler oidc login \
+            --api-host https://api.doppler.com \
+            --scope=. \
+            --identity=8f25d2a1-28b9-4f2a-8fb3-115b10f456b2 \
+            --token=${{ steps.get-oidc-token.outputs.oidc_token }}
+      - name: Install dependencies
+        working-directory: apps/splash-2025
+        run: pnpm install
+      - name: See projects
+        working-directory: apps/splash-2025
+        run: doppler projects
path: .github/workflows/test-deploy.yml
user: login: henrikskog
body: just for debugging, service account did not have access to all projects
created_at: 2025-03-19T19:24:52Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-19T19:15:16Z
body: [vc]: #WJC1J+0yuS5GQ8EJKptt4G5Nxnaok+xsRJMpxNIIKwE=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ3ZWIiLCJyb290RGlyZWN0b3J5IjoiYXBwcy93ZWIiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vZG90a29tL3dlYi9GV2pEWmE0enh0RUF5dW0xczRwV2hCZFpXWkhHIiwicHJldmlld1VybCI6IndlYi1naXQtMDMtMTktc2V0dXBjb250aW5vdXNkZXBsb3ltZW50Zm9yc3BsYXNoLWRvdGtvbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJkYXNoYm9hcmQiLCJyb290RGlyZWN0b3J5IjoiYXBwcy9kYXNoYm9hcmQiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vZG90a29tL2Rhc2hib2FyZC9IQnBWWFhFNkF5WHZVU1ZqMTVxa1paTGtwclJ4IiwicHJldmlld1VybCI6ImRhc2hib2FyZC1naXQtMDMtMTktc2V0dXBjb250aW5vdXNkZXBsb3ltZW50Zm9yc3BsYXNoLWRvdGtvbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkcifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **dashboard** | 🔄 Building ([Inspect](https://vercel.com/dotkom/dashboard/HBpVXXE6AyXvUSVj15qkZZLkprRx)) | [Visit Preview](https://dashboard-git-03-19-setupcontinousdeploymentforsplash-dotkom.vercel.app) | Mar 19, 2025 7:37pm |

<details><summary>1 Skipped Deployment</summary>

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **web** | ⬜️ Ignored ([Inspect](https://vercel.com/dotkom/web/FWjDZa4zxtEAyum1s4pWhBdZWZHG)) | [Visit Preview](https://web-git-03-19-setupcontinousdeploymentforsplash-dotkom.vercel.app) | Mar 19, 2025 7:37pm |
</details>



author_association: NONE
user: login: henrikskog
created_at: 2025-03-19T19:15:30Z
body: * **#1299** <a href="https://app.graphite.dev/github/pr/dotkom/monoweb/1299?utm_source=stack-comment-icon" target="_blank"><img src="https://static.graphite.dev/graphite-32x32-black.png" alt="Graphite" width="10px" height="10px"/></a> 👈 <a href="https://app.graphite.dev/github/pr/dotkom/monoweb/1299?utm_source=stack-comment-view-in-graphite" target="_blank">(View in Graphite)</a>
* `main`


<h2></h2>

This stack of pull requests is managed by <a href="https://graphite.dev?utm-source=stack-comment"><b>Graphite</b></a>. Learn more about <a href="https://stacking.dev/?utm_source=stack-comment">stacking</a>.
<!-- Current dependencies on/for this PR: -->
author_association: CONTRIBUTOR