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 |
||
---|---|---|
.github | ||
.vscode | ||
agent | ||
cli | ||
cmd/coder | ||
coderd | ||
codersdk | ||
cryptorand | ||
database | ||
examples | ||
httpapi | ||
httpmw | ||
images/coder | ||
peer | ||
peerbroker | ||
provisioner | ||
provisionerd | ||
provisionersdk | ||
pty | ||
scripts | ||
site | ||
.gitattributes | ||
.gitignore | ||
.golangci.yml | ||
.goreleaser.yml | ||
Makefile | ||
README.md | ||
codecov.yml | ||
develop.sh | ||
go.mod | ||
go.sum | ||
rules.go |
README.md
Coder v2
This repository contains source code for Coder V2. Additional documentation:
Directory Structure
.github/
: Settings for Dependabot for updating dependencies and build/deploy pipelines with GitHub Actions.semantic.yaml
: Configuration for semantic pull requests\
examples
: Example terraform project templates.site
: Front-end UI code.
Development
Pre-requisites
git
go
version 1.17, with theGOPATH
environment variable setnode
yarn
Cloning
git clone https://github.com/coder/coder
cd coder
Building
make build
make install
The coder
CLI binary will now be available at $GOPATH/bin/coder
Development
./develop.sh
The develop.sh
script runs the server locally on port 3000
, and runs a hot-reload server for front-end code on 8080
.
Front-End Plan
For the front-end team, we're planning on 2 phases to the 'v2' work:
Phase 1
Phase 1 is the 'new-wine-in-an-old-bottle' approach - we want to preserve the look and feel (UX) of v1, while testing and validating the market fit of our new v2 provisioner model. This means that we'll preserve Material UI and re-use components from v1 (porting them over to the v2 codebase).
Phase 2
Phase 2 is the 'new-wine-in-a-new-bottle' - which we can do once we've successfully packaged the new wine in the old bottle.
In other words, once we've validated that the new strategy fits and is desirable for our customers, we'd like to build a new, v2-native UI (leveraging designers on the team to build a first-class experience around the new provisioner model).