aws-amplify-alpha : Support setting framework for App

[josh-roboto]

Describe the bug

CDK does not deploy a Next JS SSR app correctly. The field framework in App settings is not populated.

Expected Behavior

I expect the Framework to be populated correctly. This is done correctly if the app is created manually via the web console:

Current Behavior

Framework is empty as per the screenshot above.

Reproduction Steps

1. Create a NextJS typescript app npx create-next-app@latest (be sure NOT to use app directory)
2. Place an amplify.yml file in the root directory with the correct build settings.
3. Deploy the app with CDK. Here is my code snippet:

const amplifyApp = new amplify.App(this, "roboto-frontend-poc", {
      sourceCodeProvider: new amplify.GitHubSourceCodeProvider({
        owner: "roboto-ai",
        repository: "roboto-frontend-poc",
        oauthToken: SecretValue.unsafePlainText(
          "token for testing here"
        ), 
      }),
    });

amplifyApp.addBranch("main")

4. Run 'cdk deploy'. Observe that 'Framework' in app settings is empty.
5. Also: Run a build manually in the console to build the app. Then, when attempting to navigate to the app url, I get an "Access Denied" error and some XML output like this:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>K20RZV1MZAKZMA7C</RequestId>
<HostId>T83anmQcbI2t9iBOCKiY/k6QNCXvBc0umG/CjMMOvfWyx3Fvwn0Yxr6cLf2JI0cbMHg/7V7wphw=</HostId>
</Error>

Possible Solution

The 'Framework' field should be populated correctly when the app deploys. The framework value is auto detected when configuring manually. Let's do the same with CDK.

Additional Information/Context

No response

CDK CLI Version

2.79.1

Framework Version

2.76.0

Node.js Version

18

OS

Mac OSX Ventura 13.3.1

Language

Typescript

Language Version

No response

Other information

No response

[peterwoodworth]

We don't support this yet. The property is available in CloudFormation, so it's adjustable already with escape hatches.

Would need to add it here at the least

aws-cdk/packages/@aws-cdk/aws-amplify-alpha/lib/app.ts

Lines 224 to 238 in bbdb16a

	const app = new CfnApp(this, 'Resource', {
	accessToken: sourceCodeProviderOptions?.accessToken?.unsafeUnwrap(), // Safe usage
	autoBranchCreationConfig: props.autoBranchCreation && {
	autoBranchCreationPatterns: props.autoBranchCreation.patterns,
	basicAuthConfig: props.autoBranchCreation.basicAuth
	? props.autoBranchCreation.basicAuth.bind(this, 'BranchBasicAuth')
	: { enableBasicAuth: false },
	buildSpec: props.autoBranchCreation.buildSpec && props.autoBranchCreation.buildSpec.toBuildSpec(),
	enableAutoBranchCreation: true,
	enableAutoBuild: props.autoBranchCreation.autoBuild ?? true,
	environmentVariables: Lazy.any({ produce: () => renderEnvironmentVariables(this.autoBranchEnvironmentVariables ) }, { omitEmptyArray: true }), // eslint-disable-line max-len
	enablePullRequestPreview: props.autoBranchCreation.pullRequestPreview ?? true,
	pullRequestEnvironmentName: props.autoBranchCreation.pullRequestEnvironmentName,
	stage: props.autoBranchCreation.stage,
	},

The framework value is auto detected when configuring manually.

Is there any documentation that explains how this works, or how you should configure this setting?

[josh-roboto]

There might be something in the amplify CLI documentation about how to configure this, I've seen a few other similar issues where folks suggested setting this property via the cli, but that didn't work for me either.

I'm mainly just following the guide here: https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/ . I don't see anything about how to configure this setting. As far as I know it should be done automatically. It is not editable via the Web GUI either, although I would prefer to just set this via some sort of CDK input prop.

[peterwoodworth]

Yeah I cannot find any information about this, the API reference doesn't explain how it should be set, and I couldn't find anything in the developer guide. You're right that doing this through the console is completely automatic, there's no way to even edit it.

although I would prefer to just set this via some sort of CDK input prop

You can do something like this:

const app = new amplify.App(...);
const cfnApp = app.node.defaultChild as cfnAmplify.CfnApp; // since amplify L2s are alpha, need a separate import for the L1s
cfnApp.addPropertyOverride('AutoBranchCreationConfig.Framework', 'Next.js - SSR');

[peterwoodworth]

This is being actively worked on actually #23325

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.