try to make lambda serve index.html

Co-Authored-By: Marjan Kalanaki <15894063+marjisound@users.noreply.github.com>
guardian · Jan 23, 2024 · 1adc2f6 · 1adc2f6
1 parent 723e989
commit 1adc2f6
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 46 deletions.
diff --git a/packages/api/.gitignore b/packages/api/.gitignore
@@ -1,5 +1,5 @@
 # dependencies
 node_modules/
 
-./dist
-./target
+dist/
+target/
diff --git a/packages/api/index.html b/packages/api/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Guardian Transcription Service"
+    />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Transcribe</title>
+    <!-- <script src="https://accounts.google.com/gsi/client" async></script> -->
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root">
+        <p>Hello world</p>
+    </div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/packages/api/index.ts b/packages/api/index.ts
@@ -1,73 +1,60 @@
-// import {
-// 	APIGatewayProxyEvent,
-// 	APIGatewayEventRequestContext,
-// 	APIGatewayProxyCallback,
-// 	APIGatewayProxyStructuredResultV2,
-// } from 'aws-lambda';
 import express from 'express';
-import asyncHandler from "express-async-handler";
-import serverlessExpress from "@codegenie/serverless-express";
+import asyncHandler from 'express-async-handler';
+import serverlessExpress from '@codegenie/serverless-express';
 import bodyParser from 'body-parser';
-
-// export const handler = (
-// 	event: APIGatewayProxyEvent,
-// 	context: APIGatewayEventRequestContext,
-// 	callback: APIGatewayProxyCallback,
-// ): Promise<APIGatewayProxyStructuredResultV2> => {
-// 	const message = 'Hello World!';
-// 	console.log(message);
-//     console.log(event.body, context.accountId, callback.name);
-// 	const result = {
-// 		"isBase64Encoded": true,
-// 		"statusCode": 200,
-// 		"headers": {  },
-// 		"body": message
-// 	}
-// 	return Promise.resolve(result);
-// };
+import path from 'path';
 
 const getApp = async () => {
 	const app = express();
 	const apiRouter = express.Router();
 
-	app.use(bodyParser.json({ limit: "40mb" }));
+	app.use(bodyParser.json({ limit: '40mb' }));
 
 	apiRouter.get(
-		"/healthcheck",
+		'/healthcheck',
 		asyncHandler(async (req, res) => {
-			res.send("It lives!")
-		})
+			res.send('It lives!');
+		}),
 	);
 
-	app.use("/api", apiRouter);
+	app.use('/api', apiRouter);
+
+	if (process.env['AWS_EXECUTION_ENV'] !== undefined) {
+		app.use(express.static('frontend'));
+		app.get('/*', (req, res) => {
+			res.sendFile(path.resolve(__dirname, 'frontend', 'index.html'));
+		});
+	}
 
 	return app;
-}
+};
 
 let api;
-if (process.env["AWS_EXECUTION_ENV"] !== undefined){
-	console.log("Running on lambda")
+if (process.env['AWS_EXECUTION_ENV'] !== undefined) {
+	console.log('Running on lambda');
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let serverlessExpressHandler: any
-	const serverlessHandler = getApp().then((app) => (serverlessExpressHandler = serverlessExpress({ app }).handler));
+	let serverlessExpressHandler: any;
+	const serverlessHandler = getApp().then(
+		(app) => (serverlessExpressHandler = serverlessExpress({ app }).handler),
+	);
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	api = async (event: any, context: any) => {
 		if (!serverlessExpressHandler) {
 			await serverlessHandler;
 		}
-		return serverlessExpressHandler(event, context)
-	}
+		return serverlessExpressHandler(event, context);
+	};
 } else {
-	console.log("running locally");
+	console.log('running locally');
 	// Running locally. Start Express ourselves
-	const port = 9103
+	const port = 9103;
 	getApp().then((app) => {
 		app.listen(port, () => {
-			console.log(`Server now listening on port: ${port}`)
-		})
-	})
+			console.log(`Server now listening on port: ${port}`);
+		});
+	});
 }
 
-export { api }
+export { api };
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "esbuild --bundle --platform=node --target=node20 --outfile=dist/index.js index.ts",
+    "build-frontend": "mkdir -p dist/frontend; cp index.html dist/frontend/index.html",
     "package": "cd dist; mkdir -p ../target; zip -qr ../target/api.zip ./*"
   },
   "keywords": [],

diff --git a/packages/cdk/lib/transcription-service.ts b/packages/cdk/lib/transcription-service.ts
@@ -13,7 +13,7 @@ export class TranscriptionService extends GuStack {
 
     new GuApiLambda(this, "transcription-service-api", {
       fileName: "api.zip",
-      handler: "index.api",
+      handler: "api/index.api",
       runtime: Runtime.NODEJS_20_X,
       monitoringConfiguration: {
         noMonitoring: true,