Add: Readme, environment variables

.env.development

@@ -1 +1,2 @@
-VUE_APP_ROOT_URL= https://ie-bank-api-dev.azurewebsites.net/
+VUE_APP_ROOT_URL= https://ie-bank-api-dev.azurewebsites.net/
+VUE_APP_ENV_VAR_FILE_NAME= .env.development

README.md

@@ -119,10 +119,10 @@ This will create a `node_modules` folder with all the dependencies needed to run
 
 ## Configuration variables
 
-> Learn more: 
-
+> Learn more: [Modes and Environment Variables](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)
 
 ## Continuos Delivery
 
-> Learn more:
+> Learn more: 
+> - [Vue Deployment on App Service Linux](https://azureossd.github.io/2022/02/11/Vue-Deployment-on-App-Service-Linux/)
 

src/components/Skull.vue

@@ -1,7 +1,8 @@
 <template>
  <div>
  <h1>Skull</h1>
- <p>{{ msg }}</p>
+ <p>Environment variables read from file {{ env_var_file_name }}</p>
+ <p>{{ msg }}, and it is running from the {{ environment }} environment</p>
  <button type="button" class="btn btn-secondary">
  Skull button
  </button>
@@ -12,28 +13,30 @@
 <script>
 import axios from 'axios'
 export default
-{
- name: 'Skull',
- data()
  {
- return {
-  msg: 'Hi! This is the skull component 💀'
- }
- },
- methods:
- {
- getSkull()
+ name: 'Skull',
+ data() {
+  return {
+  msg: 'Hi! This is the skull component 💀'
+  }
+  },
+ methods:
  {
- axios.get('http://localhost:5000/skull')
- .then(response => (this.msg = response.data))
- .catch(error => console.log(error))
+ getSkull() {
+ const path = `${process.env.VUE_APP_ROOT_URL}/skull`;
+ axios.get(path)
+ .then((response) => {
+ this.msg = response.data;
+ this.environment = process.env.NODE_ENV;
+ this.env_var_file_name = process.env.VUE_APP_ENV_VAR_FILE_NAME
+ })
+ .catch(error => console.log(error))
+ }
+ },
+ created() {
+ this.getSkull()
  }
- },
- created()
- {
- this.getSkull()
- }
 
- 
-}
+
+ }
 </script>