AWS Amplify Build Settings

Question

Using Amplify I'm having difficulty deploying a React application which I believe is due to the build settings. When trying to deploy the default build settings provided are shown below:

I know this is incorrect and the error I find in the build logs is:

2020-05-14T00:02:22.327Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src568504829/src/chatterfield/

The deploy is successful except when I launch the application I receive an ERR_TOO_MANY_REDIRECTS. After I changed the baseDirectory in build settings to /client/public to point to index.html. The app appears to launch without the REDIRECT error, but nothing loads. I'm guessing this is because I am not running an npm run build command, or not loading a prebuild command. Any help would be greatly appreciated. Thank you Here is the repo this app is linked to: https://github.com/travelerr/chatterfield

Shutz

why aren't you using npm/yarn build? – Audi

Answer 1

If your react folder name is "mycoolproject", your yml will need to cd into that directory. Then run the build command. baseDirectory should be where your your final build resides.

version: 0.1
frontend:
  phases:
    preBuild:
        commands:
          - cd mycoolproject
          - npm ci
    build:
        commands:
          - npm run build
  artifacts:
    baseDirectory: ./mycoolproject/build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Also, your amplify should point to a build directory... mycoolproject/amplify/config/project-config.json

{
  "providers": [
    "awscloudformation"
  ],
  "projectName": "mycoolproject",
  "version": "3.1",
  "frontend": "javascript",
  "javascript": {
    "framework": "react",
    "config": {
      "SourceDir": "src",
      "DistributionDir": "build",
      "BuildCommand": "npm run-script build",
      "StartCommand": "npm run-script start"
    }
  }
}

Subset

any idea for the needed setting for flutter web app? – Provost

Answer 2

Change baseDirectory:/ to baseDirectory:build . It worked for me.

Annual

Where am i mean't to place this file? – Perquisite

@ÉricaSantos place this setting in your project root on amplify.yml or modify it through the AWS Amplify UI – Mariannemariano

Answer 3

For anyone who finds this and put their app in a folder called frontend (or anything else substitute frontend for the path to your app.

version: 0.1
frontend:
  phases:
    preBuild:
        commands:
          - cd frontend
          - npm ci
    build:
        commands:
          - npm run build
  artifacts:
    baseDirectory: ./frontend/build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Elwira

Is this yaml file in the root then in the same folder with something like a frontend and server folders? – Optics

any idea for the needed setting for flutter web app? – Provost

Answer 4

If you typically build monorepos like myself, don't miss the 'monorepo' checkbox under the branch when you're creating a new Amplify connection to github. Otherwise you won't be able to setup everything properly.

Optics