This project was initialized with Vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.
To ensure a smooth development experience, it's crucial to manage the application versioning right from the start. We use @saithodev/ts-appversion for this purpose. Please install it by executing the command below before moving forward with the development or build process:
npm install @saithodev/ts-appversion
After installing @saithodev/ts-appversion, run the prestart script to ensure your application version is correctly set based on the latest git tag:
npm run prestart
After installing, you can proceed with the development or build processes of your project.
npm run dev
This will serve your application on localhost:5173, where you can view it in your preferred browser. The server is configured to automatically reload upon any changes to your code, providing instant feedback on your development progress. Additionally, build errors and lint warnings will be prominently displayed in the console, helping you maintain a clean and efficient codebase.
The app will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
In the project directory, you can run:
npm run dev
Starts the development server. Open localhost:5173 to view it in your browser.
The app will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
npm run prebuild
Prepares the application versioning before building. It's an essential step to ensure that the build includes the correct version of your application.
npm run build
Builds the app for production to the dist
folder. It correctly bundles React
in production mode and optimizes the build for the best performance. Your app
is ready to be deployed!
npm run preview
Locally preview production build.
npm run lint
Runs eslint to find and fix problems in your JavaScript code.
npm run test
Launches the test runner in the interactive watch mode.
To ensure your codebase remains clean and consistent, we use Prettier for automatic code formatting. Before committing your changes, you can format your code by running the following command:
npx prettier --write .
Executing this command automatically formats the specified files. You can
replace .
with the relative path of any specific file or directory you wish
to format. This allows for targeted formatting, ensuring that only the desired
sections of your codebase are adjusted.
For managing and configuring different deployment environments (development, staging, production), we follow a structured approach to ensure consistency and reliability across all stages of deployment. Detailed guidelines and practices can be found in our Deployment Environment Configuration Management documentation.
This documentation covers:
environment.ts
,
environment.staging.ts
, environment.prod.ts
).Refer to this documentation to understand how to effectively manage and utilize environment configurations in your project.
To run the application correctly, certain environment variables need to be set. These variables control various aspects of how the application behaves in different environments (development, staging, production).
VITE_BACKEND_URL
: URL of the backend server. This is used to make API
calls from the frontend.VITE_APP_MODE
: Determines the mode in which the application runs. Set to
"test"
for using test data, any other value will use real data from the
backend.You can set these variables in a .env
file in the root of your project.
Remember to replace the values with the appropriate URLs and modes for your
specific environment. Also, ensure that you do not commit sensitive information
like production URLs or credentials in the .env
file to your version control
system.
In your React application, you can access these variables using process.env
.
For example:
process.env.VITE_BACKEND_URL
to get the backend URL.process.env.VITE_APP_MODE
to check the current mode of the application.Note: After changing the values in your .env
file, you will need to restart
your development server for the changes to take effect.
To learn more about Vite, check out the Vite documentation.
To learn React, check out the React documentation.