feat: Serve react app through express server

package.json

@@ -14,7 +14,8 @@
     ],
     "nohoist": [
       "**/babel-loader",
-      "**/webpack"
+      "**/webpack",
+      "**/@automatisch/web"
     ]
   },
   "devDependencies": {

packages/backend/package.json

@@ -16,6 +16,7 @@
     "db:migrate": "knex migrate:latest"
   },
   "dependencies": {
+    "@automatisch/web": "0.1.0",
     "@octokit/oauth-methods": "^1.2.6",
     "axios": "0.24.0",
     "bcrypt": "^5.0.1",

packages/backend/src/app.ts

@@ -1,4 +1,4 @@
-import appConfig from './config/app'
+import appConfig from './config/app';
 import createError from 'http-errors';
 import express, { Request, Response, NextFunction } from 'express';
 import cors from 'cors';
@@ -7,6 +7,7 @@ import graphQLInstance from './helpers/graphql-instance';
 import logger from './helpers/logger';
 import morgan from './helpers/morgan';
 import appAssetsHandler from './helpers/app-assets-handler';
+import webUIHandler from './helpers/web-ui-handler';
 import errorHandler from './helpers/error-handler';
 import './config/database';
 import authentication from './helpers/authentication';
@@ -14,7 +15,7 @@ import authentication from './helpers/authentication';
 const app = express();
 const port = appConfig.port;
 
-appAssetsHandler(app)
+appAssetsHandler(app);
 
 app.use(morgan);
 app.use(express.json());
@@ -23,13 +24,15 @@ app.use(cors(corsOptions));
 app.use(authentication);
 app.use('/graphql', graphQLInstance);
 
+webUIHandler(app);
+
 // catch 404 and forward to error handler
-app.use(function(req: Request, res: Response, next: NextFunction) {
+app.use(function (req: Request, res: Response, next: NextFunction) {
   next(createError(404));
 });
 
 app.use(errorHandler);
 
 app.listen(port, () => {
-  logger.info(`Server is listening on ${port}`)
+  logger.info(`Server is listening on ${port}`);
-})
+});

packages/backend/src/config/app.ts

@@ -2,37 +2,46 @@ import * as dotenv from 'dotenv';
 dotenv.config();
 
 type AppConfig = {
-  host: string,
+  host: string;
-  protocol: string
+  protocol: string;
-  port: string,
+  port: string;
-  webAppUrl: string,
+  webAppUrl?: string;
-  appEnv: string,
+  appEnv: string;
-  postgresDatabase: string,
+  postgresDatabase: string;
-  postgresPort: number,
+  postgresPort: number;
-  postgresHost: string,
+  postgresHost: string;
-  postgresUsername: string,
+  postgresUsername: string;
-  postgresPassword: string,
+  postgresPassword: string;
-  postgresEnableSsl: boolean,
+  postgresEnableSsl: boolean;
-  baseUrl?: string,
+  baseUrl?: string;
-  encryptionKey: string
+  encryptionKey: string;
-}
+  serveWebAppSeparately: boolean;
+};
 
 const appConfig: AppConfig = {
   host: process.env.HOST || 'localhost',
   protocol: process.env.PROTOCOL || 'http',
   port: process.env.PORT || '3000',
-  webAppUrl: process.env.WEB_APP_URL || 'https://localhost:3001',
   appEnv: process.env.APP_ENV || 'development',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresPort: parseInt(process.env.POSTGRES_PORT) || 5432,
   postgresHost: process.env.POSTGRES_HOST || 'localhost',
-  postgresUsername: process.env.POSTGRES_USERNAME || 'automatish_development_user',
+  postgresUsername:
+    process.env.POSTGRES_USERNAME || 'automatish_development_user',
   postgresPassword: process.env.POSTGRES_PASSWORD,
   postgresEnableSsl: process.env.POSTGRES_ENABLE_SSL === 'true' ? true : false,
-  encryptionKey: process.env.ENCRYPTION_KEY
+  encryptionKey: process.env.ENCRYPTION_KEY,
+  serveWebAppSeparately:
+    process.env.SERVE_WEB_APP_SEPARATELY === 'true' ? true : false,
+};
+
+if (appConfig.serveWebAppSeparately) {
+  appConfig.webAppUrl = process.env.WEB_APP_URL || 'http://localhost:3001';
+} else {
+  appConfig.webAppUrl = `${appConfig.protocol}://${appConfig.host}:${appConfig.port}`;
 }
 
-if(!appConfig.encryptionKey) {
+if (!appConfig.encryptionKey) {
   throw new Error('ENCRYPTION_KEY environment variable needs to be set!');
 }
 

packages/backend/src/helpers/web-ui-handler.ts

@@ -0,0 +1,16 @@
+import express, { Application } from 'express';
+import { dirname, join } from 'path';
+import appConfig from '../config/app';
+
+const webUIHandler = async (app: Application) => {
+  if (appConfig.serveWebAppSeparately) return;
+
+  const webAppPath = require.resolve('@automatisch/web');
+  const webBuildPath = join(dirname(webAppPath), 'build');
+  const indexHtml = join(dirname(webAppPath), 'build', 'index.html');
+
+  app.use(express.static(webBuildPath));
+  app.get('*', (_req, res) => res.sendFile(indexHtml));
+};
+
+export default webUIHandler;

packages/web/package.json

@@ -32,6 +32,7 @@
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
+  "main": "index.js",
   "scripts": {
     "dev": "react-scripts start",
     "build": "react-scripts build",