chore: initial commit

.env.example

@@ -0,0 +1,6 @@
+PACT_CONSUMER=pactflow-example-consumer
+PACT_PROVIDER=pactflow-example-provider
+PACT_BROKER_BASE_URL=https://*****.pactflow.io/
+PACT_BROKER_TOKEN=1234567890
+DEPLOYMENT_TARGET=production
+PACTICIPANT=frontend

.github/workflows/pr.yml

@@ -0,0 +1,44 @@
+name: PR
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
+      PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
+      PACT_CONSUMER: 'frontend'
+      PACT_PROVIDER: 'backend'
+      VERSION: ${{ github.sha }}
+      GIT_BRANCH: ${{ github.ref_name }}
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+    - name: Install dependencies
+      run: yarn install
+    - name: Run tests
+      run: make test
+      env:
+        PACT_CONSUMER: 'frontend'
+        PACT_PROVIDER: 'backend'
+    - name: Publish Pact
+      run: make publish_pacts
+  can_i_deploy:
+      runs-on: ubuntu-latest
+      needs: test
+      env:
+        PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
+        PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
+        DEPLOYMENT_TARGET: 'production'
+        PACTICIPANT: 'frontend'
+        VERSION: ${{ github.sha }}
+        GIT_BRANCH: ${{ github.ref_name }}
+      steps:
+        - uses: actions/checkout@v3
+        - name: Can I deploy?
+          run: make can_i_deploy

.github/workflows/production.yml

@@ -0,0 +1,61 @@
+name: Production
+on:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
+      PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
+      PACT_CONSUMER: 'frontend'
+      PACT_PROVIDER: 'backend'
+      VERSION: ${{ github.sha }}
+      GIT_BRANCH: ${{ github.ref_name }}
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+    - name: Install dependencies
+      run: yarn install
+    - name: Run tests
+      run: make test
+      env:
+        PACT_CONSUMER: 'frontend'
+        PACT_PROVIDER: 'backend'
+    - name: Publish Pact
+      run: make publish_pacts
+  can_i_deploy:
+      runs-on: ubuntu-latest
+      needs: test
+      env:
+        PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
+        PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
+        DEPLOYMENT_TARGET: 'production'
+        PACTICIPANT: 'frontend'
+        VERSION: ${{ github.sha }}
+        GIT_BRANCH: ${{ github.ref_name }}
+      steps:
+        - uses: actions/checkout@v3
+        - name: Can I deploy?
+          run: make can_i_deploy
+  deployment:
+      runs-on: ubuntu-latest
+      needs: can_i_deploy
+      env:
+        PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
+        PACT_BROKER_TOKEN: ${{ secrets.PACT_BROKER_TOKEN }}
+        PACTICIPANT: 'frontend'
+        VERSION: ${{ github.sha }}
+        GIT_BRANCH: ${{ github.ref_name }}
+        DEPLOYMENT_TARGET: 'production'
+      steps:
+        - uses: actions/checkout@v3
+        - name: Deploy
+          run: make deploy
+        - name: Record deployment
+          run: make record_deployment
+

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+pacts

Makefile

@@ -0,0 +1,37 @@
+ifneq (,$(wildcard ./.env))
+    include .env
+    export
+endif
+
+## ====================
+## LOCAL DEPLOYMENT
+## ====================
+
+VERSION?= $(shell git rev-parse --short HEAD)
+GIT_BRANCH?= $(shell git rev-parse --abbrev-ref HEAD)
+
+ci:
+	make test publish_pacts can_i_deploy $(DEPLOY_TARGET)
+
+## ====================
+## CI DEPLOYMENT
+## ====================
+
+publish_pacts:
+	@echo "========== STAGE: publish pacts =========="
+	docker-compose run publish_pacts
+
+test:
+	@echo "========== STAGE: test 🧪 =========="
+	yarn run test
+
+can_i_deploy:
+	@echo "========== STAGE: can-i-deploy? =========="
+	docker-compose run can_i_deploy
+
+deploy:
+	@echo "========== STAGE: deploy =========="
+	@echo "Deploying to production"
+
+record_deployment:
+	docker-compose run record_deployment

README.md

