Building a Amplify Flutter for Web using a Serverless CDK Backend in Typescript with AppSync Merged APIs

createTable(namespace: string): Table {
const table = new Table(this, `BackendTable-${namespace}`, {
billingMode: BillingMode.PAY_PER_REQUEST,
partitionKey: {
name: 'pk',
type: AttributeType.STRING,
},
removalPolicy: RemovalPolicy.DESTROY,
sortKey: {
name: 'sk',
type: AttributeType.STRING,
},
stream: StreamViewType.NEW_IMAGE,
tableName: `backend-table-${namespace}`,
});

table.addGlobalSecondaryIndex({
indexName: 'gsi1',
partitionKey: {
name: 'gsi1pk',
type: AttributeType.STRING,
},
sortKey: {
name: 'gsi1sk',
type: AttributeType.STRING,
},
});

return table;
}

createUserPool(namespace: string): cognito.UserPool {
const postConfirmationLambda = new NodejsFunction(this, `${namespace}-post-confirmation-lambda`, {
entry: 'backend/src/auth/post-confirmation.ts',
runtime: Runtime.NODEJS_18_X,
bundling: {
externalModules: ['@aws-sdk/client-dynamodb', '@aws-sdk/lib-dynamodb'],
},
environment: {
TABLE_NAME: this.table.tableName,
},
});
this.table.grantReadWriteData(postConfirmationLambda);

const userPool = new cognito.UserPool(this, 'UserPool', {
selfSignUpEnabled: true,
removalPolicy: RemovalPolicy.DESTROY, // for development only
standardAttributes: {
email: {
required: true,
},
},
autoVerify: {
email: true,
},
keepOriginal: {
email: true,
},
lambdaTriggers: {
postConfirmation: postConfirmationLambda,
},
customAttributes: {
city: new cognito.StringAttribute(),
country: new cognito.StringAttribute(),
},
});

const groups = ['Speaker', 'Organizer', 'Admin'];

groups.forEach((groupName) => {
new cognito.CfnUserPoolGroup(this, `UserPoolGroupAdmin${groupName}`, {
groupName,
userPoolId: userPool.userPoolId,
});
});

userPool.addClient('UserPoolClientFrontend', {
authFlows: {
userPassword: true,
userSrp: true,
custom: true,
},

oAuth: {
flows: {
authorizationCodeGrant: true,
},
scopes: [
cognito.OAuthScope.OPENID,
cognito.OAuthScope.PHONE,
cognito.OAuthScope.EMAIL,
cognito.OAuthScope.PROFILE,
cognito.OAuthScope.COGNITO_ADMIN,
],
callbackUrls: ['https://example.lockhead.info', 'https://test.example.lockhead.info'],
logoutUrls: ['https://example.lockhead.info/logout', 'https://test.speakers.lockhead.info/logout'],
},
});

return userPool;
}

import { PutCommand } from '@aws-sdk/lib-dynamodb';

import { docClient, tableName } from '../util/docClient';

import type { PostConfirmationTriggerEvent } from 'aws-lambda';
const handler = async (event: PostConfirmationTriggerEvent): Promise<PostConfirmationTriggerEvent> => {
try {
const item = {
pk: `user#${event.userName}`,
sk: `user#${event.userName}`,
username: event.userName,
email: event.request.userAttributes.email,
firstName: event.request.userAttributes.given_name,
lastName: event.request.userAttributes.family_name,
birthdate: event.request.userAttributes.birthdate,
gender: event.request.userAttributes.gender,
city: event.request.userAttributes['custom:city'],
country: event.request.userAttributes['custom:country'],
};

await docClient.send(
new PutCommand({
TableName: tableName,
Item: item,
}),
);
} catch (err) {
console.log(err);
throw new Error('Registration failed');
}
return event;
};

export { handler };

import * as cdk from 'aws-cdk-lib';

// first source API
const firstApi = new appsync.GraphqlApi(this, 'FirstSourceAPI', {
name: 'FirstSourceAPI',
definition: appsync.Definition.fromFile(path.join(__dirname, 'appsync.merged-api-1.graphql')),
});
firstApi.addNoneDataSource('FirstSourceDS', {
name: cdk.Lazy.string({ produce(): string { return 'FirstSourceDS'; } }),
});

// second source API
const secondApi = new appsync.GraphqlApi(this, 'SecondSourceAPI', {
name: 'SecondSourceAPI',
definition: appsync.Definition.fromFile(path.join(__dirname, 'appsync.merged-api-2.graphql')),
});
secondApi.addNoneDataSource('SecondSourceDS', {
name: cdk.Lazy.string({ produce(): string { return 'SecondSourceDS'; } }),
});
const speakerDataSource = secondApi.addDynamoDbDataSource(`backend-datasource-${namespace}`, this.table);

