Merge pull request #17 from LANL-Bioinformatics/add-webapp

Add webapp

.gitignore

@@ -3,4 +3,8 @@
 **/work/**
 */logs/*
 **/ec_info/*
-.nf-test*
+.nf-test*
+.DS_Store
+.env
+io
+node_modules

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "eslint.validate": ["javascript"],
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+    "editor.formatOnPaste": false, // required 
+    "editor.formatOnType": false, // required
+    "editor.formatOnSave": true, // optional 
+    "editor.formatOnSaveMode": "file", // required to format on save
+    "files.autoSave": "onFocusChange", // optional but recommended
+    "vs-code-prettier-eslint.prettierLast": false, // set as "true" to run 'prettier' last not first
+    "files.eol": "\n",
+  }

installation/README.md

@@ -0,0 +1,54 @@
+## INSTALLATION PREREQUISITES
+
+### Install Node20
+https://nodejs.org/dist/latest-v20.x/
+
+### Install pm2
+`npm install pm2@latest -g`
+
+### Install MongoDB Community Edition
+https://docs.mongodb.com/manual/installation/#mongodb-community-edition-installation-tutorials
+
+## INSTALL webapp
+
+1. Move/copy EDGEv3 folder to the installation directory
+
+2. Inside EDGEv3/installation folder, run the installation script 
+
+    `./install.sh`
+
+3. Create environment variables
+
+    The web client and web server each rely on environment variables for their configuration.
+    You can define those environment variables in `.env` files.
+
+    Here's how you can define them in `.env` files:
+
+    - Populate the "client build" environment configuration file (i.e. `webapp/client/.env`). 
+
+        You can initialize it based upon the corresponding development/production example file:
+        ```shell
+        cp webapp/client/.env.development.example \
+        webapp/client/.env
+        ```
+        > Those environment variables are used within `webapp/client/src/config.js`.
+    - Populate the server environment configuration file (i.e. `webapp/server/.env`). 
+
+        You can initialize it based upon the corresponding development/production example file:
+        ```shell
+        cp webapp/server/.env.development.example \
+        webapp/server/.env
+        ```
+        > Those environment variables are used within `webapp/server/config.js`.
+
+## START webapp
+
+1. Start MongoDB if it's not started yet
+
+2. Inside EDGEv3 folder, run the pm2 start command 
+
+    `pm2 start pm2.config.js`
+    
+## STOP webapp
+
+    pm2 stop all

installation/install.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+echo "Install LANL EDGE webapp..."
+pwd=$PWD
+app_home="$(dirname "$pwd")"
+
+#create upload/log/projects/public directories, skip this step for reinstallation
+io_home=$app_home/io
+if [ ! -d  $io_home ]; then
+  echo "Create directories"
+  mkdir ${io_home}
+  dirs=(
+    "upload"
+    "upload/files"
+    "upload/tmp" 
+    "log"
+    "projects"
+    "public"
+    "sra"
+    "db"
+    "nextflow"
+    "nextflow/work"
+  )
+
+  for dir in "${dirs[@]}"
+  do
+    mkdir ${io_home}/${dir}
+  done
+
+  test_data_home=$app_home/workflows/Nextflow/test_data
+  if [ -d  $test_data_home ]; then
+    ln -s ${test_data_home} ${io_home}/public/test_data
+  fi
+fi
+
+echo "Setup LANL EDGE webapp ..."
+#build client
+echo "build client..."
+cd $app_home/webapp/client
+npm install --legacy-peer-deps
+npm run build
+#build server
+echo "build server..."
+cd $app_home/webapp/server
+npm install
+
+echo "LANL EDGE webapp successfully installed!"
+echo "To start the webapp in EDGEv3's root directory:"
+echo "pm2 start pm2.config.js"

pm2.config.js

@@ -0,0 +1,28 @@
+/**
+ * This is a PM2 configuration file.
+ *
+ * References:
+ * - https://pm2.keymetrics.io/docs/usage/application-declaration/
+ * - https://pm2.keymetrics.io/docs/usage/environment/
+ */
+
+module.exports = {
+  apps: [
+    {
+      name: "appserver",
+      script: "server.js",
+      instances: 4,
+      exec_mode: "cluster",
+      cwd: "./webapp/server",
+      node_args: "--max_old_space_size=1024",
+      max_memory_restart: "150M"
+    },
+    {
+      name: "cronserver",
+      script: "cronServer.js",
+      cwd: "./webapp/server",
+      node_args: "--max_old_space_size=1024",
+      max_memory_restart: "150M"
+    }
+  ]
+}

webapp/README.md

@@ -0,0 +1,45 @@
+# Development
+
+## Dependencies
+
+* node.js v20
+* MongoDB
+
+## Install the webapp
+
+    cd installation
+    ./install-local.sh
+
+## Start api server
+
+    cd webapp/server
+    (change NODE_ENV=prod to NODE_ENV=dev in .env)
+    npm start
+
+## Start ui client
+
+    cd webapp/client
+    npm start
+
+## View the website
+
+    http://localhost:3000
+
+## Note
+
+- Have to restart the client when any changes made in client/.env.
+- Have to restart the server when any changes made in server code or server/.env.
+
+#### Restart api server
+
+    cd webapp/server
+    use Ctrl-C to stop the webapp server
+    npm start
+
+#### Restart ui client
+
+    cd webapp/client
+    use Ctrl-C to stop the webapp client
+    npm start
+
+

webapp/client/.browserslistrc

@@ -0,0 +1,11 @@
+# https://github.com/browserslist/browserslist#readme
+
+[production]
+>0.2%
+not dead
+not op_mini all
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 safari version

webapp/client/.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

webapp/client/.env.development.example

@@ -0,0 +1,8 @@
+# EDGE
+VITE_NAME=EDGE V3
+VITE_EMAIL_NOTIFICATION_ENABLED=false
+VITE_FILEUPLOAD_ENABLED=true
+VITE_API_URL=http://localhost:5000
+# ORCiD login
+VITE_IS_ORCID_AUTH_ENABLED=false
+VITE_ORCID_CLIENT_ID=<Your ORCiD client id>

webapp/client/.env.production.example

@@ -0,0 +1,6 @@
+# EDGE
+VITE_NAME=EDGE V3
+VITE_FILEUPLOAD_ENABLED=true
+# ORCiD login
+VITE_IS_ORCID_AUTH_ENABLED=false
+VITE_ORCID_CLIENT_ID=<Your ORCiD client id>

webapp/client/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  // parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  plugins: ['react', 'react-hooks'],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+}

webapp/client/.gitattributes

@@ -0,0 +1,2 @@
+# Enforce Unix newlines
+* text=auto eol=lf

webapp/client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.eslintcache
+.DS_Store
+.idea
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webapp/client/.prettierignore

@@ -0,0 +1 @@
+build/

webapp/client/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+}

webapp/client/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="LANL EDGE V3">
+    <meta name="author" content="LANL EDGE Bioinformatics Team">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>EDGE</title>
+    <base href="/">
+    <link rel="manifest" src="/manifest.json">
+    <link rel="shortcut icon" src="/favicon.ico">
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>