Development

One page summary of how to works on Frontend project.

Branching

• The base branch for all Frontend work should be fe-develop.

• When creating a branch for a new feature, use the format features/{ticket-id}-feature-name.
  Example: features/AMP-123-contact-block

• For bug fixes, follow the pattern bugfixes/{ticket-id}-issue-name.
  Example: bugfixes/AMP-456-contact-block-header-issue

Apart from features/* and bugfixes/*, there are also infra/* and refactor/* branches.

Notes:

• Always use the task/bug's ID as the ticket ID; do not use the user story's ID since it is shared between the Frontend and Backend teams.

• All branches MUST include the ticket ID and a short description to help repository maintainers understand their purpose without needing to refer to the Jira ticket ID. This practice makes branch management more efficient.

• Delete your branch after it has been merged into the base branch, unless there is a compelling reason to keep it.

Configuration

In the /PreciseAlloy.Frontend/.env.development file, configure the following variables:

• VITE_PORT
  This sets the port for serving the Frontend site, with the default port being 5000.

• VITE_BASE_URL
  Configure the base path for serving the Frontend site.
  This should be an absolute path and should start and end with /.
  The default value is /, but you can modify it to something like /static/.

• VITE_PATH_EXTENSION
  Specify the extension for the rendered pages output to browsers.
  It should be .html by default, but it can also be left empty.

• VITE_TITLE_SUFFIX
  The suffix in the title. For example, if you are on the Home page and the value for this variable is Alloy UI, then the page title will be Home - Alloy UI.

Deployment

Whenever there is a push or merge into the fe-develop branch, it triggers the deployment process to update the Frontend site with the latest code changes.

Testing

To ensure that your changes are ready for Ready For Testing (RFT), follow these steps:

1. Visit the Frontend site and thoroughly inspect your changes.

2. If everything is ready for testing, go to your Frontend Task or Bug (not User Story) and add a new comment with the following format:

   Hi @QA Name,
   RFT.
   URL: URL to your FE page.

3. Optionally, you can provide additional information in the comment, including but not limited to:

   • Steps for executing the test.
   • Integration notes for the Backend team.

Refer to the Testing documentation for RFT criteria.

Packaging

To create the Frontend package, follow these steps:

1. Create a Pull Request (PR) from fe-develop into fe-release.

2. After the PR is merged, it triggers the packaging process. This process typically involves running bun install, bun run build, or any necessary steps to create a distribution package containing bundled CSS, JavaScript, and icons used by the Backend team.

3. If the packaging process is successful, a PR is automatically created from fe-release-inte-package to develop.

4. Review and approve the PR, and the Backend team can then use the new Frontend package. Refer to the User Story to determine who is responsible for the Backend integration, and inform them accordingly.