If you want to manage an environment for development and another for production with Ionic under Windows, this guide can (maybe) help you...

This guide show you how configure many configuration environment for your project and display specific links or variables according to your chosen configuration. In my side, I have:

• An environment for development, with links (API endpoint) to local host.
• An environment for production, with links (API endpoint) to server host.
• An environment for fixture, with embedded data in order to test the App.

The aim of this guide is to define environment variables reachable by the Ionic App..

Note that the are some solutions but doesn't work with every body et depends on work configuration (Ionic, Angular, système d'exploitation...). In my side, I use Ionic 3 and Angular 4 with Windows 7 SP1.

IONIC_ENV and NODE_ENV

Ionic use variables d'environement that can be used by Ionic App but mainly by webpack. IONIC_ENV is very interresting but doen't works with ionic serve, an development environment by default. However, Ionic 2 users can use it.

The variable NODE_ENV of Node JS will be used by the Ionic App.

Webpack Configuration

Webpack shall be configured to export the environment variables in Ionic App.

1. Copy ./node_modules/@ionic/app-scripts/config/webpack.config.js in ./config/webpack.config.js
2. In webpack.config.js, add the following lines:

//> ./config/webpack.config.js
//...
//Add the following lines at the beginning of file, after the variables declaration.
var projectSrcDir = process.env.IONIC_SRC_DIR;

var env = process.env.NODE_ENV || 'dev';
var envVars;
try {
  envVars = require(path.join(projectSrcDir, 'config', 'env', env + '.json'));
} catch(e) {
  envVars = {};
}
//...
module.exports = {
    //...
    plugins: [
        //...
        //Add the following links at the end of the section 'plugins' of module.exports
        new webpack.DefinePlugin({
            ENV: Object.assign(envVars, {
                environment: JSON.stringify(env)
            })
        })
    ]
    //...
}

3. In package.json, add the following lines:

{
    //...,
    "config": {
        "ionic_webpack": "./config/webpack.config.js"
    }
}

Webpack is now configured in order to load the following environment variables in the Ionic App:

• ENV.environment = NODE_ENV
• User variables defining in ./src/config/env/{NODE_ENV}.json

User environment variables

User variables give you a specific variables set for your configuration.

1. Create a file ./src/config/env/dev.json
2. Add the following lines:

{
  "apiEndpoint": "\"http://dev-endpoint.com/\"",
  "envName": "\"Devlopment Environment\"",
  "myVariable1": false
}

3. Do the same for ./src/config/env/prod.json and ./src/config/env/fixture.json

{
  "apiEndpoint": "\"http://prod-endpoint.com/\"",
  "envName": "\"Production Environment\"",
  "myVariable1": true
}

Use variables in App

To use a configuration in App, use the following implementation:

declare const ENV;

if(ENV.environment === 'dev') {
  // Run with the `--dev` flag.
  // Any keys defined in `dev.json` will be available on the `ENV` object.
} else if (ENV.environment === 'prod') {
  // Run with the `--prod` flag.
  // Any keys defined in `prod.json` will be available on the `ENV` object.
} else if ()//...

It's almost the end !!

For some machin configuration, at this level, there is possibility to have a result but on Windows, you shall define the environment variable NODE_ENV manualy. Which implies that each use will have to execute the following commands:

set NODE_ENV=prod
ionic serve --lab

It is heavy!
To avoid it, the following batch script shortcuts the commands. In C:\tools\iserve.bat, add the following links:

@echo off
if %1==--prod goto :prod
if %1==--fix  goto :fix
goto :dev

:prod
set NODE_ENV=prod
ionic serve --lab
goto :exit

:fix
set NODE_ENV=fixture
ionic serve --lab
goto :exit

:dev
set NODE_ENV=dev
ionic serve --lab
goto :exit

:exit

Add C:\tools in the PATH system environment variable of Windows.

The end!

Now, you know how use many environments for your project Ionic. To load it, go in the project directory and execute the following commands:

• iserve --dev
• iserve --prod
• iserve --fixture

These commands will launch ionic serve --lab in the good environment!

That's all for this guide...
This project is available on Github.

Goodbye and see you in the next post!

---

Guide based on:

• Ionic 2 (dev/prod) environment variables configuration
• Ionic 2 Environment Variables: The Best Way

Previous Post Next Post

---