This is a Next.js project bootstrapped with create-next-app.

Before you start

• Docker (needed for Dev container)

If you develop inside the Dev container

• VSCode
• Dev Containers Extension

If you develop without Dev containers

• Node.js (we used version 20.18.0, but older version should also work. Ideally, install them with nvm to easily switch between Node.js versions if needed)
• VSCode (it is optional, you can use any IDE, but VSCode has predefined formatting on save according to the project's linting rules)

Getting Started

First, run the development server:

npm ci 

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Running Playwright tests (in Dev Container only)

It is recommended to run the tests in Dev Container only because in this case there will no discrepancy between screenshots generated on different OS. To run the dev server, you can run the following script with test data and without interacting with the API. In this mode, Next.js image optimization is enabled, and it is recommended to use it when you want to see how the site works with optimizations close to production:

npm run dev:static

Once you have successfully started the dev server (you can open it at http://localhost:3000), leaving the first terminal active in a separate terminal tab, you can run tests in headless mode (without the browser user interface) by running the following script:

npm run playwright:run

If you want to work exclusively inside the Dev container, you need to connect to the Dev container's VNC server (remote desktop) here http://localhost:6080/. Password: vscode. After running the following command, you should see the Playwright interface:

npm run playwright:open

Updating base screenshots

When you need to update screenshots that are no longer relevant, you can do it with the following command:

npm run update-snapshots

Only those screenshots that have discrepancies will be replaced.

Viewing test report locally

After executing npm run playwright:run you will be able to see the tests run report. For example, whether there were retries when running one or more tests. If the test failed, the report will be generated automatically. If the test passed, the report can be generated with the command:

npx playwright show-report

If you develop in a Dev container, you can view the generated report via VNC:

npx playwright open localhost:9323

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Dev Environment

After merging your changes into the develop branch, they will be available here: https://dev.tourmalinecore.com/