Missing aws-exports.js always when building AWS Amplify React app with Amplify integrations

Question

my React app uses GraphQL API, Storage, Auth, Functions, Hosting - all the fun stuff - so i must have an aws-exports.js file available. Amplify React Front end with Amplify Backend resources.

Repo basically setup as:

package.json
src/
   - aws-exports.js
   - app.js
   - ...etc

and doing an ls in each dir showed on builds that there was no aws-exports.js file generated.

With many different configs, i am met with:

[INFO]: # Executing command: yarn run build
[INFO]: yarn run v1.16.0
[INFO]: $ react-scripts build
[INFO]: Creating an optimized production build...
[INFO]: Failed to compile.
[INFO]: ./src/App.js
                                 Cannot find file './aws-exports' in './src'.
2020-04-30T00:52:34.883Z [WARNING]: error Command failed with exit code 1.

This is so when i have a checked in amplify.yml and also configuring the .yml in the web console.

I've tried amplify push; but as expected met with

An error occured during the push operation: Current environment cannot be determined
Use 'amplify init' in the root of your app directory to initialize your project with Amplify

Also trying: amplify pull; or Executing command: amplify pull --appId abc123abc123 --envName dev

 # Starting phase: preBuild
# Executing command: amplify pull
For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? (Y/n)
.[43D.[43C

Which just hangs and expects input. I dont think manually putting in creds like this is as all the way to go about this.

It seems as though amplify should handle this generation of aws-exports.js itself considering all the backend integrations. When ls different. There are a number of questions around on this that are quite current but with no real answer. Thanks for your time

Answer 1

My solution was to simply generate aws-exports.js via script before the "npm run build" step.

You simply store aws-exports.js contents in an environment variable called "secretfile", and then use it inside amplify.yml like this

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo $secretfile > ./src/aws-exports.js
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Reasons:

1. Committing aws-exports.js to the repo is of course a big no since it contains API keys and other secrets.
2. I did not want to kick off a backend build each time either. Building the backend is counter productive since it creates a new stack for backend for each build, which costs more money, slows things further, plus its error prone.

Thanks.

Answer 2

Backend resources need amplifyPush run to generate the expected aws-exports.js file. A normal react+amplify backend project will need a build script looking like:

version: 0.1
env:
  variables:
      key: value
backend:
  phases:
    build:
      commands:
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

The amplifyPush script is a part of the amplify-console repo, specifically the .sh script is found https://github.com/aws-amplify/amplify-console/blob/master/scripts/amplifyPush.sh

See here for more info on other things to run in your build script.

https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html#frontend-with-backend

Answer 3

For anyone who lands here, the Amplify console just released a way so that you can autogenerate the aws-exports file at build time without enabling fullstack CI/CD and checking it into your git repo: https://docs.aws.amazon.com/amplify/latest/userguide/amplify-config-autogeneration.html