Environment.json vs environment.ts

I have just installed latest aurelia-cli 1.1.0 and the environment files (dev.js, prod.js) are no longer in aurelia_project folder but in config folder and they are .json files rather than .ts. Is this inentional? From which version, I cannot find any mention of this in release notes. Thank you!

1 Like

Yes, v1.1 refactored webpack setup. Please upgrade to latest v1.1.1 for better compatibility with old commands.

If you look at run and build task files, they are merely alias to npm start and npm run build. Basically, webpack runs directly by webpack without aurelia-cli magic (or should I say trouble).

The package.json listed those scripts.

The env files are now handled by a webpack plugin app-settings-loader by @Sayan751, instead of handled by aurelia-cli gulp task previously.

We will update doc for this change. You can still use au run, but you can directly use npm start.

1 Like

correct. and the new way to import environment is

import * as environment from '../config/environment.json';

Thank you!

1 Like

Also trying to update my code with this refactoring…

I am used to create more environments than just the old “dev.ts” and “prod.ts”. For exemple I used to have “stage.ts” file with values fitting our staging environment. Now with the new /config/environment.json structure I haven’t found how to start the application with staging values.

What I’ve tried is to create a file called /config/environment.staging.json and then run the app with

npm start --env staging

But it didn’t work :frowning:

What’s the correct way to do this ?

1 Like

The webpack setup has changed. We need to bring back customisable new env file. But right now, you need to update webpack.config.js to make that work.

The old au run --env prod still works because we had some code for the backward compatibility in aurelia_project/tasks/run.

But by default the webpack setup only checks production env, you can update two lines in webpack.config.js to support environment.staging.json.

module.exports = ({ production, staging } = {}, {extractCss ...

env files are handled by a webpack plugin now.

      { test: /environment\.json$/i, use: [
        {loader: "app-settings-loader", options: {env: production ? 'production' : (staging ? 'staging' : 'development') }},

Update: forgot to mention

npx webpack-dev-server --env.staging
# or
npm start --  --env.staging`
1 Like

@Sayan751 we probably should use string version of env instead of the object version. We didn’t actually need the flexibility from the object version, the string version is easier for app-settings-loader to compose. But this is a semi breaking change if we switch the env syntax.



Sounds good to me. We should do that. Probably release this with the next major version.

1 Like