Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(liveness): move liveness example app to its own app (#4451) #4462

Closed
wants to merge 11 commits into from
Closed
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 226 additions & 1 deletion .github/workflows/reusable-e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ jobs:

- example: next
package: react
tags: '@react and not @todo-react'
tags: '@react and not @todo-react and not @liveness-react'

- example: vue
package: vue
Expand Down Expand Up @@ -319,6 +319,231 @@ jobs:
packages/e2e/cypress/screenshots/**
retention-days: 5

e2e-liveness:
# Only run e2e tests if unit tests pass
runs-on: ubuntu-latest
environment: ci
env:
NODE_ENV: test

strategy:
# Run each examples (e.g. `next-example`) which uses a library (e.g. `@aws-amplify/ui-react`)
# BUT, Exclude `@todo-${{ package }}` tests in PRs
# See: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#using-environment-variables-in-a-matrix
matrix:
include:
- example: next
package: react
tags: '@liveness-react and not @react and not @todo-react'

steps:
- name: Checkout Amplify UI
uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f
with:
# For `pull_request_target`, we want ref to point to `pull_request.head.ref` because `github.ref`
# always points to the target branch.
# See: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
ref: ${{ inputs.commit }}
repository: ${{ inputs.repository }}
persist-credentials: false

- name: Next.js Cache
uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
with:
path: ${{ github.workspace }}/.next/cache
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1

- name: Setup Node.js 16
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
with:
node-version: 16
cache: 'yarn'
env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2

- name: Restore cypress runner Cache
uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
id: restore-cypress-cache
with:
path: ~/.cache/Cypress
key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1

- name: Restore node_modules cache
uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
id: restore-cache
with:
path: |
./node_modules
**/node_modules
key: ${{ runner.os }}-nodemodules-${{ inputs.commit }}
env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3

- name: Restore ui/dist cache
uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
id: restore-ui-cache
with:
path: ./packages/ui/dist
key: ${{ runner.os }}-ui-${{ inputs.commit }}

- name: Restore ${{ matrix.package }}/dist cache
id: restore-package-cache
uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
with:
path: ./packages/${{ matrix.package }}/dist
key: ${{ runner.os }}-${{ matrix.package }}-${{ inputs.commit }}
env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1

- name: Install packages
if: steps.restore-cache.outputs.cache-hit != 'true' || steps.restore-cypress-cache.outputs.cache-hit != 'true'
uses: ./.github/actions/install-with-retries
with:
skip-cypress-binary: false

- name: Build @aws-amplify/ui package
if: steps.restore-ui-cache.outputs.cache-hit != 'true'
run: yarn ui build

- name: Build react-core package
if: ${{ matrix.package == 'react' }}
run: yarn react-core build

- name: Build ${{ matrix.package }} package
if: steps.restore-package-cache.outputs.cache-hit != 'true'
run: yarn ${{ matrix.package }} build

- name: Build react-liveness package
if: ${{ matrix.package == 'react' }}
run: yarn react-liveness build

- name: Add Amplify CLI
run: yarn global add @aws-amplify/cli

- name: Configure auth credentials
uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
with:
aws-region: us-east-2
role-to-assume: ${{ secrets.AUTH_E2E_ROLE_ARN }}

# Amplify CLI does not support headless pull with temporary credentials
# when useProfile is false.
# See: https://github.com/aws-amplify/amplify-cli/issues/11009.
- name: Create temp AWS Profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Pull down Auth AWS environments
run: yarn environments auth pull

- name: Create temp AWS profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
with:
aws-region: us-east-2
role-to-assume: ${{ secrets.STORAGE_E2E_ROLE_ARN }}

- name: Create temp AWS profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Pull down Storage AWS environments
run: yarn environments storage pull

- name: Configure datastore credentials
uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
with:
aws-region: us-east-2
role-to-assume: ${{ secrets.DATASTORE_E2E_ROLE_ARN }}

- name: Create temp AWS profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Pull down Datastore AWS environments
run: yarn environments datastore pull

- name: Configure liveness credentials
uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
with:
aws-region: us-east-2
role-to-assume: ${{ secrets.LIVENESS_E2E_ROLE_ARN }}

- name: Create temp AWS profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Pull down Liveness AWS environments
run: yarn environments liveness pull

# Amplify CLI does not support headless pull with temporary credentials
# when useProfile is false.
# See: https://github.com/aws-amplify/amplify-cli/issues/11009.
- name: Create temp AWS Profile
run: |
aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
aws configure set aws_session_token $AWS_SESSION_TOKEN && \
aws configure set default.region $AWS_REGION

- name: Delete AWS profile
run: rm -rf ~/.aws

- name: Build ${{ matrix.example }} example
run: yarn ${{ matrix.example }}-example-liveness build

- name: Start ${{ matrix.example }} example
run: yarn ${{ matrix.example }}-example-liveness start & npx wait-on -c waitOnConfig.json -t 20000 http-get://localhost:3000/ui/components/liveness/
env:
# Setting this value temporarily since the beta liveness sample app hits the gamma endpoint
NEXT_PUBLIC_STREAMING_API_URL: wss://streaming-rekognition-gamma.us-east-1.amazonaws.com

- name: Run E2E tests against ${{ matrix.example }} example
id: e2e
run: yarn e2e test:liveness
env:
# Override on the default value in `cypress.json` with framework-specific tag
TAGS: '${{ matrix.tags }}'

# Env values for testing flows
DOMAIN: ${{ secrets.DOMAIN }}
PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
USERNAME: ${{ secrets.USERNAME }}
NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}

