Make the server and client work

Add missing dependencies, update webpack, so that `yarn start` runs the server and `yarn build:dev` and `yarn build:prod` build the client application. The transition web application is now fully functional in this repo.
greenscientist · Nov 7, 2022 · 23550d6 · 23550d6
1 parent 46810b3
commit 23550d6
Show file tree

Hide file tree

Showing 10 changed files with 2,041 additions and 208 deletions.
diff --git a/.gitignore b/.gitignore
@@ -80,12 +80,11 @@ services/json2capnp/testData
 
 # custom
 public/dist/
-public/index.html
 packages/**/lib
 packages/**/node_modules
 packages/transition/backend/file/
 tests/runtime
 tests/test
 
 #example apps
-examples/**/runtime
+examples/runtime
diff --git a/package.json b/package.json
@@ -19,15 +19,11 @@
         "compile": "yarn workspaces run compile",
         "compile:dev": "yarn wsrun compile:dev",
         "create-user": "yarn workspace chaire-lib-backend run create-user",
-        "build:dev": "yarn workspace transition-legacy run build:dev",
-        "build:prod": "yarn workspace transition-legacy run build:prod",
-        "build:transition:dev": "yarn workspace transition-frontend run build:dev",
-        "build:transition:prod": "yarn workspace transition-frontend run build:prod",
-        "start:debug": "yarn workspace transition-legacy run start:debug",
-        "start": "yarn workspace transition-legacy run start",
-        "start:tracing": "yarn workspace transition-legacy run start:tracing",
-        "start:transition": "yarn workspace transition-backend run start",
-        "start:transition:tracing": "yarn workspace transition-backend run start:tracing",
+        "build:dev": "yarn workspace transition-frontend run build:dev",
+        "build:prod": "yarn workspace transition-frontend run build:prod",
+        "start": "yarn workspace transition-backend run start",
+        "start:debug": "yarn workspace transition-backend run start:debug",
+        "start:tracing": "yarn workspace transition-backend run start:tracing",
         "start:json2capnp": "cd services/json2capnp && cargo run --release",
         "test": "yarn workspaces run test",
         "test:unit": "yarn workspaces run test:unit",

