How to run a different build command for staging environment when publishing a react amplify application

Question

I have an amplify react application with two environments so far: prod and staging.

Then I have my .env.staging and .env.production files with different values for an API URL.

Therefore, in my package.json I have the following scripts ready for the deployment:

"build":           "react-scripts build",
"build:staging":   "env-cmd -f .env.staging react-scripts build",

Now the problem comes as I don't know how to make amplify publish command to run one or the other depending on the environment.

No matter which amplify env checkout I choose, the configuration used on the 'publish' command is shared in the 'project-config.json', and it looks like the following:

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

Is there any way to achieve what I'm looking for?

Thanks for your help in advance.

Answer 1

I understand this question was asked almost 1 year ago now, but i encountered this same problem this morning and would like to offer my solution to the problem.

Currently (asof 04/03/22) there is still no official solution to the problem and as such, you will be required to edit your build script to build your content based on the environment dynamically.

The way we have currently implemented this is by creating a build JS script in our root (named build-env.script.js) containing the following code:

#! /usr/bin/env node
(function() {
  // bring in child_process to use spawn command
  const cp = require('child_process');
  // bring in the amplify local-env-info.json to see current environment
  const buildInfo = require('./amplify/.config/local-env-info.json');
  // spawn the build command based on the env name:
  // npm run build-production on prod or npm run build-staging on staging
  const cmd = cp.spawn(`npm run build-${buildInfo.envName}`, { shell: true });
  // echo output of the commands to the console
  cmd.on('spawn', () => console.log('Running build command for:', buildInfo.envName));
  cmd.stdout.on('data', (d) => console.log(d.toString()));
  cmd.stderr.on('data', (d) => console.log(d.toString()));
  cmd.on('exit', () => console.log('Build Completed'));
})();

As a sidenote, the JSON file in question is created by amplify and therefore can be determined as a source of truth when it comes to looking for the current environment name, my file for example looks like this:

{
  "projectPath": "path/to/project/frontent",
  "defaultEditor": "vscode",
  "envName": "production"
}

Whilst my package.json looks like this:

{
  ...
  "scripts": {
    ...
    "build": "node ./build-env.script.js",
    "build-staging": "ng build --configuration staging",
    "build-production": "ng build --configuration production"
  }
}

However you will need to modify the env names and scripts accordingly (as our project is an angular project.