Switch to use .env for configure frontend

Author: d6u

deploy.sh

@@ -63,10 +63,14 @@ aws cloudformation deploy \
   --parameter-overrides ServerSourceS3Key=$SOURCE_ZIP
 
 printf "\n>>> Saving the CloudFormation output to a JSON file...\n"
-aws cloudformation describe-stacks --stack-name GameroomStack | jq ".Stacks[0].Outputs | map({(.OutputKey): .OutputValue}) | add" > frontend/src/api_endpoints.json
+
+aws cloudformation describe-stacks \
+  --stack-name GameroomStack \
+  | jq -r '(.Stacks[0].Outputs)[] | "REACT_APP_\(.OutputKey | gsub("(?<a>[a-z])(?<b>[A-Z])"; "\(.a)_\(.b)") | ascii_upcase)=\(.OutputValue)"' \
+  > frontend/.env
 
 printf "\n>>> The output of CloudFormation is:\n"
-cat frontend/src/api_endpoints.json
+cat frontend/.env
 
 # Enter /frontend
 pushd frontend

deploy/cloudformation-template.yaml

@@ -662,7 +662,3 @@ Outputs:
     Value: !GetAtt ApiGatewayApiHttp.ApiEndpoint
   WebSocketEndpointUrl:
     Value: !Join ["/", [!GetAtt ApiGatewayApiWebSocket.ApiEndpoint, staging]]
-  S3BucketFrontEndName:
-    Value: !Ref S3BucketFrontEnd
-  CloudFrontDomainName:
-    Value: !GetAtt CloudFrontDistribution.DomainName

frontend/src/apis/Api.ts

@@ -1,6 +1,6 @@
 import { Delta, Snapshot } from "shared-models";
 
-import endpoints from "../api_endpoints.json";
+import { HTTP_ENDPOINT_URL } from "../constants";
 
 export async function createRoom(): Promise<
   | {
@@ -12,7 +12,7 @@ export async function createRoom(): Promise<
       roomData: { roomId: string };
     }
 > {
-  const response = await fetch(`${endpoints.HttpEndpointUrl}/rooms`, {
+  const response = await fetch(`${HTTP_ENDPOINT_URL}/rooms`, {
     method: "POST",
     mode: "cors",
   });
@@ -38,7 +38,7 @@ export async function getRoomSnapshot(
   roomId: string
 ): Promise<GetRoomSnapsotResponse> {
   const response = await fetch(
-    `${endpoints.HttpEndpointUrl}/rooms/${roomId}/snapshot`,
+    `${HTTP_ENDPOINT_URL}/rooms/${roomId}/snapshot`,
     {
       method: "GET",
       mode: "cors",
@@ -64,7 +64,7 @@ export async function getRoomDeltas(
   toSeq: number
 ): Promise<Delta[]> {
   const response = await fetch(
-    `${endpoints.HttpEndpointUrl}/rooms/${roomId}/deltas?fromSeq=${fromSeq}&toSeq=${toSeq}`,
+    `${HTTP_ENDPOINT_URL}/rooms/${roomId}/deltas?fromSeq=${fromSeq}&toSeq=${toSeq}`,
     {
       method: "GET",
       mode: "cors",

frontend/src/apis/WebSocketManager.ts

@@ -19,7 +19,7 @@ import {
   isLeaderSelectionMessage,
 } from "shared-models";
 
-import endpoints from "../api_endpoints.json";
+import { WEB_SOCKET_ENDPOINT_URL } from "../constants";
 import Logger from "../utils/Logger";
 
 class WebSocketManager {
@@ -39,7 +39,7 @@ class WebSocketManager {
     // Cannot provide specific type for WebSocketSubject because the provided
     // type definition force incoming and outgoing message to be the same type.
     this.webSocketSubject = webSocket<any>({
-      url: endpoints.WebSocketEndpointUrl,
+      url: WEB_SOCKET_ENDPOINT_URL,
       openObserver: {
         next: () => {
           this.logger.debug("^^^ connection open");

frontend/src/constants.ts

@@ -0,0 +1,5 @@
+export const HTTP_ENDPOINT_URL = process.env
+  .REACT_APP_HTTP_ENDPOINT_URL as string;
+
+export const WEB_SOCKET_ENDPOINT_URL = process.env
+  .REACT_APP_WEB_SOCKET_ENDPOINT_URL as string;