diff --git a/packages/chaire-lib-common/src/config/shared/__tests__/project.config.test.ts b/packages/chaire-lib-common/src/config/shared/__tests__/project.config.test.ts
@@ -5,7 +5,7 @@ test('Expected default', () => {
     expect(projectConfig.maxFileUploadMB).toEqual(256);
     expect(projectConfig.mapDefaultCenter).toEqual({ lon: -73.6131, lat: 45.5041 });
     expect(projectConfig.separateAdminLoginPage).toEqual(false);
-    expect(projectConfig.projectShortname).toBeUndefined();
+    expect(projectConfig.projectShortname).toEqual('default');
 });
 
 test('setProjectConfiguration', () => {

diff --git a/packages/chaire-lib-common/src/config/shared/project.config.ts b/packages/chaire-lib-common/src/config/shared/project.config.ts
@@ -50,7 +50,7 @@ export type ProjectConfiguration<AdditionalConfig> = {
 const projectConfig: ProjectConfiguration<any> = {
     mapDefaultCenter: { lon: -73.6131, lat: 45.5041 },
     separateAdminLoginPage: false,
-    projectShortname: process.env.PROJECT_SHORTNAME,
+    projectShortname: 'default',
     userDiskQuota: '1gb',
     maxFileUploadMB: 256,
     maxParallelCalculators: 1

diff --git a/packages/chaire-lib-frontend/package.json b/packages/chaire-lib-frontend/package.json
@@ -44,6 +44,7 @@
     "child_process": "^1.0.2",
     "css-loader": "^3.6.0",
     "date-fns": "^2.16.1",
+    "font-awesome": "^4.7.0",
     "geojson": "^0.5.0",
     "history": "^4.9.0",
     "i18next": "^19.5.1",
@@ -80,8 +81,7 @@
     "remark-gfm": "^1.0.0",
     "socket.io-file-client": "^2.0.2",
     "transition-common": "0.2.0-2",
-    "typescript": "^4.4.4",
-    "webpack": "^4.43.0"
+    "typescript": "^4.4.4"
   },
   "devDependencies": {
     "@babel/plugin-transform-regenerator": "^7.10.1",
@@ -103,9 +103,6 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-runtime": "^6.26.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "compression-webpack-plugin": "^7.0.0",
-    "copy-webpack-plugin": "^7.0.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
@@ -115,11 +112,9 @@
     "eslint": "^7.32.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.27.1",
-    "html-webpack-plugin": "^4.5.0",
     "jest": "^27.3.1",
     "jest-each": "^27.3.1",
     "jest-fetch-mock": "^3.0.3",
-    "mini-css-extract-plugin": "^1.3.3",
     "mockdate": "^3.0.2",
     "prettier-eslint-cli": "^5.0.1",
     "react-select-event": "^5.0.0",

diff --git a/packages/transition-backend/package.json b/packages/transition-backend/package.json
@@ -70,6 +70,8 @@
         "zod": "^3.9.8"
     },
     "devDependencies": {
+        "@babel/cli": "^7.19.3",
+        "@babel/node": "^7.20.0",
         "@types/express-socket.io-session": "^1.3.6",
         "@types/geojson": "^7946.0.7",
         "@types/inquirer": "^8.2.1",

diff --git a/packages/transition-backend/src/serverApp.ts b/packages/transition-backend/src/serverApp.ts
@@ -32,10 +32,14 @@ export const setupServer = (app: Express) => {
         throw 'Project short name is not set';
     }
 
+    // Public directory from which files are served
+    const publicDirectory = path.join(__dirname, '..', '..', '..', 'public');
+    const publicDistDirectory = path.join(publicDirectory, 'dist', projectShortname);
+    // Local path where locales are stored
+    const localeDirectory = path.join(__dirname, '..', '..', '..', 'locales');
+
     // FIXME Why this dir?
-    directoryManager.createDirectoryIfNotExistsAbsolute(
-        path.join(__dirname, '..', '..', '..', '..', 'public', 'dist', projectShortname)
-    );
+    directoryManager.createDirectoryIfNotExistsAbsolute(publicDistDirectory);
     directoryManager.createDirectoryIfNotExistsAbsolute(config.projectDirectory);
     directoryManager.createDirectoryIfNotExists('logs');
     directoryManager.createDirectoryIfNotExists('imports');
@@ -49,18 +53,11 @@ export const setupServer = (app: Express) => {
     directoryManager.createDirectoryIfNotExists('userData');
 
     const indexPath = path.join(
-        __dirname,
-        '..',
-        '..',
-        '..',
-        '..',
-        'public',
-        'dist',
-        projectShortname,
-        `index-transition-${projectShortname}${process.env.NODE_ENV === 'test' ? '_test' : ''}.html`
+        publicDistDirectory,
+        `index-${projectShortname}${process.env.NODE_ENV === 'test' ? '_test' : ''}.html`
     );
-    const publicPath = express.static(path.join(__dirname, '..', '..', '..', '..', 'public', 'dist', projectShortname));
-    const localePath = express.static(path.join(__dirname, '..', '..', '..', '..', 'locales', 'transition'));
+    const publicPath = express.static(publicDistDirectory);
+    const localePath = express.static(localeDirectory);
 
     const KnexSessionStore = KnexConnection(expressSession);
     const sessionStore = new KnexSessionStore({
@@ -93,7 +90,7 @@ export const setupServer = (app: Express) => {
     app.use(passport.initialize());
     app.use(passport.session());
     app.use(requestIp.mw()); // to get users ip addresses
-    app.use(favicon(path.join(__dirname, '..', '..', '..', '..', 'public', 'favicon.ico')));
+    app.use(favicon(path.join(publicDirectory, 'favicon.ico')));
 
     app.set('trust proxy', true); // allow nginx or other proxy server to send request ip address
 
@@ -123,21 +120,7 @@ export const setupServer = (app: Express) => {
         const filename = req.params.file;
         const userId = (req.user as UserAttributes).id;
         if (fileManager.fileExistsAbsolute(`${directoryManager.userDataDirectory}/${userId}/exports/${filename}`)) {
-            res.sendFile(
-                path.join(
-                    __dirname,
-                    '..',
-                    '..',
-                    '..',
-                    '..',
-                    'projects',
-                    projectShortname,
-                    'userData',
-                    String(userId),
-                    'exports',
-                    filename
-                )
-            );
+            res.sendFile(path.join(directoryManager.userDataDirectory, String(userId), 'exports', filename));
         } else {
             res.status(404).json({ status: 'FileDoesNotExist' });
         }
@@ -150,21 +133,7 @@ export const setupServer = (app: Express) => {
         const jobId = req.params.jobId;
         const userId = (req.user as UserAttributes).id;
         if (fileManager.fileExistsAbsolute(`${directoryManager.userDataDirectory}/${userId}/${jobId}/${filename}`)) {
-            res.sendFile(
-                path.join(
-                    __dirname,
-                    '..',
-                    '..',
-                    '..',
-                    '..',
-                    'projects',
-                    projectShortname,
-                    'userData',
-                    String(userId),
-                    String(jobId),
-                    filename
-                )
-            );
+            res.sendFile(path.join(directoryManager.userDataDirectory, String(userId), String(jobId), filename));
         } else {
             res.status(404).json({ status: 'FileDoesNotExist' });
         }

diff --git a/packages/transition-frontend/package.json b/packages/transition-frontend/package.json
@@ -39,14 +39,12 @@
     "chaire-lib-common": "^0.2.2",
     "chaire-lib-frontend": "^0.2.2",
     "child_process": "^1.0.2",
-    "css-loader": "^3.6.0",
     "date-fns": "^2.23.0",
     "element-resize-event": "^3.0.6",
     "history": "^4.9.0",
     "i18next": "^19.5.1",
     "i18next-browser-languagedetector": "^5.0.0",
     "i18next-http-backend": "^1.0.16",
-    "json-loader": "^0.5.7",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
@@ -78,12 +76,13 @@
     "timezone": "^1.0.23",
     "transition-common": "0.2.0-2",
     "typescript": "^4.4.4",
-    "uuid": "^8.3.2",
-    "webpack": "^4.43.0"
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-regenerator": "^7.10.1",
     "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.7",
     "@types/geojson": "^7946.0.7",
@@ -101,22 +100,39 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-runtime": "^6.26.0",
+    "clean-webpack-plugin": "^3.0.0",
     "copyfiles": "^2.4.1",
+    "copy-webpack-plugin": "^6.0.3",
+    "compression-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.2",
+    "css-loader": "^3.6.0",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.32.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.27.1",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
     "jest": "^27.3.1",
     "jest-fetch-mock": "^3.0.3",
+    "json-loader": "^0.5.7",
+    "mini-css-extract-plugin": "^0.9.0",
     "mockdate": "^3.0.2",
     "prettier-eslint-cli": "^5.0.1",
     "react-test-renderer": "^16.13.1",
     "redux-mock-store": "^1.5.4",
     "rimraf": "^3.0.2",
+    "sass": "^1.35.2",
+    "sass-loader": "^9.0.2",
+    "source-map-loader": "^1.1.2",
+    "style-loader": "^1.2.1",
     "ts-jest": "^27.0.7",
-    "ts-loader": "^7.0.5"
+    "ts-loader": "^7.0.5",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cdn-plugin": "^3.3.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-glsl-loader": "^1.0.1"
   }
 }
diff --git a/packages/transition-frontend/webpack.config.js b/packages/transition-frontend/webpack.config.js
@@ -12,12 +12,12 @@ const CopyWebpackPlugin       = require('copy-webpack-plugin');
 const HtmlWebpackPlugin       = require('html-webpack-plugin');
 const { CleanWebpackPlugin }  = require("clean-webpack-plugin");
 const CompressionPlugin       = require('compression-webpack-plugin');
+require('chaire-lib-common/lib/config/shared/dotenv.config');
 
 if (!process.env.NODE_ENV) {
   process.env.NODE_ENV = 'development';
 }
 
-require('dotenv').config({ path: path.join(__dirname, '../../..', '.env') });
 const configuration = require('chaire-lib-backend/lib/config/server.config');
 const config = configuration.default ? configuration.default : configuration;
 
@@ -27,25 +27,27 @@ module.exports = (env) => {
   const isProduction = env === 'production';
   console.log('process.env.NODE_ENV', process.env.NODE_ENV);
 
-  const projectDir = `../../../projects/${config.projectShortname}/`;
-  const bundleOutputPath = path.join(__dirname, '..', '..', '..', 'public', 'dist', config.projectShortname);
+  // Public directory from which files are served
+  const publicDirectory = path.join(__dirname, '..', '..', 'public');
+  const bundleOutputPath = path.join(publicDirectory, 'dist', config.projectShortname);
+  // Local path where locales are stored
+  const localeDirectory = path.join(__dirname, '..', '..', 'locales');
+
   const languages = config.languages || ['fr', 'en'];
   const languagesFilter = `/${languages.join("|")}/`;
 
-  const customStylesFilePath  = `${projectDir}styles/styles.scss`;
-  const customLocalesFilePath = `${projectDir}locales`;
+  // TODO Custom styles and locales should be set in config (#419, #420)
+  const customStylesFilePath  = `${config.projectDir}/styles/styles.scss`;
+  const customLocalesFilePath = `${config.projectDir}/locales`;
   const entryFileName =  './lib/app-transition.js';
   const entry                 = fs.existsSync('./'+customStylesFilePath) ? [entryFileName, './'+customStylesFilePath] : [entryFileName];
   const includeDirectories    = [
     path.join(__dirname, 'lib'),
 
     path.join(__dirname, 'lib', entryFileName),
-    path.join(__dirname, '..', '..', '..', 'locales')
+    localeDirectory
   ];
 
-  includeDirectories.push(path.join(__dirname, '..', '..', '..', 'projects', config.projectShortname));
-
-
   return {
 
     mode: process.env.NODE_ENV,
@@ -128,8 +130,8 @@ module.exports = (env) => {
         cleanAfterEveryBuildPatterns: ['**/*', '!images/**', '!*.html'],
       }),
       new HtmlWebpackPlugin({
-        filename: path.join(`index-transition-${config.projectShortname}${env === 'test' ? `_${env}` : ''}.html`),
-        template: path.join(__dirname, '..', '..', '..', 'public', 'transition.html'),
+        filename: path.join(`index-${config.projectShortname}${env === 'test' ? `_${env}` : ''}.html`),
+        template: path.join(publicDirectory, 'index.html'),
       }),
       new MiniCssExtractPlugin({
         filename: isProduction ? `transition-${config.projectShortname}-styles.[contenthash].css` : `transition-${config.projectShortname}-styles.dev.css`
@@ -175,12 +177,6 @@ module.exports = (env) => {
               from: "**/*",
               to: "",
               noErrorOnMissing: true
-            },
-            {
-              context: path.join(__dirname, '..', '..', '..', 'projects', config.projectShortname, 'assets'),
-              from: "**/*",
-              to: "",
-              noErrorOnMissing: true
             }
           ]
         }
@@ -192,7 +188,7 @@ module.exports = (env) => {
     },
     devtool: isProduction ? 'cheap-source-map' : 'eval-source-map',
     devServer: {
-      contentBase: path.join(__dirname, '..', '..', '..', 'public'),
+      contentBase: publicDirectory,
       historyApiFallback: true,
       publicPath: '/dist/' + config.projectShortname
     }