Simplify Local Frontend Development Workflow (#313)

* Update base button theming.

* Update home and app form for new button styles.

* Misc button updates.

* Fix unit tests. Add new build.

* Update default secondary hover color.

* Add custom script to vite config to ensure build and copy at build stage. Add new watch npm script.

* Add husky pre-push hook to run checks on push.

* Update build messages.

* Add local development details to readme.

.github/workflows/build-ui.yml

@@ -41,7 +41,7 @@ jobs:
         working-directory: ui
 
       - name: Build and Copy
-        run: npm run buildCopy
+        run: npm run build
         working-directory: ui
 
       - name: Get Last Commit

.husky/pre-push

@@ -0,0 +1,28 @@
+## Navigate to UI directory
+
+cd ui
+
+## Install Dependencies
+
+npm install
+
+## Run Build
+
+npm run build
+
+## Check for Uncommitted Build Files
+
+if [ -n "$(git status --porcelain)" ]; then
+echo "There are uncommitted changes. Please review the project for any uncommitted files before proceeding."
+exit 1
+else
+echo "No uncommitted changes found."
+fi
+
+# Run Unit Tests
+
+npm run test
+
+# Run Linting
+
+npm run lint

README.md

@@ -64,6 +64,22 @@ http://127.0.0.1:10202/services/japps/docs
 To try out authenticated endpoints click on the Authorize button on the top right of
 the above url and chose `OAuth2AuthorizationCodeBearer` and click on Authorize.
 
+## Developing Locally
+
+_Note: In order to develop locally, both the JupyterHub backend and React UI frontend should be running._
+
+1. To start the JupyterHub Backend, run the following in a terminal:
+
+```bash
+jupyterhub -f jupyterhub_config.py
+```
+
+2. To start the React UI frontend, run the following in a separate terminal from the `ui` directory:
+
+```bash
+npm run watch
+```
+
 ## Running Tests
 
 ### Unit Tests
@@ -83,13 +99,13 @@ pytest jhub_apps/tests_e2e -vvv -s --headed
 JHub Apps has been tested with local JupyterHub using `SimpleLocalProcessSpawner` and with
 The Littlest JupyterHub using `SystemdSpawner`.
 
-* Install JHub Apps
+- Install JHub Apps
 
 ```python
 pip install git+https://github.com/nebari-dev/jhub-apps.git
 ```
 
-* Add the following in The Littlest JupyterHub's `jupyterhub_config.py`
+- Add the following in The Littlest JupyterHub's `jupyterhub_config.py`
 
 ```python
 from tljh.user_creating_spawner import UserCreatingSpawner

ui/README.md

@@ -34,7 +34,7 @@ http://localhost:8080/hub/home
 1. To run a production build and apply changes, run the following:
 
 ```sh
-npm run buildCopy
+npm run build
 ```
 
 2. Restart JupyterHub to verify changes

ui/build-and-copy.sh

@@ -1,8 +1,7 @@
-tsc
-vite build
-
+# Rename assets for static name
 mv dist/assets/index-*.js dist/assets/index.js
 mv dist/assets/index-*.css dist/assets/index.css
 
+# Copy assets to jhub_apps static folder
 cp -r dist/assets/index.js ../jhub_apps/static/js
 cp -r dist/assets/index.css ../jhub_apps/static/css

ui/package.json

@@ -8,12 +8,13 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "build:dev": "tsc && NODE_ENV=development vite build --mode development",
-    "buildCopy": "./build-and-copy.sh",
+    "watch": "tsc && vite build --watch",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "format": "npx prettier src --write",
     "test": "jest",
-    "coverage": "jest --coverage"
+    "coverage": "jest --coverage",
+    "prepare": "cd .. && husky"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -49,6 +50,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.7",
+    "husky": "^9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-transform-stub": "2.0.0",

ui/vite.config.ts

@@ -1,12 +1,31 @@
 import react from '@vitejs/plugin-react';
+import { exec } from 'child_process';
 import { defineConfig } from 'vite';
 import EnvironmentPlugin from 'vite-plugin-environment';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths(), eslint(), EnvironmentPlugin('all')],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    eslint(),
+    EnvironmentPlugin('all'),
+    {
+      name: 'run-build-script',
+      apply: 'build',
+      writeBundle() {
+        exec('./build-and-copy.sh', (error) => {
+          if (error) {
+            console.error(`Build error: ${error}`);
+            return;
+          }
+          console.log(`Build and copy complete.`);
+        });
+      },
+    },
+  ],
   server: {
     port: 8080,
   },