https://github.com/codercatdev/angularfire2-env-issue
Issue with using the default enviornment
https://github.com/codercatdev/angularfire2-env-issue
Last synced: about 1 year ago
JSON representation
Issue with using the default enviornment
- Host: GitHub
- URL: https://github.com/codercatdev/angularfire2-env-issue
- Owner: codercatdev
- Created: 2017-10-18T16:46:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-09T19:17:12.000Z (over 5 years ago)
- Last Synced: 2025-05-11T04:55:40.412Z (about 1 year ago)
- Language: TypeScript
- Size: 63.5 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# What is this repo used for?
This shows how to use ionic framework with @ionic/app-scripts@3.0.0 to allow building of any environment file.
The original solution (but this doesn't work with AOT compiler)
https://github.com/gshigeto/ionic-environment-variables
Issue 1205 in ionic-cli
https://github.com/ionic-team/ionic-cli/issues/1205
Also referenced in Issue 1006 for ionic-app-scripts
https://github.com/ionic-team/ionic-app-scripts/issues/1006
# Clone
```
git clone
```
# Firebase testing
Make sure you have firebase CLI installed
npm install -g firebase-tools
```
npm install
```
## Dev
```
npm run build ionic:build:dev:prod
firebase serve
```
Go to localhost:5000
-> should log you into environment-sample-dev.firebaseapp.com
## Prod
```
npm run build ionic:build:prod:prod
firebase serve
```
Go to localhost:5000
-> should log you into environment-sample-prod.firebaseapp.com
## Ionic Serve
standard ionic serve will run on 8100(or next available) and pickup your env/environment.dev.json file
# Key files
## package.json
```
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"ionic:build:dev": "cross-env MY_ENV=dev ionic-app-scripts build",
"ionic:build:dev:prod": "cross-env MY_ENV=dev ionic-app-scripts build --prod",
"ionic:build:prod:prod": "cross-env MY_ENV=prod ionic-app-scripts build --prod"
},
"config": {
"ionic_copy": "./config/copy.config.js",
"ionic_webpack": "./config/webpack.config.js"
},
```
## config/copy.config.js
```
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/copy.config.js');
module.exports = function () {
var fs = require('fs');
var path = require('path');
var ROOT_DIR = process.cwd();
var DEST_FILE = 'src/environments/environment.json';
var env = process.env.MY_ENV || 'dev';
var envFile = 'env/environment.' + env + '.json';
var configFileFull = path.join(ROOT_DIR, envFile);
var destFileFull = path.join(ROOT_DIR, DEST_FILE);
var data = fs.readFileSync(configFileFull, 'utf8');
fs.writeFileSync(destFileFull, data);
return useDefaultConfig;
};
```
## config/webpack.config.js
```
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
var envFile = './src/environments/environment.ts';
var alias = { '@app/env': path.resolve(envFile) };
useDefaultConfig.dev.resolve.alias = alias;
useDefaultConfig.prod.resolve.alias = alias;
return useDefaultConfig;
};
```
## environments
### env/environment.dev.json
This is your dev config
```
{
"environmentName": "Development Environment",
"ionicEnvName": "dev",
"firebase": {
"apiKey": "AIzaSyABYjyKLf1Q4YWpr-IeVlqY8SvT9GBfR_k",
"authDomain": "environment-sample-dev.firebaseapp.com",
"projectId": "environment-sample-dev"
}
}
```
### env/environment.prod.json
This is your prod config
```
{
"environmentName": "Production Environment",
"ionicEnvName": "prod",
"firebase": {
"apiKey": "AIzaSyBX7fxtorP7FpATNUy3oyIBtQ5NdhYhfnc",
"authDomain": "environment-sample-prod.firebaseapp.com",
"projectId": "environment-sample-prod"
}
}
```
## src/app/app.d.ts
This allows the use of json files
```
declare module '*.json' {
const value: any;
export default value;
}
```
## src/environments/environment.ts
Allow typescript to the configs
```
import { Environment } from './environment.model';
import * as data from './environment.json';
export const ENV: Environment = data;
```