Client Overview Guide
The Nano Boilerplate Client is a React single page application (SPA).
This guide is a walkthrough of all the React client project structure and its key components.
At the top level, are two folders:
- Public – static files like the logo, favicon, etc. and the index.html file containing the root div.
- Src – contains the react component source code, with most of the components placed in subfolders and will be explained further.
Also at the top level, are these files:
- .env.development and .env.production contain variables which specify which URI to use depending on the development environment.
- package.json contains the dependency manifest. After running the npm-install command, another folder will appear called node_modules, see the set-up guide for instructions.
- tsconfig.json is a configuration file for Typescript
- .gitignore specifies files and folders to be ignored by git
The source folder (src) contains the entry point of the app, index.tsx and App.tsx, as well as routes.tsx for routing.
The source components are organized with this folder structure:
- App – Axios api, Mobx stores, models, custom hooks, utilities
- Components – React components
- Navigation – layout, access, and navigation
- Pages – views of the application
- Theme – contains Mui theme overrides
- Icons – icon collection
The main folders are explained further in the following sections