mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
Bryan
ec077c6191
Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle - [x] 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={...} />` - [x] 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()`) - [x] 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> > ``` I've hooked up a `build:analyze` command that spins up a server to show the bundle size: <img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png"> 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
23 lines
828 B
HTML
23 lines
828 B
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="mask-icon" href="/favicon.svg" color="#000000" />
|
|
<link rel="alternate icon" type="image/png" href="/favicon.png" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="application-name" content="Coder" />
|
|
<meta name="theme-color" content="#17172E" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="csrf-token" content="{{ .CSRF.Token }}" />
|
|
<meta property="csp-nonce" content="{{ .CSP.Nonce }}" />
|
|
<link crossorigin="use-credentials" rel="mask-icon" href="/static/favicon.svg" color="#000000" />
|
|
<title>Coder</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root">
|
|
<!-- Anything within #root will be destroyed on React mount -->
|
|
</div>
|
|
</body>
|