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 EnvironmentTo 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.
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.
#
Add the Environment to an AutomationTo 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
.
#
Example: Customizing the Build ScriptGetting 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).
Here's what your angular.json
configurations section might look like.
Here's what the environment.ts
and environment.development.ts
files might look like.
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
.
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).
Now your apps will automatically use a different API to fetch data locally vs in your development builds! 💪