This application provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
1/ Make .env file:
VITE_APP_API_URL: Fetch API url
VITE_APP_ENABLE_API_MOCKING: Flag to run mock server. Value false or true
- Example:
VITE_APP_API_URL=https://api.employee-managment.com/api
VITE_APP_ENABLE_API_MOCKING=true
2/ Run make run
To use this project, follow these steps:
Access the application Once the services are running, access the application at [local URL, e.g., http://localhost:8000].
- Install all packages that require to run the app.
- Runs the app in the development mode.
- Builds the app for production to
distfolder
- Preview the build of the production in local environment
- Format the code following the rule config in
@/src/.prettierrc.cjs
- Check ESlint of the code following the rule config in
@/src/.eslintrc.cjs
- Fix ESlint error following the rule config in
@/src/.eslintrc.cjs
- Runs unit tests for your application. These tests verify if individual parts of your code function as expected.
- Runs the tests and also generates a report that shows how much of your code is covered by the tests. High coverage indicates that most parts of your code have been tested.
- Runs end-to-end (e2e) tests in the application. These tests simulate user interactions and verify the overall functionality of the app from the user's perspective
- Same with
yarn test:e2ebut in interactive UI mode, with a built-in watch mode
Core: containing our entities, application (use-case). This is what the application is at its core (hence the name).
Data: containing implementations of repositories for retrieving data from external services. This is how we get and store data.
Presentation: This layer is how the user sees and interacts with our application. It contains Angular/React/Vue.
Dependency graph:
Dependency flow:
src Directory:
|-- assets/
| └── ... // Static files such as images and fonts
|-- application/
| └── ... // Specific business use cases for the application
|-- components/
| └── ... // Reusable UI components
|-- config/
| └── ... // Configuration files like env variables
|-- constants/
| └── ... // Shared constant
|-- domain/
| └── ... // Define all the core entites model
|-- infrastructure/
| └── ... // Define how the application layer interacts with external and local data
|-- features/
| └── ... // Feature-specific folders with components, hooks, etc.
|-- presentation/
| └── ... // UI and Layout logic for each features contains Angular/React/Vue code.
|-- providers/
| └── ... // Application providers (HOC)
|-- hooks/
| └── ... // Shared custom hooks
|-- lib/
| └── ... // Pre-configured third-party libraries
|-- app/
| └── ... // Application routing configuration
|-- stores/
| └── ... // Global state management
|-- types/
| └── ... // TypeScript types and interfaces
|-- utils/
| └── ... // Shared utility functions
|-- main.tsx
|-- index.html