Application template for a single page app using react, vite, redux toolkit, RTK Query and mock service worker by @dj.
docker compose up --build
Run tests once (used in CI)
docker compose run frontend npm run test
Run tests and rerun when files change (useful to have running while you develop)
docker compose run frontend npm run test-watch
Code is formatted using eslint and prettier. Install eslint and prettier extensions for your given editor if possible. If you are using vscode, vscode will use the settings in .vscode/settings.json automatically.
If you do not wish to use an editor integration, just run the format script configured in package.json before committing.
docker compose run frontend npm run format
Running prettier will fix code formatting issues, but it cannot fix all eslint errors. If you do not install eslint integrations for your editor (which is highly recommended) you will need to run the lint script in package.json before commiting. Many eslint errors are important, in particulary the ones generated by "plugin:react/recommended", "plugin:react/jsx-runtime" and ESPECIALLY "plugin:react-hooks/recommended". Ignore them at your own peril.
docker compose run frontend npm run lint
You may want to install the project and it's dependencies directly, without using docker. One reason could be to enable IDE features. Another reason is that certain tasks (like running npm install --save <package_name>) cannot be done inside the docker container as currently set up (the project src code is accessed from the docker container using a volume, to allow edits to the source code to trigger hot module reloading with vite).
To install the dependencies locally, ensure you are using the most recent LTS version of node. You can do this by installing nvm and running nvm use in the project directory. Once you have done that you can run npm install or npm install --save <package_name>.
The project very loosely follows the bulletproof react project structure. Below is a (not exhaustive) list of some important directories/files in the project.
public -- Assets like favicon.png and mockServiceWorker.js
tests -- js tests with vitest and react-testing-library live here.
src
features -- The majority of code will end up in this directory, divided into subdirectories by feature.
<feature_name>/reducer.js -- Redux reducers and actions for a feature should live in a single file called reducer.js in the directory for that feature.
api/api.js -- This is where all HTTP calls are configured, using RTK Query.
components -- Shared components to be used across the entire application. If a component is used in multiple features, it should go here.
routes -- Top-level components for each route should be created in this directory. The components in this directory should mostly import code from features, and not contain much code of their own that doesn't relate to page layout or styling.
index.js -- All top-level route components must be imported into this file when you add a new route
store.js -- Sets up the redux store with redux toolkit
main.jsx -- Top level file in the javascript bundle.
vite.config.js -- Configure vite which is used to build the application
The project uses mock service worker (msw) to mock API responses in development and testing. See src/mocks directory for implementation. When adding mocks, create a new file in that directory and import it in src/mocks/handlers.js.
The project uses redux toolkit for storing application state.
The project uses redux toolkit query (RTK Query) for making HTTP requests.