@@ -0,0 +1,53 @@
+[![Can I deploy Status](https://ermingo.pactflow.io/pacticipants/frontend/branches/main/latest-version/can-i-deploy/to-environment/production/badge)](https://ermingo.pactflow.io/pacticipants/frontend/branches/main/latest-version/can-i-deploy/to-environment/production/badge)
+
+## Description
+This frontend application is part of a bi-directional contract testing example built using React, Next.js, MSW, Jest, and PactJS along with the @pactflow/pact-msw-adapter. The application is the consumer in our contract testing example.
+
+## Features
+- Frontend built using React and Next.js
+- Mock Service Worker (MSW) for seamless backend mocking
+- Testing using Jest and PactJS
+- Integration with Pactflow for contract testing with `@pactflow/pact-msw-adapter`
+- CI/CD integration through GitHub Actions
+
+## Technologies Used
+- React
+- Next.js
+- MSW
+- Jest
+- PactJS
+- `@pactflow/pact-msw-adapter`
+- Docker
+
+## Requirements
+- Node.js v18
+- Docker
+- GitHub Actions Workflow
+
+There are three jobs defined in this workflow: test, can_i_deploy, and deployment.
+
+## CI workflow
+### test
+The test job is run on every push to the main branch. It starts by setting up Node.js, installs dependencies using Yarn, then runs the tests defined in the Makefile via make test. After successful test execution, it publishes the consumer contract using make publish_consumer_contract.
+
+Environment variables are defined to specify the Pact Broker Base URL, Pact Broker Token, the name of the participant (in this case, 'frontend'), and other variables related to reporting and versioning.
+
+### can_i_deploy
+The can_i_deploy job is dependent on the test job and only runs if the test job passes. It checks if it's safe to deploy the consumer (frontend in this case) to production using make can_i_deploy.
+
+### deployment
+The deployment job depends on the can_i_deploy job and only runs if the can_i_deploy job passes. It deploys the frontend and records the deployment using make deploy and make record_deployment commands respectively.
+
+
+### Development
+Run the following command to start the app in development mode:
+
+```bash
+yarn dev
+```
+
+### Test
+To map the CI process locally execute the command:
+```bash
+make ci
+```

app/about.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import Layout from '../app/components/Layout'
+
+const AboutPage = () => (
+  <Layout title="About | Next.js + TypeScript Example">
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <p>
+      <Link href="/">Go home</Link>
+    </p>
+  </Layout>
+)
+
+export default AboutPage

app/components/Layout.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+import Link from 'next/link'
+import Head from 'next/head'
+
+type Props = {
+  children?: ReactNode
+  title?: string
+}
+
+const Layout = ({ children, title = 'This is the default title' }: Props) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </Head>
+    <header>
+      <nav>
+        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{' '}
+        <Link href="/users">Users List</Link> |{' '}
+        <a href="/api/users">Users API</a>
+      </nav>
+    </header>
+    {children}
+    <footer>
+      <hr />
+      <span>I'm here to stay (Footer)</span>
+    </footer>
+  </div>
+)
+
+export default Layout

app/components/List.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import ListItem from './ListItem'
+import { User } from '../interfaces'
+
+type Props = {
+  items: User[]
+}
+
+const List = ({ items }: Props) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item.id}>
+        <ListItem data={item} />
+      </li>
+    ))}
+  </ul>
+)
+
+export default List

app/components/ListDetail.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { User } from '../interfaces'
+
+type ListDetailProps = {
+  item: User
+}
+
+const ListDetail = ({ item: user }: ListDetailProps) => (
+  <div>
+    <h1>Detail for {user.name}</h1>
+    <p>ID: {user.id}</p>
+  </div>
+)
+
+export default ListDetail

app/components/ListItem.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { User } from '../interfaces'
+
+type Props = {
+  data: User
+}
+
+const ListItem = ({ data }: Props) => (
+  <Link href="/users/[id]" as={`/users/${data.id}`}>
+    {data.name}
+  </Link>
+)
+
+export default ListItem

app/interfaces/index.ts

@@ -0,0 +1,4 @@
+export type User = {
+  id: number
+  name: string
+}

app/layout.tsx

@@ -0,0 +1,7 @@
+import { FC } from "react";
+
+const Layout: FC = ({ children }) => {
+  return <div>{children}</div>;
+}
+
+export default Layout

app/page.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+import Layout from '../app/components/Layout'
+
+const IndexPage = () => (
+  <Layout title="Home | Next.js + TypeScript Example">
+    <h1>Hello Next.js 👋</h1>
+    <p>
+      <Link href="/about">About</Link>
+    </p>
+  </Layout>
+)
+
+export default IndexPage