Simplify Local Frontend Development Workflow

[jbouder]

This PR is intended to provide updates to simplify frontend development in jhub-apps. The current workflow involves developing initially through the standalone React App, then running a build and copy script, then starting JupyterHub to validate changes.

This change updates the build process and adds a watch script to allow the developer to run both JupyterHub and the watch script. Then as changes are made to the frontend (react app), the watch will cause a new build and copy of assets. From there, the developer needs only to perform a browser refresh from the JupyterHub app.

This PR also includes a husky pre-push hook to ensure a fresh build is always completed prior to a push.

Note: the developer can still work in the standalone React app.

Reference Issues or PRs

N/A

What does this implement/fix?

Put a x in the boxes that apply

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds a feature)
• Breaking change (fix or feature that would cause existing features not to work as expected)
• Documentation Update
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no API changes)
• Build related changes
• Other (please describe):

Testing

• Did you test the pull request locally?
• Did you add new tests?

Any other comments?

• Adds an npm watch script and custom vite build script to handle rebuild and copy
• Adds husky pre-push script to ensure react app is built before push
• Updates intended to simplify and streamline the local frontend development process
  • Allows the developer to see React-based changes in JupyterHub without having to manually run scripts and restart JupyterHub

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jhub-apps	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 5, 2024 1:13pm
jhub-apps-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 5, 2024 1:13pm

[kildre]

Tested npm run build command, works as expected.

Great work! Simplicity is nice.

[aktech]

Then as changes are made to the frontend (react app), the watch will cause a new build and copy of assets. From there, the developer needs only to perform a browser refresh from the JupyterHub app.

Do you mean changes will visible in the "jupyterhub" as well?

I didn't change for me in the JupyterHub:

Frontend: http://localhost:8080/hub

JupyterHub http://127.0.0.1:8000/hub/home

[jbouder]

Then as changes are made to the frontend (react app), the watch will cause a new build and copy of assets. From there, the developer needs only to perform a browser refresh from the JupyterHub app.

Do you mean changes will visible in the "jupyterhub" as well?

I didn't change for me in the JupyterHub:

Frontend: http://localhost:8080/hub

## JupyterHub http://127.0.0.1:8000/hub/home

I’m guessing you actually started the frontend. With this new setup you perform an ‘npm run watch’ on the ui and start Jupyterhub in another tab. Then as changes are made you’ll see them in Jupyterhub (after a refresh). No meed to have the ui actually running in dev mode with this setup…that said you can still run the ui separately if you just want to work in that environment.

And these are code changes, not changes to some specific app.

[aktech]

Ah, I ran npm run watch now and got what I expected. This is excellent work. Can you add a line in the docs about it?