Repository navigation
Upgrade the frontend: Vite, TypeScript, React 19, Bootstrap 5 - #15
Merged
Merged
Conversation
- Build with Vite instead of Create React App, which is no longer maintained. Bundles go under /static/ as before, since /assets/ serves the server-rendered pages' stylesheets. - Convert all components from Flow to TypeScript (strict); CI and the Docker build run the type check, and CI runs ESLint 10 with typescript-eslint. TypeScript stays on 6.0 until typescript-eslint supports 7.0. - React 16 -> 19 (createRoot), React Router 5 -> 7 (Routes, Navigate), react-bootstrap 1 -> 2 with Bootstrap 4 -> 5, react-markdown 5 -> 10, styled-components 5 -> 6. - Replace the jQuery bootstrap4-toggle plugin with a Bootstrap 5 switch; remove jQuery, bootstrap4-toggle and levenary. - Replace the removed Jumbotron and CardDeck, and keep Bootstrap 4's navbar color and hover-only link underlines so pages look the same. - Share one SectionTypePage between the Lab, Discussion and Tutoring pages, which were copies of each other. - Node 24 (Node 20 is end of life) in mise, CI and the Dockerfile. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
🚀 Staging Preview Deployed! URL: https://preview-sections-pr-15-137456085712.us-west1.run.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings the frontend up to date. The pages should look and behave the same.
react-scripts, unmaintained)Code changes beyond the version bumps
tsc --noEmitpasses, and runs in CI and in the Docker build.ReactDOM.render→createRoot;Switch/Redirect→Routes/Navigate.Jumbotron→ a smallHeromatching the old fluid jumbotron;CardDeck→ a plain wrapper;blockbuttons →w-100;InputGroup.Append→ none;float-left/right→float-start/end.bootstrap4-toggle, a jQuery plugin loaded with jQuery from a CDN. They're now a Bootstrap 5 switch (ToggleSwitch). jQuery,bootstrap4-toggleand the unusedlevenaryare removed.LabPage,DiscPageandTutoringPagewere 180-line copies of each other. They now shareSectionTypePage.<p>, a missing listkey, a button inside<table>, and setting state in an effect.Build and deploy: Vite writes bundles to
build/static/, the same URLs as before, because/assets/already serves the server-rendered pages' CSS. The Dockerfile runsyarn typecheck && yarn buildonnode:24-slim. In development, the Vite server on :3000 forwards the API, login routes and/offeringsto Flask on :8000.TypeScript is 6.0 rather than 7.0 because
typescript-eslintsupports up to 6.0 so far.Test plan
yarn typecheck,yarn lintandyarn buildpass, as do the backend testsThe JavaScript bundle is about 232 KB gzipped, up from about 184 KB, mostly because newer react-markdown pulls in more. Vite warns about the chunk size; code-splitting can come later if it matters.
🤖 Generated with Claude Code