Amplify-console: Multiple frontends: What is the workflow for pulling programmatically

[dyangelo-grullon]

Which Category is your question related to?
amplify pull and https://aws-amplify.github.io/docs/cli-toolchain/quickstart#multiple-frontends

Amplify CLI Version
4.12.0

What AWS Services are you utilizing?

Amplify, Cognito, Lambda, AppSync and more.
https://aws-amplify.github.io/docs/cli-toolchain/quickstart#multiple-frontends

I have three environments maintained in a separate repository. That repository only contains my back-end. When pulling my back-end into another front-end project, I discovered several limiting factors:

1. I cannot create a separate back-end via amplify init (to effectively only use what I need from the externalized back-end), because any future amplify pull will only attempt to pull from this new back-end, and not the externalized back-end. This seems to remove amplify as a hosting option, because this front-end cannot be turned into an amplify project. I have to choose between turning this project into an amplify project and the ability to pull a fresh externalized back-end config into this project. No big deal, I can just do the hosting myself, right?
2. aws-exports.js isn't meant to be committed, and every amplify pull, with a differing target environment, resets the file with the environment specific configuration. This means that I have to program a build step that detects the environment and pulls the correct environment. Not the worst situation, but 3 makes it difficult.
3. There isn't any documentation regarding pulling and generating the aws-exports.js programmatically. The documentation given here expects users to answer questions via the CLI. I'm not guaranteed that the CLI flow will remain the same. If I'd like to pull from an environment, during build, I'd like to know my build step won't break with an upgrade to the amplify CLI.

How can I checkout particular environments if this front-end project cannot be converted into an amplify project? Can I still use the amplify console, for hosting, when the back-end is externalized?

It would be nice if I could both externalize my back-end, and treat this front-end project as an amplify project.

If I have to do my own hosting, then some docs under the "multiple-frontends" section for pulling multiple environments programmatically (as opposed to answering questions via the cli) is needed. And I hope it works across major and minor version changes.

[dyangelo-grullon]

In summary:

The problematic assumptions are that amplify projects must have a distinct backend and only one backend; If the backend is externalized, then the project cannot be an amplify project.

Furthermore, if it is not an amplify project, then the user has to programmatically pull the environment-specific aws-exports.js at build time, but there is no robust path given to do this programmatically.

I framed the original post as a question, but I think this is more of a feature request at this point.
The multiple frontend scenario seems in need of a re-design and re-work.

[swaminator]

@kekkler can you please explain what you mean by 'externalized' backends?

[karrettgelley]

I have ran into similar issues recently. I have an Amplify React app with three backend environments: prod, test, and dev just like in the docs. This is great because I can connect the branches from the repo of my React frontend via the Amplify console. However, I have decided to create a React Native app for mobile devices, but I have not been able to connect the branches of this new repo to the backend environments mentioned previously. In other words, my setup looks like:

React-Master-Branch -> Amplify-Prod-Env
React-Dev-Branch -> Amplify-Test-Env
React-Feature-Branch -> Amplify-Dev-Env

and I wish to achieve:

React-Master-Branch && React-Native-Master-Branch -> Amplify-Prod-Env
React-Dev-Branch && React-Native-Dev-Branch -> Amplify-Test-Env
React-Feature-Branch && React-Native-Test-Branch -> Amplify-Dev-Env

Now, the Amplify CLI permits me to connect a React Native branch to one and only one of the backend environments. Thus I am unable to enjoy the same workflow for multiple environments as outlined in the docs. I cannot make an Amplify sandbox environment for my React Native app, nor can I utilize the smooth CI/CD flow for my React Native app. In fact, as far as the Amplify console is concerned, my React Native app doesn't exist.

As far as I can tell, the docs aren't consistent with the the behavior of the CLI.

[dyangelo-grullon]

@swaminator in a separate repo; not in the same amplify project.

[dylan-westbury]

An issue i am facing, we want to deploy one of the additional frontends via amplify console, but we can't generate the aws-exports file.

This is out amplify.yml file, how can we generate aws-exports.js file for the additional frontend?

version: 1.0
backend:
  phases:
    build:
      commands:
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build:$BUILD_ENV
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

[swaminator]

@dyangelo-grullon you can use pull headess as stated here: https://aws-amplify.github.io/docs/cli-toolchain/usage#headless-mode

This issue has now become something a little different from the original ask. @dylan-westbury do you think you could create a separate ticket as it is not related to this item?

[smakinson]

It looks like this issue was originally in amplify-cli, which seems correct based on the initial request. I am trying to determine if the separate repo for shared Amplify managed aws resources is a good path. I'm now trying to add the read only (_Do you plan on modifying this backend?: n_) setup to a project repo and it looks like that generates the aws-exports.js file and then tells me to run amplify pull any time I need to sync changes. I was also surprised to see it asks the set of questions every time amplify pull is run again.

I see the suggestion above for headless mode, so I am going to look at that a bit to run for a prod build vs a dev build, etc. and get the correct config. I'm also wondering if it may be easier to mange manually with Amplify.configure and env vars. 🤔

Since this is a bit over a month later I'd be interested to hear if anyone determined a best workflow.

I also tend to agree with point number one, it would be nice to mix things from a separate repo with various other amplify managed projects. I suppose the question is if the cli should do it or if it should be manual.

[j1mr10rd4n]

I've been trying to set up a second frontend project on an existing amplify front & backend project as well. I got the same negative result as @smakinson when running amplify pull in the new frontend project. I don't think the Multiple frontends page has enough information at the moment. I only found the amplify pull sample script by reading this issue.

However, when I followed the advice from the Multiple frontends page concerning the single source of truth about the backend configuration, and answered No to the o you plan on modifying this backend? prompt (I omitted the --yes option from the sample script) it printed a success message:

Added backend environment config object to your project.
Run 'amplify pull' to sync upstream changes.

but no changes were made to my project, the amplify folder was not created.

The only way I could get it to work was to reinstate the --yes option This pulls the whole backend config down into the 2nd project. This means that we'll need to be careful about where changes to the backend config are made. An unexpected(?) side effect is that amplify codegen works and I'm able to use the generated graphql classes in the 2nd project.

[fletchmen]

Was able to do the codegen with this approach, still trying to figure out how to add the Auth but this generated my graphql classes in the 2cnd project...

https://dev.to/applification/multiple-frontends-with-amplify-console-3nnj