Amplify: No Way To Set App Framework From CDK, and not set automatically.

[matf3en]

Describe the bug

I am trying to deploy a NextJs 13 app to amplify hosting using the CDK.

My App is created, and my Code Commit repo/branches linked properly.

However, the 'Framework' setting (Amplify 'general' tab) is totally blank. This means that the next js files are not treated properly on deployment, which means that the website displays an 'Access Denied' xml error.

I further note that the 'Production Branch URL' setting is empty and that platform shows 'Web' not 'Web Compute'

I have created an Amplify app manually via the console, and confirmed that the 'Framework' section is properly filled with 'Next.js - SSR'

Expected Behavior

Amplify app 'Framework' setting should be populated with 'Next.js - SSR' on cdk deploy

AWS documentation suggests no problems :

https://aws.amazon.com/blogs/mobile/deploy-a-nextjs-13-application-to-amplify-with-the-aws-cdk/

Current Behavior

Amplify app 'Framework' setting is populated with '' on cdk deploy

Reproduction Steps

Create a next js app and commit to a repo.

Create a fresh CDK install

Create a stack housing a repo resource pointing to your next js app.

Create a stack housing an amplify app using your repo as a code source.

deploy both stacks.

Observe the missing 'Framework' setting on the Amplify app in the console.

Possible Solution

No response

Additional Information/Context

No response

CDK CLI Version

2.68.0

Framework Version

No response

Node.js Version

16.14.2

OS

windows powershell

Language

Typescript

Language Version

No response

Other information

No response

[mtliendo]

Hey @matf3en! Thanks for mentioning my blog post so I can check what's going on.

In your example, it looks like you have web instead of WEB_COMPUTE. To add that, and to add the production branch, it looks like you're missing the bottom lines from the repo I link to in the post

Let me know if that helps, otherwise, happy to keep troubleshooting.

[pahud]

Thank you @mtliendo !!

[matf3en]

Hi @mtliendo. Thanks for getting back to me so fast.

Thanks for the link to the repo - I didn't see that - I haven't tried it yet, but it looks like that'll solve my issue.

Any reason why these critical lines aren't actually in your post?

[matf3en]

@pahud Is there a way to improve the cdk documentation to reflect this please?

[matf3en]

@mtliendo Spoke too soon - I've torn down my repos / amplify apps via cdk and then recreated using the lines of code from your repo namely :

adminAmplifyApp.addBranch(context.branchName,{stage: 'PRODUCTION'}); //Drop down to L1 to allow new NextJS architecture const cfnAmplifyApp = adminAmplifyApp.node.defaultChild as CfnApp; cfnAmplifyApp.platform = 'WEB_COMPUTE';

Now the console does show 'Web compute' instead of 'Web', but still doesn't show a production branch, or a Framework 👍

[mtliendo]

Oh interesting. Hmm, let me investigate and see if I can reproduce.

[mtliendo]

@matf3en Is this with GitHub? Looking at the Source repository in your screenshot, does that say code commit?

[matf3en]

@mtliendo Yes - that's correct - Code Commit.

[pahud]

@matf3en Sure! If there's any doc addition you believe useful, feel free to submit a PR for that so we can help the community.

I am converting this to discussion as this is not relevant to a CDK bug but the guidance. If you believe we should add some doc update, feel free to create another new issue/PR to address that. Thank you.

[matf3en]

@pahud Haven't you closed this as a bug rather prematurely? How do you know whether this is a bug or not? @mtliendo Has outlined some code he used to solve this problem with GitHub. The same code doesn't seem to work with CodeCommit.

I'm still without a solution, and although it may still (probably) be to do with my stupidity, isn't it too soon for you to 'rule' that this isn't a bug?

[matf3en]

@mtliendo Did you get anywhere with this please?

[mtliendo]

Hey @matf3en! Thanks for your patience while I looked into this. After some deep diving, I found this in the CloudFormation docs:

If you don't mind, can you switch from using AccessToken to Oauth Token to see if that fixes it?

[matf3en]

Hi @mtliendo.

Thanks so much for looking into this.

I'm not currently providing an 'AccessToken' (explicitly) and don't know where I'd get an 0AuthToken to provide. I can see that in the cdk documentation, even if I start defining a 'sourceCodeProviderConfig' both the 'accessToken' and 'Oauthtoken' properties are optional.

Isn't this designed for 3rd party, non-cdk supported source providers, not for the supported types of github and codecommit?

[matf3en]

Actually looking further - the CodeCommitSourceCodeProviderProps class doesn't have provision for either the AccessToken or OAuthToken attributes.

https://docs.aws.amazon.com/cdk/api/v2/docs/@aws-cdk_aws-amplify-alpha.CodeCommitSourceCodeProviderProps.html

[pahud]

Thank you for the investigation @matf3en @mtliendo !

We are not closing this. We just need more discussion before we can tell if it's relevant to a CDK bug and figure out how to fix that with a pull request. If the CDK app can deploy successfully yet the console doesn't reflect correctly, we tend to consider this as a general guidance request rather than a CDK bug. We appreciate all discussion and feedback here and feel free to tag me anytime if we conclude this is a CDK bug so we can fix it with a pull request. Thank you for all the feedback.

