ionic-environment-variables

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #go #nodejs #java #windows #awesome #kubernetes #vue #openai #mcp #open-source

ionic-environment-variables

(★ 275)

Easy to use environment variables for Ionic3!

File Explorer

Download Latest Version (.zip)

- main.css.map
- main.js.map
- webpack.config.js
- icon.png
- splash.png
- - app.component.ts
  - app.html
  - app.module.ts
  - app.scss
  - main.ts
- - environment.dev.ts
  - environment.model.ts
  - environment.ts
- - variables.scss
- index.html
- manifest.json
- service-worker.js
.editorconfig
.gitignore
config.xml
ionic.config.json
LICENSE
package.json
README.md
tsconfig.json
tslint.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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))
  };
}

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

ionic-environment-variables

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

ionic-environment-variables

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README