Thanks to visit codestin.com
Credit goes to github.com

Skip to content

refactor: Migrate from Next.js to pure webpack config #360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 72 commits into from
Mar 12, 2022

Conversation

bryphe-coder
Copy link
Contributor

@bryphe-coder bryphe-coder commented Feb 25, 2022

Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle

  • Switch from next/link to react-router-dom's link

This part was easy - just change the import to import { Link } from "react-router-dom" and <Link href={...} /> to <Link to={...} />

  • Switch from next/router to react-router-dom's paradigms (useNavigation, useLocation, and useParams)

router.push can be converted to navigate(...) (provided by the useNavigate hook)
router.replace can be converted navigate(..., {replace: true})
Query parameters (const { query } = useRouter) can be converted to const query = useParams())

  • Implement client-side routing with react-router-dom

Parameterized routes in NextJS like projects/[organization]/[project] would look like:

              <Route path="projects">
                   <Route path=":organization/:project">
                   <Route index element={<ProjectPage />} />
                 </Route>
              </Route>
  • Bring back webpack-* dependencies and remove next dependencies
  • Get unit tests green
  • Migrate webpack.config.ts
  • Fix up package.json commands (dev vs production)
  • Remove nextrouter package, use simpler routing strategy
  • Implement content-addressable bundle (proper caching behavior)
  • Implement always-fallback to index.html
  • ❌ Use child component instead of element

Found that this doesn't work with react-router-v6. Put on agenda for FE variety: https://www.notion.so/coderhq/2022-03-11-0154cfb8646348568443048bc3d2c970#15fe7476fb214da394bed746dcbbfd1e

  • Implement 404 page
  • Move html templates to html_templates folder
  • Use Main.tsx as entry point
  • Migrate _document.tsx to a static solution
  • Bundle static icons (favicons, etc)
  • Verify that login redirect parameters work correctly
  • Verify cache headers
  • Ensure injectable template parameters (ie, CSP nonces) get populated correctly
  • Verify production build is produced correctly (minified, etc)
  • Run webpack-bundle-analyzer to check bundle is correct
  • Implement hot-reload via webpack-dev-server
  • Clean up package.json dependencies
  • Fix lint issues
  • Fix go tests
  • Port over webpack config comments
  • Can the v1 embed strategy be used? If so, safer to use that than roll a new implementation 🤔
  • Fix warnings in startup logs
  • Merge fix: Update routes for project page, workspace creation page, and workspace page #415
  • Fix E2E failure

I've hooked up a build:analyze command that spins up a server to show the bundle size:
image

The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals

I'll defer this to a separate issue, but once those are extracted - the bundle should be fast and lean. Using the CDN for those dependencies is great for performance, because usually users will already have the libraries cached, and they are downloaded in parallel to our bundle.

@codecov
Copy link

codecov bot commented Feb 25, 2022

Codecov Report

Merging #360 (c31f594) into main (bf1f858) will increase coverage by 0.03%.
The diff coverage is 63.37%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #360      +/-   ##
==========================================
+ Coverage   68.23%   68.27%   +0.03%     
==========================================
  Files         160      159       -1     
  Lines        9256     9226      -30     
  Branches       76       73       -3     
==========================================
- Hits         6316     6299      -17     
+ Misses       2320     2307      -13     
  Partials      620      620              
Flag Coverage Δ
unittest-go-macos-latest 62.85% <82.09%> (+0.23%) ⬆️
unittest-go-ubuntu-latest 67.67% <82.09%> (+0.05%) ⬆️
unittest-go-windows-2022 62.27% <82.09%> (-0.08%) ⬇️
unittest-js 64.07% <25.92%> (-0.10%) ⬇️
Impacted Files Coverage Δ
site/Main.tsx 0.00% <0.00%> (ø)
site/app.tsx 0.00% <0.00%> (ø)
site/components/index.tsx 0.00% <ø> (ø)
site/pages/404.tsx 0.00% <0.00%> (ø)
site/pages/cli-auth.tsx 0.00% <0.00%> (ø)
site/pages/index.tsx 0.00% <0.00%> (ø)
site/pages/login.tsx 0.00% <ø> (ø)
...pages/projects/[organization]/[project]/create.tsx 0.00% <0.00%> (ø)
.../pages/projects/[organization]/[project]/index.tsx 0.00% <0.00%> (ø)
site/pages/projects/index.tsx 0.00% <0.00%> (ø)
... and 18 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bf1f858...c31f594. Read the comment docs.

@kylecarbs
Copy link
Member

kylecarbs commented Feb 26, 2022

I'm very excited for this change! Seems like it'll improve the dev experience significantly!

bryphe-coder added a commit that referenced this pull request Mar 2, 2022
This brings an initial E2E test (really, an integration test - it's only running the server locally, as opposed to against a deployment - but it'd be easy to point playwright to a deployment).

Demo gif:
![test2](https://user-images.githubusercontent.com/88213859/156078517-6cb4ef84-337b-4e16-a8bc-aea7d06dcbcb.gif)

This test exercises a minimal flow for login:
- Run the `coderd` binary to start a server on 3000
- Create an initial user as part of setup
- Go through the login flow and verify we land on the projects page

It will be useful to have to ensure that #360 doesn't introduce a regression in the login flow

Future E2E tests that would be useful:
- Create a project & verify it shows in the UI
- Create a workspace and verify it shows in the UI
@bryphe-coder
Copy link
Contributor Author

Seems like this is (finally) ready to merge! I'll bring it in so that I can vet it over the next week (and also as a canary for the v1 version of this change)

@bryphe-coder bryphe-coder reopened this Mar 12, 2022
@bryphe-coder bryphe-coder merged commit ec077c6 into main Mar 12, 2022
@bryphe-coder bryphe-coder deleted the bryphe/experiment/nextjs-to-webpack branch March 12, 2022 20:51
@greyscaled
Copy link
Contributor

@bryphe-coder congrats on merging in this change!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants