Specifying the configuration to be used when running an Aurelia application

Question

I have created a default Aurelia Typescript application with the au new command from the Aurelia CLI.

At the root of the project, one finds a config directory containing environment.json and environment.production.json files. Mine look like this:

environment.json

{
  "debug": true,
  "testing": true,
  "stringVal": "Hello World"
}

environment.production.json

{
  "debug": false,
  "testing": false,
  "stringVal": "Hello Production"
}

I would like to be able to use different configurations on different runs when running from the command line. My current app.ts and app.html are as follows:

app.ts

import environment from '../config/environment.json';
export class App {
  public message = environment.stringVal;
}

app.html

<template>
  <h1>${message}</h1>
</template>

For good measure, my main.ts file is as follows:

import {Aurelia} from 'aurelia-framework';
import environment from '../config/environment.json';
import {PLATFORM} from 'aurelia-pal';

export function configure(aurelia: Aurelia): void {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

1. Without hard-coding an import of the production file, what code changes need to be made for stringVal to read from environment.production.json (or environment.staging.json, etc.)?
2. What flags need to be passed in to au run (or npm start ) from the command line to specify which configuration to use?

Answer 1

Based on your code I believe that the question to #1 should be resolved already with the correct environment parameter passed to your run function. One suggestion I have is to make an environment.ts file that handles this for you. For example.

environment.ts

import env from '../config/environment.json';

function stringVal() {
    return env.stringVal;
}

export { stringVal }

Then in your app.ts you can do

import { stringVal } from './environment';
export class App {
  public message = stringVal();
}

For the answer to #2 it has been mentioned in the comments to your question but I'll share here as well. --env is what you're looking for Here are the scripts I use for my Au1 Project

    "scripts": {
        "analyze": "webpack --env production --analyze",
        "build": "webpack --env production",
        "build:dev": "webpack",
        "build:staging": "webpack --env staging",
        "start": "webpack-dev-server"
    },

I've got an environment.staging.json , environment.json , environment.production.json in my config folder and they all work as expected.

Hope this helps! Good luck