ionic-environment-variables - GitLite

KO | EN

gitlite — search

#python #llm #android #rust #deep-learning #docker #windows #awesome #awesome-list #pytorch #ios #mcp #openai #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

# Installation Guide

1. Get the code

git clone https://github.com/gshigeto/ionic-environment-variables

Downloads the entire project code from GitHub to your computer.

cd ionic-environment-variables

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm run serve:testing

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

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

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