[matf3en]

But how does a failure for critical values to be displayed/accepted in/into the console constitute a successful deploy? Surely the CDK as a wrapper for CF should prevent 'empty values', not force users to dive into CF documentation? That's exactly the point of using the CDK right? Isn't a bug, at a basic level, something that doesn't work the way it's supposed to work?

If so, are you telling me that the CDK is supposed to pass/cause empty values in an Amplify app?

As you can tell, struggling a little with the logic of your words.

[malikalimoekhamedov]

Experiencing the same issues. Unable to specify the framework and am getting an "AccessDenied" upon trying to access my page using a custom domain.

While creating the Amplify app in CDK, I use customRules: [CustomRule.SINGLE_PAGE_APPLICATION_REDIRECT].

If I use

customRules: [
        {
          source: '/<*>',
          target: '	/index.html',
          status: RedirectStatus.NOT_FOUND_REWRITE,
        },
      ],

like in @mtliendo's GitHub repo, I'm getting a 4O4 error instead.

[matf3en]

Whilst this ticket/problem/bug(?) remains unresolved, it is still possible to deploy a fully static app to Amplify hosting. It's only server side rendering that is currently (seemingly) not possible via CDK on CodeCommit.

[matf3en]

@pahud You said you needed more discussion to work out whether this was a bug or not. How much more exactly please? This has been going on for two weeks with no sign of even experts knowing how to solve it? If I was doing something stupid and obvious, no-one's been able to tell me what that is... surely your bug people need to look at this rather than just continuing to hope that someone spots a user mistake?

[malikalimoekhamedov]

Maybe this could help you, @pahud. Here's how I deploy my project and the framework, redirections, Web compute and all the necessary configurations are being picked up correctly. It wasn't a pleasure cruise, though, I'm not going to lie. I use AWS CodeCommit for my repository.

import {
  App,
  CodeCommitSourceCodeProvider,
  BasicAuth,
  RedirectStatus,
} from '@aws-cdk/aws-amplify-alpha';
import { Repository } from 'aws-cdk-lib/aws-codecommit';
import { BuildSpec } from 'aws-cdk-lib/aws-codebuild';
import { Construct } from 'constructs';
import { CfnApp, CfnBranch } from 'aws-cdk-lib/aws-amplify';

/**
 * @author Malik Alimoekhamedov
 * @category Constructs
 */
class Website extends Construct {
  constructor(
    scope: Construct,
    id: string,
    params: { repository: Repository; domain: string }
  ) {
    super(scope, id);

    const { repository, domain } = params;

    const app = new App(this, 'App', {
      appName: 'Personal Website',
      description: 'Personal Website. Next.js, Tailwind CSS.',
      sourceCodeProvider: new CodeCommitSourceCodeProvider({ repository }),
      autoBranchCreation:
        process.env.ENV === 'dev'
          ? {
              patterns: ['feature/*', 'test/*'],
            }
          : undefined,
      autoBranchDeletion: true,
      customRules: [
        {
          source: '/<*>',
          target: '/index.html',
          status: RedirectStatus.NOT_FOUND_REWRITE,
        },
      ],
      buildSpec: BuildSpec.fromObjectToYaml({
        version: 1,
        frontend: {
          phases: {
            preBuild: {
              commands: ['yarn install'],
            },
            build: {
              commands: ['yarn run build'],
            },
          },
          artifacts: {
            baseDirectory: '.next',
            files: ['**/*'],
          },
          cache: {
            paths: ['node_modules/**/*'],
          },
        },
      }),
    });

    const cfnApp = app.node.defaultChild as CfnApp;
    cfnApp.platform = 'WEB_COMPUTE';

    const domainName = app.addDomain(domain, {
      enableAutoSubdomain: process.env.ENV === 'dev' ? true : false,
      domainName: domain,
    });

    if (process.env.ENV === 'prd') {
      const main = app.addBranch('main', {
        description: 'Stable production branch.',
        branchName: 'main',
        stage: 'PRODUCTION',
      });
      main.addEnvironment('ENV', 'prd');
      main.addEnvironment('SITE_URL', `https://${domain}`);
      const cfnBranch = main.node.defaultChild as CfnBranch;
      cfnBranch.framework = 'Next.js - SSR';
      domainName.mapRoot(main);
      domainName.mapSubDomain(main, 'www');
    } else if (process.env.ENV === 'dev') {
      const develop = app.addBranch('develop', {
        description: '"Work in Progress" development branch.',
        basicAuth: BasicAuth.fromGeneratedPassword('SOME_HIDDEN_ARBITRARY_USERNAME'),
        branchName: 'develop',
        stage: 'PRODUCTION',
      });
      develop.addEnvironment('ENV', 'dev');
      develop.addEnvironment('SITE_URL', `https://${domain}`);
      const cfnBranch = develop.node.defaultChild as CfnBranch;
      cfnBranch.framework = 'Next.js - SSR';
      domainName.mapRoot(develop);
    }
  }
}

export { Website };