Front end

Frameworks used

The frontend of the Housing Repairs Online app is built using Next.js and deployed as an Azure static web app and functions.

Next.js

Is a react framework that provides client-side and server-side rendering.

Source code for the app could be found here.

The frontend is currently deployed to Azure static web using github actions.

Each next.js API endpoint is deployed as an Azure function.

Environment variables

Add to Azure Portal

The following environment variables need to be set in the Azure portal to enable the frontend app to make calls to be Repairs API:

Name	Description
`REPAIRS_API_BASE_URL`	URL of the Repairs API, see docs.
`REPAIRS_API_IDENTIFIER`	Unique authentication identifier for the accessing the API, see docs.
`SENTRY_DSN`	The Sentry project Data Source Name (DSN), see docs.

Add to GitHub Repository Secrets

Any environment variable that needs to be used on the client side should be set at deployment time in the Build And Deploy job.

The following variables are required by the front end and should be setup as GitHub secrets for the repository:

Name	Description
`SENTRY_DSN`	The Sentry project Data Source Name (DSN).
`SENTRY_ORG`	The organisation specified in Sentry.
`SENTRY_AUTH_TOKEN`	Authentication token used for all communication with Sentry.
`CUSTOMER_SERVICES_TELEPHONE_NUMBER`	The customer service number to contact *during opening hours*.
`LOCAL_COUNCIL_FULL_NAME`	The full name of the local authority e.g `ABC Council`
`OUT_OF_HOURS_CUSTOMER_SERVICES_TELEPHONE_NUMBER`	The customer service number to contact *outside of opening hours*.
`COUNCIL_WEBSITE_HOMEPAGE_URL`	The local authority's website URL written without a `/` at the end e.g `www.example.com`. See here.
`PRIVACY_NOTICE_WEB_PAGE_PATH`	Resource path to the local authority's privacy notice without a `/` at the start. e.g `privacynotice`. See here.
`ACCESSIBILITY_STATEMENT_WEB_PAGE_PATH`	Resource path to the local authority's accessibility statement without a `/` at the start. e.g `accessibility-statement` . See here.
`CONTACT_US_PAGE_PATH`	Resource path to the local authority's contact details without a `/` at the start. e.g `contact`. See here.
`CUSTOMER_SERVICES_OPENING_HOURS_DESCRIPTION`	The customer service opening hours, can set as a JSON or text. See here.
`CUSTOM_DOMAIN_NAME`	OPTIONAL: The custom domain name you wish to attach to your static site. See here for more details

Adding local authority web links (i.e. Accessibility Statement, Privacy Notice, Contact Us)

The generated links for these pages depends on the value given for COUNCIL_WEBSITE_HOMEPAGE_URL.

Each link will be constructed as follows:

Accessibility Statement: COUNCIL_WEBSITE_HOMEPAGE_URL/ACCESSIBILITY_STATEMENT_WEB_PAGE_PATH
Privacy Notice: COUNCIL_WEBSITE_HOMEPAGE_URL/PRIVACY_NOTICE_WEB_PAGE_PATH
Contact Us: COUNCIL_WEBSITE_HOMEPAGE_URL/CONTACT_US_PAGE_PATH

For example, if given:

COUNCIL_WEBSITE_HOMEPAGE_URL = www.test-local-gov.uk
CONTACT_US_PAGE_PATH = contact-details/contact-us
The link generated will be: www.test-local-gov.uk/contact-details/contact-us

Note: When giving a web resource path, you do not need to add the starting / . Similarly for the website homepage URL, you do not need to add the ending /. The code will add this when it joins the two values together, as seen in the example above.

Adding local authority customer services opening hours

Opening hours can be added by setting the CUSTOMER_SERVICES_OPENING_HOURS_DESCRIPTION environment variable to either a JSON object or as text. Depending on what is given, it will display the opening hours information either as a list or as text in a simple paragraph in the front end.

Usage

As a JSON object

If CUSTOMER_SERVICES_OPENING_HOURS_DESCRIPTION is a JSON object

Example:

{
  "Monday": "9am to 5pm",
  "Tuesday": "9am to 5pm",
  "Wednesday": "9am to 5pm",
  "Thursday": "9am to 5pm",
  "Friday": "9am to 5pm"
}

the code will generate the following HTML in the frontend:

<ul>
  <li>Monday: 9am to 5pm</li>
  <li>Tuesday: 9am to 5pm</li>
  <li>Wednesday: 9am to 5pm</li>
  <li>Thursday: 9am to 5pm</li>
  <li>Friday: 9am to 5pm</li>
</ul>

which will display the information as a list in the frontend.

As a line of text (i.e not in JSON)

If CUSTOMER_SERVICES_OPENING_HOURS_DESCRIPTION is simple text (i.e anything not in the JSON format)
Example:
```
  9am to 5pm, Monday to Friday
```
the code will generate the following HTML in the frontend:
```
<p>9am to 5pm, Monday to Friday</p>
```
which will display the information as a line of text in the frontend.

Feature Flags

The following feature flags is set in the next root .env file:

RELEASE_VERSION
ENABLE_LEASEHOLDER_FLOW

The RELEASE_VERSION feature flag can be set to

'mvp' or
'full'.

Any other value, including the absence of this variable, will result in the application falling back on the 'full' version.

The flag denotes which version of the application to build. This flag allows the introduction of version specific behaviour.

For example, in the mvp version of the app, the repair description and the image controls are on the same page. In the full version, they are shown on separate pages.

The second feature flag ENABLE_LEASEHOLDER_FLOW allows the users to control whether the front end will allow leaseholders to report repairs.

If set to true it will enable the flow. Any other value will disable the flow, and ask the customer to contact the local authority.

Monitoring and alerting

Sentry is used for monitoring and alerting.

Front end

Frameworks used​

Next.js​

Environment variables​

Add to Azure Portal​

Add to GitHub Repository Secrets​

Adding local authority web links (i.e. Accessibility Statement, Privacy Notice, Contact Us)​

Adding local authority customer services opening hours​

Usage​

As a JSON object​

As a line of text (i.e not in JSON)​

Feature Flags​

Monitoring and alerting​