- name: Upload failure screenshots and errors
uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
if: ${{ failure() && steps.e2e.outcome != 'success' }}
with:
name: e2e-cypress-error-${{ matrix.package }}
path: |
packages/e2e/cypress/videos/**
packages/e2e/cypress/screenshots/**
retention-days: 5

check-changed-packages:
runs-on: ubuntu-latest
outputs:
Expand Down
3 changes: 3 additions & 0 deletions examples/next-liveness/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Set this .env to the beta/gamma endpoints to test locally
NEXT_PUBLIC_STREAMING_API_URL=
NEXT_PUBLIC_BACKEND_API_REGION=
3 changes: 3 additions & 0 deletions examples/next-liveness/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": ["next", "next/babel", "next/core-web-vitals"]
}
34 changes: 34 additions & 0 deletions examples/next-liveness/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# 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
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel
36 changes: 36 additions & 0 deletions examples/next-liveness/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Next.js + Amplify UI Example

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. e.g. Authenticator Sign In With Email is at "http://localhost:3000/ui/components/authenticator/sign-in-with-email".

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

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

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

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
5 changes: 5 additions & 0 deletions examples/next-liveness/next-env.d.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 26 additions & 0 deletions examples/next-liveness/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const path = require('path');
const { patchWebpackConfig } = require('next-global-css');

module.exports = {
reactStrictMode: true,
/**
* Setting trailingSlash to true to resolve known bug with federated sign in redirect + next.js
* https://github.com/aws-amplify/amplify-cli/issues/7359#issuecomment-812821315
*/
trailingSlash: true,
pageExtensions: ['page.tsx'],
webpack: (config, options) => {
// allows importing of css files inside modules
patchWebpackConfig(config, options);

// resolve react and react-dom from project node_modules
config.resolve.alias = {
...config.resolve.alias,
react: path.resolve(__dirname, 'node_modules/react'),
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
'react-map-gl': path.resolve(__dirname, 'node_modules/react-map-gl'),
};

return config;
},
};
43 changes: 43 additions & 0 deletions examples/next-liveness/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "@aws-amplify/ui-next-example-liveness",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"clean": "rimraf node_modules .next",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@aws-amplify/ui-react": "5.2.0",
"@aws-amplify/ui-react-liveness": "^2.0.6",
"@aws-sdk/credential-providers": "^3.370.0",
"aws-amplify": "5",
"next": "^13.4.19",
"next-global-css": "^1.1.1",
"react": "18",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "18",
"react-icons": "^4.4.0",
"react-map-gl": "7.0.23",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need react-map-gl for testing Liveness?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope good catch, will remove

"swr": "^2.0.0"
},
"devDependencies": {
"@types/node": "^15.12.4",
"@types/react": "^18.2.22",
"eslint": "^8.44.0",
"eslint-config-next": "11.0.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think the plugin major version might be meant to align with the major version of NextJS

"rimraf": "^3.0.2"
},
"workspaces": {
"nohoist": [
"aws-amplify",
"**/aws-amplify/**",
"**/react/",
"**/react/**",
"react-dom",
"**/react-dom/**"
]
}
}
Loading
Loading