Français
English
Si vous voulez gérer un environnement de développement et de production avec Ionic sous Windows, ce guide pourra (peut être) vous aider... 
Il vous montre comment configurer plusieurs environnements de travail pour votre projet et ainsi définir des liens et variables différents en fonction de la configuration choisie. Dans mon cas, j'ai configuré:
- Un environnement de développement, avec des liens (API endpoint) pointant sur le serveur local (localhost).
- Un environnement de production, avec des liens (API endpoint) pointant sur le serveur distant (www.clemdesign.fr).
- Un environnement de fixture, avec des données embarquées dans l'application, afin d'avoir des jeux de tests.
La finalité des étapes ci-dessous est de définir des variables d'environnement utilisables dans l'application Ionic.. 
Sachez aussi qu'il existe plusieurs solutions qui ne fonctionnent pas toujours forcément et dépendent en général de votre configuration de travail (Ionic, Angular, système d'exploitation...). Dans mon cas, j'utilise Ionic 3 et Angular 4 sur Windows 7 SP1.
IONIC_ENV et NODE_ENV
Ionic utilise des variables d'environnement que nous pouvons utiliser dans notre application mais qui surtout peuvent être utilisées par webpack. IONIC_ENV est très intéressant, mais ne fonctionne plus avec ionic serve qui est un environnement de développement par défaut. Cependant, des utilisateurs de Ionic 2 peuvent toujours l'exploiter. 
Nous utiliserons donc la variable de Node JS NODE_ENV qui peut être exploitée par une application Ionic.
Configuration de Webpack
Nous allons définir une configuration webpack afin d'exporter nos variables d'environnement dans notre application Ionic.
- Copiez
./node_modules/@ionic/app-scripts/config/webpack.config.jsdans./config/webpack.config.js - Dans
webpack.config.js, ajouter les lignes suivantes:
//> ./config/webpack.config.js
//...
//Ajoutez les lignes suivantes au début du fichier, aprés la définition des variables.
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: [
//...
//Ajoutez les lignes suivantes à la fin de la section 'plugins' de module.exports
new webpack.DefinePlugin({
ENV: Object.assign(envVars, {
environment: JSON.stringify(env)
})
})
]
//...
}- Dans
package.json, ajoutez les lignes suivantes:
{
//...,
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
}Nous avons configuré Webpack afin de charger des variables d'environnement pour notre application, dont:
- ENV.environment = NODE_ENV
- les variables utilisateurs définies dans
./src/config/env/{NODE_ENV}.json
Variables d'environnement utilisateur
Les variables utilisateurs vous permettent de définir un jeu de variables propres à votre configuration.
- Créez un fichier
./src/config/env/dev.json - Ajoutez les lignes suivantes:
{
"apiEndpoint": "\"http://dev-endpoint.com/\"",
"envName": "\"Devlopment Environment\"",
"myVariable1": false
}- Faites de même pour
./src/config/env/prod.jsonet./src/config/env/fixture.json
{
"apiEndpoint": "\"http://prod-endpoint.com/\"",
"envName": "\"Production Environment\"",
"myVariable1": true
}Utilisation dans l'appli
Pour pouvoir utiliser une configuration distincte dans l'application, il faut implémenter les lignes suivantes:
declare const ENV;
if(ENV.environment === 'dev') {
// Toutes les clés définit dans `dev.json` seront disponibles dans l'objet `ENV`.
} else if (ENV.environment === 'prod') {
// Toutes les clés définit dans`prod.json` seront disponibles dans l'objet `ENV`.
} else if ()//...
C'est presque la fin!!
Nous avons presque fini! Pour certaines configurations, à ce stade, nous pourrions avoir un résultat, néanmoins sur Windows, il faut définir manuellement la variable d'environement NODE_ENV. Ce qui implique qu'a chaque utilisation, il faudra exécuter les commandes suivantes:
set NODE_ENV=prod
ionic serve --labC'est lourd! 
Pour y remédier, on crée un script batch afin de raccourcir ces commandes. Dans C:\tools\iserve.bat, ajoutez les lignes suivantes:
@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
:exitAjoutez C:\tools dans la variable d'environnement du système PATH de Windows.
C'est fini!
Et voilà, maintenant vous savez comment utiliser plusieurs environnements différents pour votre projet Ionic. Pour les charger, il suffit d'aller dans le répertoire de votre projet puis d'exécuter les lignes de commandes suivantes:
- iserve --dev
- iserve --prod
- iserve --fixture
Ces commandes lanceront ionic serve --lab dans le bon environnement!
C'est tout pour ce guide !
En espérant qu'il vous a été utile..
Retrouvez son projet sur Github.
Je vous dis à plus pour le prochain article!
Guide basé sur:
Article précédent Article suivant
Commentaires
Jeremy Noh
clemdesign
Jeremy Noh
Ajouter un commentaire