createAppsyncResolver(
secondApi,
speakerDataSource,
'Query',
'getInformation',
'../lib/gql-functions/Query.getInformation.js',
);
// Merged API
const mergedApi = new appsync.GraphqlApi(this, 'MergedAPI', {
name: 'MergedAPI',
definition: appsync.Definition.fromSourceApis({
sourceApis: [
{
sourceApi: firstApi,
mergeType: appsync.MergeType.MANUAL_MERGE,
},
],
}),
});
createAppsyncResolver(
graphqlApi: GraphqlApi,
dataSource: DynamoDbDataSource,
type: string,
name: string,
pathToFunction: string,
): void {
const appsyncFunction = new AppsyncFunction(this, `${name}Function`, {
name: `${name}Function`,
api: graphqlApi,
dataSource,
runtime: FunctionRuntime.JS_1_0_0,
code: Code.fromAsset(path.join(__dirname, pathToFunction)),
});

new Resolver(this, `${name}FunctionPipelineResolver`, {
api: graphqlApi,
typeName: type,
fieldName: name,
code: Code.fromAsset(path.join(__dirname, '../lib/gql-functions/passThrough.js')),
runtime: FunctionRuntime.JS_1_0_0,
pipelineConfig: [appsyncFunction],
});
}

import { type Context } from '@aws-appsync/utils';
// The before step.
// This runs before ALL the AppSync functions in this pipeline.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function request(...args: string[]): any {
console.log(args);
return {};
}

// The AFTER step. This runs after ALL the AppSync functions in this pipeline.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function response(ctx: Context): any {
return ctx.prev.result;
}

import { type Speaker } from '../API';
// import slug from 'slug';
import { util, type DynamoDBQueryRequest, type Context } from '@aws-appsync/utils';

export function request(ctx: Context): DynamoDBQueryRequest {
if (ctx.identity == null) {
// util.error(String, String?, Object?, Object?)
util.error('Failed to fetch information - no identity found', 'IdentityMissing', ctx.prev.result);
return ctx.prev.result;
}

const speaker = ctx.args.speaker;

const pk = `user#${speaker.replaceAll('information#', '')}`;

// change to GetItem instead of Query because values.id contains that information
return {
operation: 'Query',
query: {
expression: '#pk = :pk and begins_with(#sk, :sk)',
expressionNames: {
'#pk': 'pk',
'#sk': 'sk',
},
expressionValues: util.dynamodb.toMapValues({
':pk': pk,
':sk': 'information#',
}),
},
};
}

export function response(ctx: Context): Information {
const response = ctx.result.items[0];
return response as Information;
}

class EnvironmentConfig {
static const WEB_URL = String.fromEnvironment('WEB_URL');
static const API_URL = String.fromEnvironment('API_URL');
static const CLIENT_ID = String.fromEnvironment('CLIENT_ID');
static const POOL_ID = String.fromEnvironment('POOL_ID');
}

const amplifyconfig = """{
"UserAgent": "aws-amplify-cli/2.0",
"Version": "1.0",
"api": {
"plugins": {
"awsAPIPlugin": {
"frontend": {
"endpointType": "GraphQL",
"endpoint": "${EnvironmentConfig.API_URL}",
"region": "us-east-1",
"authorizationType": "AMAZON_COGNITO_USER_POOLS"
}
}
}
},
"auth": {
"plugins": {
"awsCognitoAuthPlugin": {
"UserAgent": "aws-amplify-cli/0.1.0",
"Version": "0.1.0",
"IdentityManager": {
"Default": {}
},
"CognitoUserPool": {
"Default": {
"PoolId": "${EnvironmentConfig.POOL_ID}",
"AppClientId": "${EnvironmentConfig.CLIENT_ID}",
"Region": "us-east-1"
}
},
"Auth": {
"Default": {
"authenticationFlowType": "USER_PASSWORD_AUTH",
"socialProviders": [],
"usernameAttributes": [
"EMAIL"
],
"signupAttributes": [
"BIRTHDATE",
"EMAIL",
"FAMILY_NAME",
"NAME",
"NICKNAME",
"PREFERRED_USERNAME",
"WEBSITE",
"ZONEINFO"
],
"passwordProtectionSettings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"mfaConfiguration": "OFF",
"mfaTypes": [
"SMS"
],
"verificationMechanisms": [
"EMAIL"
]
}
}
}
}
}
}""";

const execOptions: ExecSyncOptions = {
stdio: ['ignore', process.stderr, 'inherit'],
};

const bundle = Source.asset('./frontend', {
bundling: {
command: ['sh', '-c', 'echo "Docker build not supported. Please install flutter."'],
image: DockerImage.fromRegistry('alpine'),
local: {
tryBundle(outputDir: string) {
try {
execSync('flutter --version', execOptions);
/* c8 ignore next 3 */
} catch {
return false;
}
execSync('cd frontend && flutter clean', execOptions);
execSync("cd frontend && git config --global --add safe.directory '*'", execOptions);
execSync('cd frontend && flutter pub get', execOptions);
execSync('cd frontend && flutter precache --web', execOptions);
// execSync('cd frontend && flutter test --platform chrome --coverage', execOptions);
execSync(
`cd frontend && flutter build web --no-tree-shake-icons --dart-define=WEB_URL=https://${domainName} --dart-define=API_URL=https://api.${domainName}/graphql --dart-define=CLIENT_ID=${userPool.clientId} --dart-define=POOL_ID=${userPool.poolId}`,
execOptions,
);
copySync('./frontend/build/web', outputDir);
return true;
},
},
},
});

