Resume generator built on React Router 6, Bootstrap 5, and a bespoke React component library that utilizes styled-components. Accepts files of JSON Resume format from remote URLs or local file uploads.
This project depends on the following subprojects:
and shared libraries:
and is scaffolded as a pnpm workspace.
Note
The BrowserRouter
is run at a subdirectory (default reactresume
) for compatibility with Github pages. See notes on how to run and visit the dev server.
Warning
The Vite base
and BrowserRouter
basename
need to be kept consistent and explicitly set in case deployments are made to subdirectories (i.e. Github pages).
- Vite
base
sets the basename of public assets. Relative links are preferred (in case of deployment to subdirectories), but this requires explicitly setting the base during build. - React Router
BrowserRouter
basename needs to be explicitly set in order to deploy to subdirectory.
Additional tasks:
- Generate PDF
- Generate HTML from
<Document />
usingreact-print
- Generate PDF from HTML using
react-print
andreact-pdf-html
- Generate HTML from
-
Clone this repo, fetch workspace packages (submodules), and check for updates to submodules.
git clone --recurse-submodules git@github.com:chrjl/reactresume.git
or
git clone git@github.com:chrjl/reactresume.git cd reactresume/ git submodule update --init
-
Pull updates to submodules
git submodule update --remote
-
To work on individual projects, checkout the main branch and (optionally) branch off of it.
git submodule foreach git checkout main
Install dependencies, including local workspace packages
pnpm install
Run the dev server
npx vite --host --clearScreen=false
-
or, using the included Docker Compose file (default port 5173)
REACTRESUME_PORT=5173 docker compose up -d
For compatibility with gh-pages
, the BrowserRouter
base path needs to be set to run the router at a subdirectory that matches the repo name.
If the dev port is 5173
and the basepath
is set to reactresume
, the dev server will be accessible at: http://localhost:5173/reactresume
Using TypeScript watch server
- Build all dependency projects (
tsc
): runnpm run build
in each package directory (packages/
) - Build this project (
vite build
):npm run build
npm deploy
Use CSS variables to set grid and flexbox spacing for components from the @reactresume/components
library. Scope as necessary, according to section #id
or component .className
.
StackedCards
- flexbox spacing via--stacked-card-gap
GridCards
- grid spacing via--grid-card-gap
DefinitionTable
- column width via--definition-title-width
, row spacing via--definition-item-gap
See https://stackoverflow.com/a/75808577
- Desired action: Dispatch to a reducer on form submittal. The dispatch function is stored in context and available via context provider.
- Issue: The dispatch function stored in context is not available to the action function. Hooks are only available in function components.
- Solution: Have the component rendering the
RouterProvider
access the context and pass it to the form action function in the router action definition. Curry the form action function, so that it (1) accepts the dispatch function, and (2) returns an async function that performs the form submit tasks, i.e. dispatch.