INCS-5747 - Add dockerized support for the SPA (#56)

Author: krazziekay

.env.example

@@ -5,6 +5,9 @@
 # 3. Use the created domain for `APP_URL` (e.g., https://foo-bar-baz.ngrok-free.app)
 APP_URL=
 
+# Environment type
+NODE_ENV=
+
 ###############################################################
 ## The env variables below are required for development only ##
 ###############################################################

docker-compose.yml

@@ -21,6 +21,17 @@ services:
       interval: 5s
       retries: 100
 
+  spa:
+    container_name: single-page-app
+    build:
+      context: .
+      dockerfile: spa-docker/Dockerfile
+    volumes:
+      - ./spa:/app/spa
+    ports:
+      - "3010:3010"
+    command: yarn start
+
   installation:
     depends_on:
       app:

package.json

@@ -11,7 +11,7 @@
     "clean": "rimraf src/**/*.js test/**/*.js build",
     "clean:db": "rimraf db.json",
     "lint": "eslint . --ext .ts,.tsx",
-    "build": "tsc --project .",
+    "build": "tsc --project . && cd spa && yarn build",
     "start": "tsnd --watch=.env,**/*.squirrelly --inspect=0.0.0.0:9229 --respawn --transpile-only -- src/server.ts",
     "test:e2e": "run-s test:e2e:install test:e2e:start",
     "test:e2e:debug": "PWDEBUG=1 run-s test:e2e:install test:e2e:headed",

spa-docker/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:lts-alpine as build
+
+COPY ./spa /app/spa
+WORKDIR /app/spa
+
+RUN yarn install
+
+EXPOSE 3010
+
+CMD [ "yarn", "start" ]
+

spa/README.md

@@ -8,11 +8,13 @@ Reusable page components are included, plus examples.
 
 # How to use the app
 
-A proxy server has been set up for local instances. 
+The front end React app should already be up if you ran `docker compose up`.
 
-This lets you work on your Connect app locally while still interacting with Jira.
+> **Note:** <br/> For development environment, this React app is proxied into the running node server.  <br/>However, for production environment, you'll need to create the build for the react app and make sure the environment variable NODE_ENV is set to "production".
 
-To view the front end on a Jira instance:
+# Run React app separately
+
+In case you want to run the React app separately from docker, then follow the steps below:
 
 1. **Run the Node app:** the Node app is the back end of your Connect app and handles requests from Jira. Use the command "yarn start" to start the app.
 
@@ -21,5 +23,3 @@ To view the front end on a Jira instance:
 3. **Run ngrok:** ngrok provides a public URL that forwards incoming requests to your local server. Run the command "ngrok http --domain="yourdomainname.com" 3000" to start ngrok and point it to your local server  on port 3000 (make sure to add in your actual domain name).
 
 The Node app, React app, and ngrok all need to be running for the local development environment to run correctly. Run each process in its own terminal window or tab.
-
-Note: These three steps will not be necessary once Docker support is implemented.

spa/src/pagesData/startConnectionData.tsx

@@ -26,6 +26,6 @@ export interface startConnectionProps {
 export const startConnectionData = {
 	appName: "Your App",
 	appLogoPath: "/public/assets/jira-logo.svg", // Replace 'appLogoPath' with the path to your application's logo.
-	AppMarketplaceUrl: "",
+	AppMarketplaceUrl: "com.github.integration.production",
 	integrationRequirements: data,
 };

src/routes/router.ts

@@ -5,6 +5,7 @@ import { eventsRouter } from "./events";
 import { webhooksRouter } from "./webhooks";
 import { apiRouter } from "./api";
 import { pageRouter } from "./pages";
+import { spaRouter } from "./spa";
 
 export const RootRouter = Router();
 
@@ -41,4 +42,11 @@ RootRouter.use("/webhooks", webhooksRouter);
 /************************************************************************************************************************
  * API
  ************************************************************************************************************************/
-RootRouter.use("/api/example", apiRouter);
+RootRouter.use("/api/example", apiRouter);
+
+/************************************************************************************************************************
+ * Single Page App Views
+ *
+ * This route is only used for the production builds of SPA.
+ ************************************************************************************************************************/
+RootRouter.use("/spa", spaRouter);

src/routes/spa.ts

@@ -0,0 +1,20 @@
+import { Router, static as Static } from "express";
+import path from "path";
+import fs from "fs/promises";
+
+export const spaRouter = Router();
+
+const rootPath = process.cwd();
+
+//Assets from within the new spa experience in /spa/build/static
+spaRouter.use("/static", Static(path.join(rootPath, "spa/build/static")));
+
+let indexHtmlContent = "";
+
+spaRouter.use("/*", async (_, res) => {
+	if (!indexHtmlContent) {
+		indexHtmlContent = await fs.readFile(path.join(process.cwd(), "spa/build/index.html"), "utf-8");
+	}
+
+	res.status(200).send(indexHtmlContent);
+});

src/spa-proxy.ts

@@ -1,20 +1,21 @@
 import { Express } from "express";
 import httpProxy from "http-proxy";
+import { isNodeDev } from "./utils/is-node-dev";
 
 const SPA_PATH = "/spa";
 
 const proxy = httpProxy.createProxyServer({
 	target: {
-		host: "localhost",
+		host: "single-page-app",
 		port: 3010,
 		path: SPA_PATH
 	},
 	ws: false
 });
 
 export const proxyLocalUIForDev = (app: Express) => {
-	app.use(SPA_PATH, (req, res) => {
-		return proxy.web(req, res);
-	});
+	if (isNodeDev()) {
+		app.use(SPA_PATH, (req, res) => proxy.web(req, res));
+	}
 };
 

src/utils/is-node-dev.ts

@@ -0,0 +1,9 @@
+export enum EnvironmentEnum {
+	production = "production",
+	development = "development",
+}
+
+export const getNodeEnv: () => EnvironmentEnum = () => EnvironmentEnum[process.env.NODE_ENV || ""] as EnvironmentEnum | undefined || EnvironmentEnum.development;
+export const isNodeEnv = (env: EnvironmentEnum) => getNodeEnv() === env;
+export const isNodeProd = () => isNodeEnv(EnvironmentEnum.production);
+export const isNodeDev = () => isNodeEnv(EnvironmentEnum.development);