Deploy Next.JS app on AWS using Amplify ("Invalid feature flag configuration" issue)

In the Previous Post, I built my backend using Amplify and then I created my webapp with Next.JS and connected them. I committed and pushed the code to my repository on GitHub and I want to configure my pipeline on Amplify to deploy my app in the full-stack way.

Let's jump to the Amplify Console, I chose my blog app that I have there. There are 2 sections:

• Backend Environment: My API and data modeling that I did in the previous post
• Host Environment: This is where I want to configure to deploy my webapp on AWS and also setup my pipeline so every time I push to my master branch, this automatically deploys the whole app. (FE and BE)

In the Host Environments tab, all the supported version control platforms are there.

I'm setting up with GitHub since my repository is there. After choosing GitHub, it will ask for the repository and you might need to give access to Amplify on your GitHub to get your repository. Then I choose the branch I want to connect to and I DO NOT check monorepo option. The next step is important since I need to connect this app to my backend. I can do it by finding my backend app in the list and pointing to the right environment.

Very Important Note

• make sure you uncheck `Full-stack CI/CD allows you to continuously deploy frontend and backend changes on every code commit.
• In the "Advanced Settings", I remove Amplify CLI from live package updates. Later I explain the issue that I had before the deployment with the different versions of Amplify CLI.

As you can see, Amplify automatically figures out that your app is Next.JS and make your build file. this is fantastic! Click next and "save and deploy".

Identified Issue

The deployment fails in the build step with the error:

Invalid feature flag configuration
These feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI

This is because the version of the CLI on your local computer is not equal to the CLI version on the CI. We can fix that by making sure we have the same version on the CI. I have CLI version 9.2.1 on my local and I make CI have the same version by modifying the build file. On the left menu clicks on Build settings and Edit the build file by adding

backend:
  phases:
    preBuild:
      commands:
        - npm i -g @aws-amplify/cli@9.2.1
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple

Go back to the build history page and click re-deploy.

It should deploy successfully now! What I have done was, unchecking the full-stack CI/CD option on the Hosting Environment but then I deploy the backend in the build process, so in reality, I do deploy full-stack app every time we push to the Git.

That's it, from now on, every time I push a new code to my master branch, Amplify will deploy both the back and front end automatically. If you look at your CloudFormation stacks on the AWS console, you'll find multiple stacks related to the app each one provision some resources either for API or Hosting.