seperating frontend and backend is not working properly

[spring-bconnect]

### I am trying to setup seperate backend and frontend. I want to use Next js for website and flutter for android/ios from single backend amplify. When I try to follow the instructions it gives following error:

E/flutter ( 6589): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: ConfigurationError { E/flutter ( 6589): "message": "No Cognito plugin config available" E/flutter ( 6589): } E/flutter ( 6589): package:amplify_auth_cognito_dart/src/state/machines/configuration_state_machine.dart 69:7 ConfigurationStateMachine.onConfigure E/flutter ( 6589): package:amplify_auth_cognito_dart/src/state/machines/configuration_state_machine.dart 50:15 ConfigurationStateMachine.resolve E/flutter ( 6589): package:amplify_core/src/state_machine/state_machine.dart 262:59 StateMachine._listenForEvents..

Is there any way to achieve that but not able to do because of incomplete documentation. Can anyone please provide any solutions to achieve that.

[khatruong2009]

Hi @spring-bconnect, are you using the amplify-js library for the web portion of your application?

[spring-bconnect]

No. I have created a monorepo app and its working fine in local now but when I try to deploy it, its failing. I am using yarn workspace in where one app is nextjs for web and other is flutter for mobile apps. As per documentation, structure for my app is:

Parent app Apps

• app1(nextjs)
• app2(flutter) Packages -shared -amplify -auth -data

Error displaying:

@amplify/backend is not found Path to the amplify/data/resource is not recognized.

Can you provide a sample example for monorepo setup and deployment. Documentation is incomplete.

Main issue: path to resource is not found in front end apps

On Tue, 13 Aug 2024 at 1:04 AM, Kha Truong @.***> wrote:

Hi @spring-bconnect https://github.com/spring-bconnect, are you using the amplify-js library for the web portion of your application?

— Reply to this email directly, view it on GitHub https://github.com/aws-amplify/amplify-flutter/issues/5272#issuecomment-2284765444, or unsubscribe https://github.com/notifications/unsubscribe-auth/BFF6Z6FXINI7FOIDMEF4AGDZREE4DAVCNFSM6AAAAABMMZSTKSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUG43DKNBUGQ . You are receiving this because you were mentioned.Message ID: @.***>

[spring-bconnect]

[spring-bconnect]

How to generate this amplify folder if its separate frontend and backend?? As per the documentation given :

Only amplify_outputs.json is created?

Can you provide next steps so that build does not fail??

[khatruong2009]

Hi @spring-bconnect, I see that you've run the first command to get the amplify_outputs.json file. Can you also run npx ampx generate outputs --app-id <your-backend-amplify-app-id> --branch main --format dart --out-dir lib command so that you get the amplify_outputs.dart file as well for the dart side as well?

[spring-bconnect]

I did the same for dart amplify outputs generation. Getting the same when I try to deploy next js app

[spring-bconnect]

Amplify folder is outside the frontend apps in monorepo structure.. in shared backend.. As per error it constructs:

Amplify Backend not found

What setup is required so that it points to amplify backend generated and hosted separately on server.

npx ampx generate outputs --branch main --app-id BACKEND_APP_ID

Above command only generates amplify_outputs.json file. It does not create amplify folder in root directory.

Is there any configuration missing or its a bug??

[salihgueler]

Hello @spring-bconnect, thanks for reaching out. With Monorepo support, you should not need any amplify folder as it is in a separate place. So that part should not be a problem.

For your application to understand what kind of configuration you have, it should generate amplify_outputs.json for Next.js application and amplify_outputs.dart for the Flutter application.

For generating the amplify_outputs.dart, you can run the following command in the amplify.yaml file that you can find in the build settings.

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID --format dart --out-dir lib

Also, you did the setup as monorepo, right? So the amplify folder is known by the console.