SSW.Website

This repository is a v3 of the SSW.Website. This website uses NextJS with TinaCMS.

Watch the demo:

See the important Documents

• Instructions - Deployment
• Business
• Technologies and Architecture
• Alternative Solutions Considered
• Definition of Done
• Definition of Ready
• SSW Website - Power Automate flows
• Application Insights Configuration - Cost optimization and monitoring configuration

Architecture Overview

Requirements

• Git
• nvm - nvm use selects the Node version pinned in .nvmrc
• pnpm - enable once with corepack enable pnpm (the version comes from packageManager in package.json)
• A TinaCMS account for live editing.

Get Started

Enable pnpm once per machine, and select the pinned Node version in each new terminal (Corepack ships with Node):

nvm use
corepack enable pnpm

Install the project's dependencies:

pnpm install

Run the project locally. This starts Next.js and the local TinaCMS server together, which is why there are two ports below:

pnpm dev

Build the project:

pnpm build

Build the Docker image locally (optional)

Docker is not required for day-to-day development. pnpm dev above is usually the quicker path, and is easier to debug. Build the image when you need to reproduce the deployed container, for example to chase a build or runtime problem that only shows up there.

To build the Docker image, execute the following command to extract the necessary Docker build command:

./docker-build-cmd.ps1

This script will generate the final Docker build command and automatically copy it to your clipboard. Simply paste the command into your terminal (CMD), and the Docker image build process will commence.

Once the Docker image is ready, run the following command:

docker run --env-file .env -p 3000:3000 ssw-website

⚠️ Important: Ensure that all required secrets are present in your .env file and stored in the root directory of your project. Additionally, make sure to update the NEXT_PUBLIC_TINA_BRANCH to match the branch you're testing on.

Get Started with Dev Container

How to

1. Open Command Palette in VSCode

> Dev Containers: Reopen in Container

2. Develop as you would normally

Don't want to use Dev Container any more?

1. Close VSCode connected with the Dev Container
2. Open project folder on host machine
3. Remove node_modules and reinstall dependencies

pnpm install

Updating the project's dependencies

pnpm outdated

Test locally to make sure everything still works.

Local URLs

• http://localhost:3000 : browse the website
• http://localhost:3000/admin : connect to Tina Cloud and go in edit mode
• http://localhost:3000/exit-admin : log out of Tina Cloud
• http://localhost:4001/altair/ : GraphQL playground to test queries and browse the API documentation

UI Testing on local

1. Make sure you have CREATE_LEAD_ENDPOINT environment variable in your .env - Follow steps to setup

2. Run npx playwright test --ui in your terminal and make sure your local instance is running in the background.

Run Lighthouse tests locally

pnpm lhci autorun

It generates report and saves into .lighthouseci folder. You can also change the URLs of the pages you want to test in the .lighthouserc.json file.

Pull Requests

Staging deployments are opt-in - comment /deploy on a Pull Request to build it and deploy it to its own staging environment (requires write access). The URL to the environment is posted in the PR thread. New commits are not deployed automatically - comment /deploy again to update the slot.

Slots are a shared, limited resource (see #4767) - they are capped at 5 concurrent PR slots and cleaned up when a PR closes or goes inactive for 7 days.

⚠️ Warning: Changes in the mdx files must be done with TinaCMS. This is because TinaCMS maps mdx files with its fields with specific characters for customized UI (e.g., rich-text field). So avoid direct edits as they may result in build failures or go unnoticed during PR reviews.

Getting Help

• Email SSW to schedule a call.

• Reach out through the chat widget on ssw.com.au

• Visit the documentation to learn about TinaCMS.

• Join the Tina Discord to share feedback for TinaCMS to improve.