La version française suit.

Platform - GC Forms

This repository is the web application for the GC Forms platform product.

• Explore it here: https://forms-staging.cdssandbox.xyz/.

Built with

This is a Next.js and is built with:

• Next.js >= 16.x
• Sass (Syntactically Awesome Style Sheets) for reusable styles
• Tailwindcss a utility-first css framework for rapidly building custom designs
• PostCSS
• Prisma

Running locally

Infrastructure setup

Clone the forms-terraform repository and follow the instructions in our README to launch the Localstack infrastructure locally.

git clone https://github.com/cds-snc/forms-terraform.git

Web application setup

Clone this repository

git clone https://github.com/cds-snc/platform-forms-client.git

Install dependencies

cd platform-forms-client
yarn install

Set your environment variables

Create an .env.yarn file at the root of the project and use the .env.example as a template. If you want you can find a ready to use version of the .env file in 1Password > Local Development .ENV secure note

Run the web application in development mode

yarn dev

Browse web application on http://localhost:3000.

How to access databases

PostgreSQL GUI

A GUI manager is installed with prisma and can be launched with yarn prisma:studio For more information about developing with prisma migrate please visit: https://www.prisma.io/docs/guides/database/developing-with-prisma-migrate

You can optionally install a GUI manager like pgAdmin4 (MacOS download link) if you would like. Here are the credentials to access your local PostgreSQL instance:

Hostname/Address: 127.0.0.1
Port: 4510
Maintenance database: forms
Username: localstack_postgres
Password: chummy

Redis GUI

You can download RedisInsight (see download link at the bottom of this page).

Here are the credentials to access your local Redis instance:

Host: localhost
Port: 6379

Grant yourself admin access locally

There are several ways to connect to the database, but here's how to do it through Prisma Studio:

• Login using your Staging account
• Launch prisma studio with yarn prisma:studio or if you have prisma installed globally prisma studio
• A browser window will open at localhost:5555. Open the model User
• A table will appear. Find your username and add all the privileges under the privileges column.
• Click on "Save Change" button in the top menu bar once completed.

Once the change is made, you will need to 'Log Out' and log back in. Alternatively, if you want to avoid logging out, you can open RedisInsight and delete the key named auth:privileges:<your_user_id>. Then you just need to refresh the web application for the new privileges to be applied.

Testing

See package.json scripts for vitest and playwright

Local Playwright setup

For local development, the local Playwright scripts install Chromium automatically before running.

Playwight is configured to run "yarn build:test && yarn start:test" for the web server

Running Playwright without resetting your dev schema

Local Playwright defaults to the isolated database path. The local scripts run yarn db:test, but they do it against a separate Playwright schema instead of your normal local development schema. That means your long-lived local users, templates, and feature flags are left alone. Use the local Playwright scripts:

yarn playwright:ui:local

or headless:

yarn playwright:headless:local

Those commands set PLAYWRIGHT_ISOLATE_DB=true, which keeps the same PostgreSQL server but rewrites the Prisma connection to use a separate schema named playwright by default. Your normal development schema is left alone.

These local scripts install Chromium first and then run Playwright against the local isolated-db mode. The remaining playwright:headless:ci script is kept for CI-style headless runs.

Reference: Prisma PostgreSQL connection string arguments: https://www.prisma.io/docs/orm/overview/databases/postgresql Prisma multi-schema support: https://www.prisma.io/docs/orm/prisma-schema/data-model/multi-schema

If you want a different schema name, set PLAYWRIGHT_DB_SCHEMA:

PLAYWRIGHT_DB_SCHEMA=your_schema yarn playwright:headless:local

To run a single Playwright test file:

yarn playwright:headless:local tests/e2e/smoke.spec.ts

or multiple

yarn playwright:headless:local tests/e2e/forms/required-attributes.spec.ts tests/e2e/navigation-focus.spec.ts tests/e2e/forms/attestation.spec.ts

To run a single test by name:

yarn playwright:headless:local --grep "should load the homepage and display expected content"

Updating Browserslist data

If you see a Browserslist warning about stale caniuse-lite data, update it with:

npx update-browserslist-db@latest

This updates the dependency data in yarn.lock, so include the lockfile change in your commit.