Removed need to change version controlled files configurations for local development (oncokb#551)

Author: jfkonecn

.gitignore

@@ -167,3 +167,7 @@ Desktop.ini
 # Sentry Config File
 .env.sentry-build-plugin
 .vscode/settings.json
+
+local-frontend-config.json
+src/main/resources/firebase.json
+src/main/resources/config/application-dev.yml

README.md

@@ -24,13 +24,22 @@
 
    5. [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
 
-2. Run the brew command for the Mac in the [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling) of the node-canvas readme. For other systems, please see [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling) for instructions.
+2. Copy the example dev yaml file
 
-```sh
-brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
-```
+   ```sh
+   cp src/main/resources/config/application-dev-example.yml src/main/resources/config/application-dev.yml
+   ```
+
+3. Run the brew command for the Mac in the [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling)
+   of the node-canvas readme. For other systems, please see
+   [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling)
+   for instructions.
+
+   ```sh
+   brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
+   ```
 
-3. After installing Node and yarn, you should be able to run the following command
+4. After installing Node and yarn, you should be able to run the following command
    to install development tools. You will only need to run this command when
    dependencies change in [package.json](package.json).
 
@@ -40,7 +49,7 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
 
    We use yarn scripts and [Webpack](https://webpack.js.org/) as our build system.
 
-4. If you are using redis as a cache, you will have to launch a cache server (Optional).
+5. If you are using redis as a cache, you will have to launch a cache server (Optional).
 
    - To start your cache server, run:
 
@@ -59,7 +68,7 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
    See [here](https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-caching.html#boot-features-caching-provider-none)
    for details.
 
-5. Configure Keycloak and Google SSO
+6. Configure Keycloak and Google SSO
 
    To log in to your app, you'll need to have [Keycloak](https://keycloak.org)
    up and running.
@@ -120,7 +129,7 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
                   scope: openid,profile,email
       ```
 
-6. Configure Firebase
+7. Configure Firebase
 
    1. Go to [Firebase Console](https://console.firebase.google.com/) and create
       a new project
@@ -149,7 +158,9 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
    9. Click **Project settings**
    10. Choose **Service Accounts** on header
    11. Under **Firebase Admin SDK** section, click on **Generate new private key**
-   12. Move the service account credentials under `src/main/resources/<CREDENTIALS_FILENAME>.json`
+   12. Move the service account credentials under `src/main/resources/firebase.json`
+       > [!WARNING]
+       > Never commit the `firebase.json` file to git!
    13. Update `application.firebase.service-account-credentials-path`
        to the filename
    14. Under **Project Overview** page in the **General** tab under the **Your apps**
@@ -158,10 +169,18 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
        - You do not need to setup firebase hosting
    16. The resulting credential and paste them in the corresponding fields
        in `application.firebase`
-   17. Expand **Build** and click **Authentication**
-   18. Click the **Sign-in method** section and add email/password provider
+   17. Copy example front configuration file
+
+       ```sh
+       cp local-frontend-config-example.json local-frontend-config.json
+       ```
+
+   18. Copy the same credentials you put in `application.firebase` into the `local-frontend-config.json`
+       file.
+   19. Expand **Build** and click **Authentication**
+   20. Click the **Sign-in method** section and add email/password provider
 
-7. Verify that your mysql configuration in [application-dev.yaml](src/main/resources/config/application-dev.yml)
+8. Verify that your mysql configuration in [application-dev.yaml](src/main/resources/config/application-dev.yml)
    is correct for you mysql server instance.
 
    ```yaml
@@ -172,7 +191,7 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
        password: root
    ```
 
-8. Run the application (Don't login just yet)
+9. Run the application (Don't login just yet)
 
    - Note your a oncokb_curation schema will be created in your mysql database.
      Data will also be seeded for it.
@@ -181,40 +200,40 @@ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
    ./mvnw
    ```
 
-9. Wait until the server is listening to requests and is able to redirect you to
-   the login screen. (server url defaults to `http://localhost:9090`)
+10. Wait until the server is listening to requests and is able to redirect you to
+    the login screen. (server url defaults to `http://localhost:9090`)
 
-10. Add a login for yourself into your mysql instance. Replace <your_email>
+11. Add a login for yourself into your mysql instance. Replace <your_email>
     with your gmail email address.
 
-```sql
-INSERT INTO `oncokb_curation`.`user`
-(
-    `login`,
-    `email`,
-    `created_by`,
-    `activated`)
-VALUES
-    ('<your_email>',
-     '<your_email>',
-     'SYSTEM',
-     1);
-
-SET @UserID = (SELECT Id
-    FROM `oncokb_curation`.`user`
-    WHERE email = '<your_email>');
-
-INSERT INTO `oncokb_curation`.`user_authority`
-    (user_id, authority_name)
+    ```sql
+    INSERT INTO `oncokb_curation`.`user`
+    (
+        `login`,
+        `email`,
+        `created_by`,
+        `activated`)
     VALUES
-    (@UserId, 'ROLE_ADMIN'),
-    (@UserId, 'ROLE_DEV'),
-    (@UserId, 'ROLE_CURATOR'),
-    (@UserId, 'ROLE_USER');
-
-```
-
-11. Login to curation!
+        ('<your_email>',
+         '<your_email>',
+         'SYSTEM',
+         1);
+
+    SET @UserID = (SELECT Id
+        FROM `oncokb_curation`.`user`
+        WHERE email = '<your_email>');
+
+    INSERT INTO `oncokb_curation`.`user_authority`
+        (user_id, authority_name)
+        VALUES
+        (@UserId, 'ROLE_ADMIN'),
+        (@UserId, 'ROLE_DEV'),
+        (@UserId, 'ROLE_CURATOR'),
+        (@UserId, 'ROLE_USER');
+
+    ```
+
+12. Login to curation!
 
 ## Building for production
 

local-frontend-config-example.json

@@ -0,0 +1,14 @@
+{
+  "firebase": {
+    "enabled": true,
+    "apiKey": "",
+    "authDomain": "",
+    "databaseUrl": "",
+    "projectId": "",
+    "storageBucket": "",
+    "messagingSenderId": "",
+    "appId": "",
+    "measurementId": "",
+    "connectToFirebaseEmulators": false
+  }
+}

…ain/resources/config/application-dev.yml …urces/config/application-dev-example.ymlsrc/main/resources/config/application-dev.yml renamed to src/main/resources/config/application-dev-example.yml src/main/resources/config/application-dev.yml renamed to src/main/resources/config/application-dev-example.yml

@@ -134,7 +134,7 @@ application:
     messaging-sender-id:
     app-id:
     measurement-id:
-    service-account-credentials-path:
+    service-account-credentials-path: firebase.json
   oncokb-data-repo-dir:
   frontend:
     sentry-dsn:

src/main/webapp/app/stores/firebase/firebase-app.store.ts

@@ -54,9 +54,16 @@ export class FirebaseAppStore extends BaseStore {
 
   initializeFirebase() {
     if (!AppConfig.serverConfig.frontend) {
-      throw new Error('No frontend config');
+      alert('No frontend configuration found.');
+      return;
     } else if (!AppConfig.serverConfig.frontend.firebase) {
-      throw new Error('No firebase config');
+      alert(
+        `No firebase configuration.
+Are you running locally?
+Add your local-frontend-config.json file to the root directory.
+See the README.md for more details`,
+      );
+      return;
     }
     const { enabled, connectToFirebaseEmulators, ...firebaseOptions } = AppConfig.serverConfig.frontend.firebase;
     this.firebaseEnabled = enabled;

src/main/webapp/index.html

@@ -76,7 +76,13 @@
       /*<![CDATA[*/
 
       window.serverConfig = {};
-      window.serverConfig.frontend = /*[[${frontendConfig}]]*/ {};
+
+      const isDev = <%= htmlWebpackPlugin.options.templateParameters.frontendConfig ? "true" : "false" %>;
+      if (isDev) {
+         window.serverConfig.frontend = <%= JSON.stringify(htmlWebpackPlugin.options.templateParameters.frontendConfig ?? {}) %>
+      } else {
+         window.serverConfig.frontend = /*[[${frontendConfig}]]*/ {};
+      }
 
       /*]]>*/
     </script>

webpack/webpack.common.js

@@ -2,7 +2,6 @@ const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const utils = require('./utils.js');
@@ -75,7 +74,7 @@ module.exports = async options => {
           /*
        ,
        Disabled due to https://github.com/jhipster/generator-jhipster/issues/16116
-       Can be enabled with @reduxjs/toolkit@>1.6.1 
+       Can be enabled with @reduxjs/toolkit@>1.6.1
       {
         enforce: 'pre',
         test: /\.jsx?$/,
@@ -154,12 +153,6 @@ module.exports = async options => {
             { from: './src/main/webapp/robots.txt', to: 'robots.txt' },
           ],
         }),
-        new HtmlWebpackPlugin({
-          template: './src/main/webapp/index.html',
-          chunksSortMode: 'auto',
-          inject: 'body',
-          base: '/',
-        }),
       ],
     },
     // jhipster-needle-add-webpack-config - JHipster will add custom config

webpack/webpack.dev.js

@@ -3,14 +3,23 @@ const webpackMerge = require('webpack-merge').merge;
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const sass = require('sass');
+const fs = require('fs');
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
 
 const ENV = 'development';
 
+const serverConfigFilePath = 'local-frontend-config.json';
+let frontendConfigJson = undefined;
+if (fs.existsSync(serverConfigFilePath)) {
+  frontendConfigJson = fs.readFileSync(serverConfigFilePath);
+}
+const frontendConfig = frontendConfigJson ? JSON.parse(frontendConfigJson) : undefined;
+
 module.exports = async options =>
   webpackMerge(await commonConfig({ ...options, env: ENV }), {
     devtool: 'cheap-module-source-map', // https://reactjs.org/docs/cross-origin-errors.html
@@ -131,5 +140,14 @@ module.exports = async options =>
         title: 'Oncokb Curation',
         contentImage: path.join(__dirname, 'logo-oncokb.png'),
       }),
+      new HtmlWebpackPlugin({
+        template: './src/main/webapp/index.html',
+        chunksSortMode: 'auto',
+        inject: 'body',
+        base: '/',
+        templateParameters: {
+          frontendConfig,
+        },
+      }),
     ].filter(Boolean),
   });

webpack/webpack.prod.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const webpackMerge = require('webpack-merge').merge;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const sass = require('sass');
@@ -108,6 +109,12 @@ module.exports = async () =>
         skipWaiting: true,
         exclude: [/swagger-ui/],
       }),
+      new HtmlWebpackPlugin({
+        template: './src/main/webapp/index.html',
+        chunksSortMode: 'auto',
+        inject: 'body',
+        base: '/',
+      }),
       // Sentry Webpack plugin needs to be put after all other plugins
       sentryWebpackPlugin({
         authToken: process.env.SENTRY_AUTH_TOKEN,