new BucketDeployment(this, 'Deployment', {
destinationBucket: bucket,
distribution,
distributionPaths: ['/*'],
sources: [bundle],
});

Name: cdk-deployment
Compute:
Type: LAMBDA
RunMode: SUPERSEDED
SchemaVersion: "1.0"
Triggers:
- Type: PUSH
Branches:
- main
Actions:
BuildAndTestCDKApp:
Identifier: aws/github-actions-runner@v1
Compute:
Type: EC2
Inputs:
Sources:
- WorkflowSource
Variables:
- Name: AWS_REGION
Value: us-east-1
- Name: NODE_ENV
Value: sandbox
Outputs:
AutoDiscoverReports:
Enabled: true
ReportNamePrefix: rpt
IncludePaths:
- ./coverage/lcov.info
Configuration:
Steps:
- name: Flutter Build Web
uses: subosito/flutter-action@v2.8.0
with:
channel: stable
- name: Java Install
uses: actions/setup-java@v2
with:
distribution: zulu
java-version: "11"
- name: Setup Android SDK
uses: android-actions/setup-android@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm ci
- run: npm test
Environment:
Connections:
- Role: CodeCatalystWorkflowDevelopmentRole-Sandbox
Name: sandbox-role
Name: sandbox_account
DeploySandboxCDKApp:
DependsOn:
- BuildAndTestCDKApp
Actions:
DeployBase:
Identifier: aws/github-actions-runner@v1
Compute:
Type: EC2
Inputs:
Sources:
- WorkflowSource
Variables:
- Name: AWS_REGION
Value: us-east-1
- Name: NODE_ENV
Value: sandbox
Configuration:
Steps:
- name: Flutter Build Web
uses: subosito/flutter-action@v2.8.0
with:
channel: stable
- name: Java Install
uses: actions/setup-java@v2
with:
distribution: zulu
java-version: "11"
- name: Setup Android SDK
uses: android-actions/setup-android@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm ci
- run: npm run deploy
Environment:
Connections:
- Role: CodeCatalystWorkflowDevelopmentRole-Sandbox
Name: sandbox-role
Name: sandbox_account
IntegrationTestSandbox:
Identifier: aws/build@v1
Inputs:
Sources:
- WorkflowSource
Configuration:
Steps:
- Run: ls -al
Compute:
Type: Lambda
DependsOn:
- DeploySandboxCDKApp
DeployTestCDKApp:
DependsOn:
- IntegrationTestSandbox
Actions:
DeployBase:
Identifier: aws/github-actions-runner@v1
Compute:
Type: EC2
Inputs:
Sources:
- WorkflowSource
Variables:
- Name: AWS_REGION
Value: us-east-1
- Name: NODE_ENV
Value: test
Configuration:
Steps:
- name: Flutter Build Web
uses: subosito/flutter-action@v2.8.0
with:
channel: stable
- name: Java Install
uses: actions/setup-java@v2
with:
distribution: zulu
java-version: "11"
- name: Setup Android SDK
uses: android-actions/setup-android@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm ci
- run: npm run deploy
Environment:
Connections:
- Role: CodeCatalystWorkflowDevelopmentRole-TestRole
Name: test-role
Name: test_account
IntegrationTestTest:
Identifier: aws/build@v1
Inputs:
Sources:
- WorkflowSource
Configuration:
Steps:
- Run: ls -al
Compute:
Type: Lambda
DependsOn:
- DeployTestCDKApp
DeployProdCDKApp:
DependsOn:
- IntegrationTestTest
Actions:
DeployBase:
Identifier: aws/github-actions-runner@v1
Compute:
Type: EC2
Inputs:
Sources:
- WorkflowSource
Variables:
- Name: AWS_REGION
Value: us-east-1
- Name: NODE_ENV
Value: prod
Configuration:
Steps:
- name: Flutter Build Web
uses: subosito/flutter-action@v2.8.0
with:
channel: stable
- name: Java Install
uses: actions/setup-java@v2
with:
distribution: zulu
java-version: "11"
- name: Setup Android SDK
uses: android-actions/setup-android@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm ci
- run: npm run deploy
Environment:
Connections:
- Role: CodeCatalystWorkflowDevelopmentRole-ProductionRole
Name: role-production
Name: production_account
IntegrationTestProd:
Identifier: aws/build@v1
Inputs:
Sources:
- WorkflowSource
Configuration:
Steps:
- Run: ls -al
Compute:
Type: Lambda
DependsOn:
- DeployProdCDKApp