Create an Environment

note

This feature is only available on our Growth plans and above.

Environments are a powerful way to customize your Package builds and Deploy builds in order create different configurations based on the environment variables passed in at build time. When combined with the Automation feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.

Create an Environment#

To create an environment, simply go to the Automate > Environments tab in the sidebar of the Appflow Dashboard and click the New Environment button in the top right.

New Environment

You'll then see a form that allows you to create two types of environment variables:

Secrets - These values are encypted and only available at build time. Once you save a secret, you will be unable to edit or see it again.
Variables - These values are available at build time. Variables are visible and editable.

Let's create a new Environment called "Development". For this environment, create a variable named BUILD_ENV with the value development. This variable will allow us to customize the way our builds are configured.

New Environment Form

Add the Environment to an Automation#

To take full advantage of automating your development environment, you'll want to add the environment to the automation we created earlier.

In your Automations tab, click Edit from the Options icon on the right of your automation, select the environment from the Environment dropdown and click Save.

Add Environment to Automation

Example: Customizing the Build Script#

Getting the variable into your builds is one thing, but using them to customize the way your build is configured is just as important.

Here are examples of how you might customize your app using the BUILD_ENV variable we created above in order to connect to a different API url to fetch the data for your app when developing locally vs. in your development environment.

Ionic v4
Ionic v3

First, you can modify the build script in your package.json to either use the BUILD_ENV variable if it exists or to default it to local and then choose the configuration from the angular.json file that matches the value of BUILD_ENV (development in Appflow & local locally).

...
"scripts": {
  ...
  "build": "BUILD_ENV=${BUILD_ENV:-local} ng build --configuration=$BUILD_ENV"
  ...
}
...

Here's what your angular.json configurations section might look like.

...
"configurations": {
  ... // other environment configurations
  "development": {
    "fileReplacements": [ // replace default environment.ts file with the environment.development.ts file
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ],
  },
  "local": {}, // leave this blank to use the default src/environments/environment.ts file
  ...
}

Here's what the environment.ts and environment.development.ts files might look like.

src/environments/environments.development.ts

export const environment = {
  apiUrl: 'https://api.development.com'
};

src/environments/environments.ts

export const environment = {
  apiUrl: 'http://localhost:8000'
};

First you can modify the build script in your package.json to either use the BUILD_ENV variable if it exists or default to local.

...
"scripts": {
  ...
  "build": "BUILD_ENV=${BUILD_ENV:-local} ionic-app-scripts build"
  ...
}
...

Then you can use it directly in an environments.ts module to properly set the API url based on the value of BUILD_ENV (development in Appflow & local locally).

let apiUrl: string;

switch (process.env.BUILD_ENV) {
  case 'development':
    apiUrl = 'https://api.development.com';
    break;
  case 'local':
    apiUrl = 'http://localhost:8000';
    break;
  default:
    console.warn(`Unknown environment ${process.env.BUILD_ENV} specified.`)
}

export const environment = {
  apiUrl: apiUrl
};

Now your apps will automatically use a different API to fetch data locally vs in your development builds! 💪