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

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

Answer 3

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 4

After using "amplify init" the system asked where to put the files, and specified src as the folder to put it into, and low and behold that's where it placed my aws-export.js. So look around in your folders since it may be placed in another folder and not in the main directory.

Answer 5

For anyone that might be running into the Cannot find file './aws-exports' in './src'. error while building the frontend, none of the suggestions I could find (here or elsewhere) led me to an answer.

As stated in the Amplify docs, the aws-exports.js file is generated after a successful build of the backend. My Amplify backend appeared as if it was building successfully so it should have been generating the aws-exports.js (but it was not).

I closely reviewed my build config in Amplify (Amplify > App Settings > Build settings) and my backend settings appeared to match other examples I had seen. Here is how it is configured:

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

The amplifyPush --simple command is important as it instructs Amplify to build the backend. I then started to review other parts of the backend with the assumption that it appeared like it was building successfully but might be failing. I was led to this because there was not a ton of output when viewing the "backend" phase of the deploy (see below):

                                 # Starting phase: build
2022-01-10T13:54:13.394Z [INFO]: # Completed phase: build

This seemed suspiciously devoid of more output. I focused on my schema, in particular, a custom function that I had added and connected to a mutation, which looked like the following:

type Mutation {
  generateToken(identity: String!): GenerateTokenResponse
    @function(name: "twilio-${env}")
}

type GenerateTokenResponse {
  token: String
  identity: String
}

After removing, I ran an amplify push --allow-destructive-graphql-schema-updates which succeeded (--allow-destructive-graphql-schema-updates is required because Amplify thinks some data/tables might be deleted in modifying the schema). The backend deployed successfully.

I then did a full deploy of the frontend and backend which ended up successfully deploy. To compare, I checked on the output of the "backend" build phase and found some more output this time:

                                 # Starting phase: build
[INFO]: [0mAmplify AppID found: XXXXXXXXXXXXXX. Amplify App name is: myApp[0m
[INFO]: [0mBackend environment dev found in Amplify Console app: myApp[0m
WARNING]: - Fetching updates to backend environment: dev from the cloud.
[WARNING]: - Building resource auth/userPoolGroups
[WARNING]: - Building resource auth/myAppAuth
[WARNING]: - Building resource api/myAppApi
[WARNING]: ? Successfully pulled backend environment dev from the cloud.
[INFO]: 
[INFO]: # Completed phase: build

I have not determined what was wrong with these lines from schema.graphql but I must have configured something incorrectly. Admittedly, I am not sure if I finished writing that custom function so perhaps that is why. However, no errors were generated that led me to this discovery quickly.

Note: Amplify app w/React frontend deployed using Amplify CI/CD, hosted on Cloudfront+S3 (via Amplify)

Answer 6

$amplify init creates aws-exports.js, which locates in the place you put "Distribution Directory Path" within the init command. This is an example in next.js.

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project sampleapp
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: .next  // <- here!!
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

Answer 7

For the people building in Vue (specifically Vue3 Quasar):

import { boot } from "quasar/wrappers";
import { Amplify } from "aws-amplify";
import awsconfig from "../aws-exports";

export default boot(({ app }) => {
    Amplify.configure(awsconfig);
    app.use(Amplify);
});