React JS
├── public # Public Assets
├── README.md # Setup Instructions
├── src # Source Code
│ ├── App.css # Main app styles
│ ├── App.tsx # Main app and router
│ ├── common # Common repo data types
│ ├── components # Common components
│ │ └── Component # Folder named after component
│ │ ├── Component.tsx # Component
│ │ └── util.ts
│ ├── index.css
│ ├── index.tsx # Root element
│ ├── mock # Mock tools and repo data
│ │ ├── data
│ │ │ └── podcast.ts
│ │ └── service.ts # Tools for mocking services
│ ├── feature # Feature folder example
│ │ ├── components # Feature specific components
│ │ │ ├── Component.tsx
│ │ ├── Page.tsx # Feature page (routable)
│ │ ├── Page.styles.ts # Feature styles: usePageStyles, useComponentStyles
│ │ ├── util.ts
│ │ └── store # Feature specific store module
│ │ ├── actions.ts
│ │ ├── reducer.ts
│ │ └── types.ts
│ ├── routes.ts # Routes and route meta data
│ ├── services # Api services and tools for building crud services
│ ├── store # Common store modules
│ │ └── module # Short module name
│ │ ├── actions.ts
│ │ ├── reducer.ts
│ │ └── types.ts
│ └── util # Common utilities
└── tsconfig.json # Typescript Config
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Performs linting operations against the project files(ts,tsx,json,yaml) using the ./eslintrc.json config
Performs a check against your eslint and prettier rules to find conflicts
Lints the entire prokect, runs all unit tests followed by all cypress specs.
Launches the jest unit test runner in watch mode.
See the section about running tests for more information.
Runs all cypress cypress specs and dislays a report upon completion.
Opens cypress test runner and displays all specs to be ran individually. See test runner for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
We use eslint to lint the project and prettier as a formatter. Certain eslint rules will conflic with this setup. Run npm run prettier:conflicts to see a list of any conflicts after making changes to any linting rules.
The Project is configured to Unix LF or '/n', End of Line Characters. Prettier is setup to maintain this throughout the project.
Prettier rules are nested within the eslintrc > rules > prettier/prettier