cf4b9a1557
* chore: initial setup of web package This is *not* a workspace, yet, because it would be nice to use the latest React, but /client can't migrate (yet). Having two React versions creates issues in workspaces since /.bin/next gets hoisted to root... and finds the root React version :( * feat: add config for next * fix: use jsx-runtime for web linting * chore: init curriculum-server with json-server * chore: integrate curriculum-server with TS/eslint * feat: add patch script json-server doesn't like keys with '/'s in so, for now I'm just patching them out. This lets us keep a strong separation between this WIP and the rest of the code. * fix: use port 8000 to avoid conflicts * feat: crude ISR demo using challenge pages * feat: extend ISR demo to use params * feat: return props for specific superblocks * chore: re-organise folders * refactor: put data fetching in a single module * refactor: challenge page slightly * feat: add link to test ISR You can see that, if you run next dev, the linked page gets regenerated whenever you navigate to it. However, if you run next build that is no longer the case and the page has to be reloaded for the user to see the latest version. The implication is that we'll need another method (Web worker, probably) to detect if the page needs to be updated. * feat: render static paths for rwd * feat: add monaco Editor * feat: send less data via props Rather than sending superblocks, this now sends blocks. Next step, just the challenge! * fix: only send individual challenge's data * feat: send /learn/stuff/<id> to the challenge page * fix: redirect to path with trailing id * fix: handle all possible path prefixes * feat: add superblocks with trailing ids * chore: rename block -> blockOrId * chore: remove logs * fix: return notFound if page id is missing * chore: add a note about increasing TS strictness * feat: serverside redirects This should be a touch more performant, but mostly it separates the concerns. Since the server already has the responsibility of choosing what pages to render, redirects fit naturally with its concerns. * refactor: clean up param validation * feat: create list of blocks in superblock * feat: add challenge links to map * feat: link to full path, not just id * refactor: ensure props match getStaticProps By specifying the props for GetStaticProps we ensure that it returns the expected data and use InferGetStaticPropsType to get the type out again for use in the component * feat: improve and document dev experience * refactor: separate routing from rendering * refactor: extract routing logic into functions * refactor: naming consistency * refactor: move data wrangling into get-curriculum * refactor: align blockOrId and id * chore: remove the server from workspaces * chore: remove the lock * docs: paths Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: install before linting * fix: create env.json before installing new client * chore: ignore generated json file Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| README.md | ||
| next-env.d.ts | ||
| package.json | ||
| tsconfig.json | ||
README.md
Getting Started
If you haven't installed freeCodeCamp proper yet, that needs to happen first.
Once that's done, the curriculum server and this package need installing. Then the prepare script will take care of the rest.
cd ../curriculum-server
npm i
cd ../web
npm i
npm run dev
Now the server should be running on port 3000 and the client on port 8000.
For now there's not much to see.
http://localhost:8000/learn/special-path
is the main entry point and
http://localhost:3000/responsive-web-design
is the curriculum data that is currently being used.
Things of Note
Incremental static regeneration is working quite nicely. You can modify the curriculum data (in /curriculum-server/data/curriculum.json), refresh reload your browser and the changes will be reflected.
The trailing ids are a bit buggy, but you can replace them with a new page's mongo id and it ~should~ will refresh.
Also, mangled paths mostly work. For example:
http://localhost:8000/learn/responsive-web-design/applied-an-element/587d774e367417b2b2512a9f
redirects you to
but not all paths behave as desired.