Skip to content

Home

Jump to bottom
OfirTheOne edited this page May 10, 2018 · 26 revisions

The problam we targeting :

Having a web app developed in Ionic framework and Deploying to heroku with Git.
I must manage at least two environments, prod(uction) and dev(elopment), and another important requirement is that no sensitive data (e.g API_URL, CLIENT_KEY) will publicly sit in the app's git repo.

so ..

  • first, manage two envaierments, prod and dev, with different behaviors - in this case inject different envaierment variables values in dev mode and prod mode.
  • seconde, inject envaierment variable - conataininig sensitive values - on the heroku server without it sitting in the repo.

we dealing with multiples framework in this process Angular, Ionic, Webpack and Heroku


The solution :

Handle the low level configuretion :


in your package.json make sure that "@ionic/app-scripts", "typescript" in the "dependencies" enrty 

"dependencies" : {
    ... 
    "@ionic/app-scripts": "3.1.9", 
    "typescript": "~2.6.2" 
}

to the "scripts" entry add the following : 

scripts : {
    ...
    "postinstall": "ionic-app-scripts build --prod webpack --display-error-details --config ./config/webpack.config.js",
    "ionic:build": "ionic-app-scripts build --prod"
}

with --prod we set the prod flag up during the build on the server, and webpack configure the way that webpack will bundle our app.
more on this setup here.


add an entry called config to your package.json as in the following :
"config" : { "ionic_webpack": "./config/webpack.config.js" }


**Handle the webpack configuretion** :
on the root of your app (same level as node_modules) create a folder name `config`, and in it create a file name `webpack.config.js` .

the code on this file will be using Ionic Environment Variables, and mainlly webpack code.

res:

Clone this wiki locally