Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gshigeto/ionic-environment-variables
Easy to use environment variables for Ionic3!
https://github.com/gshigeto/ionic-environment-variables
angular4 environment-variables environments ionic ionic-framework ionic3 ionic3-examples
Last synced: about 1 month ago
JSON representation
Easy to use environment variables for Ionic3!
- Host: GitHub
- URL: https://github.com/gshigeto/ionic-environment-variables
- Owner: gshigeto
- License: mit
- Created: 2017-08-31T03:42:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-05T17:26:21.000Z (over 6 years ago)
- Last Synced: 2024-09-28T17:20:52.750Z (about 2 months ago)
- Topics: angular4, environment-variables, environments, ionic, ionic-framework, ionic3, ionic3-examples
- Language: CSS
- Size: 1.6 MB
- Stars: 277
- Watchers: 11
- Forks: 36
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic Environment Variables
With this configuration, you can import environment variables anywhere, even in your `app.module.ts`.
Also supports any number of custom environments (prod, staging, dev, etc.)
This project uses the [@ionic/app-script](https://github.com/ionic-team/ionic-app-scripts) package. I recommend updating/installing this package before starting.
Add the following to your `package.json`:
```json
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
```
Add the following to your `tsconfig.json` in `compilerOptions`:
```json
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/environment"
]
}
```
Create a file in your base directory `config/webpack.config.js` and paste the following:
```javascript
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.IONIC_ENV;
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
if (env !== 'prod' && env !== 'dev') {
// Default to dev config
useDefaultConfig[env] = useDefaultConfig.dev;
useDefaultConfig[env].resolve.alias = {
"@app/env": path.resolve(environmentPath(env))
};
}
function environmentPath(env) {
var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
```
Create a default file `src/environments/environment.ts` which will be used for your **PRODUCTION** environment:
```typescript
export const ENV = {
mode: 'Production'
}
```
Create a default file `src/environments/environment.dev.ts` which will be used for your development environment:
```typescript
export const ENV = {
mode: 'Development'
}
```
You can then import your environment variables anywhere!
```typescript
import { ENV } from '@app/env'
```
**NOTE** Remember to ignore your files in your `.gitignore`
```
# Envrionment Variables
**/environment.*
!**/environment.model.ts
```
To test production builds: `ionic build --prod` then open the www/index.html file in your browser.
# If more than `prod` and `dev` environments are wanted
1. Change your `webpack.config.js` `IONIC_ENV` variable to be something else. For example:
```javascript
var env = process.env.MY_ENV;
```
2. Add to your `package.json` another run script and name it whatever you would like
```json
"serve:testing": "MY_ENV=testing ionic-app-scripts serve"
```
3. Create your testing file `src/environments/environment.testing.ts`. This should be whatever you set your `MY_ENV` to.
4. Finally, run the script by using the name you used for your script in `package.json`
```bash
$ npm run serve:testing
```
**NOTE**: When running with a custom variable, production builds still need `--prod` flag