dockerfile added

Author: Na3aga

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:lts-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+
+RUN npm run build
+
+EXPOSE 8080
+# build app for production with minification
+
+CMD [ "http-server", "dist" ]

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+services:
+  vue-ui:
+    build:
+      context: ./
+      dockerfile: Dockerfile
+    ports:
+      - "8081:8080"
+    container_name: vue-contacts
+    volumes:
+       - /node_modules

src/App.vue

@@ -8,7 +8,6 @@
 <script>
 import Header from "./components/layout/Header";
 
-
 export default {
   name: "App",
   components: {

src/components/Contacts.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+// Imports contact list items
 import ContactSmall from "./ContactSmall.vue";
 
 export default {

src/components/RightNav.vue

@@ -73,7 +73,9 @@
 </template>
 
 <script>
+// import constant for setting store's actions's value (used in Contacts.vue list items)
 import {ACTION_EDIT_CONTACTS , ACTION_ADD_CONTACTS, ACTION_DEFAULT } from '../store/modules/CONTACTS_ACTIONS'
+// import vuex funtions to map getters, actions from vuex store module
 import { mapGetters, mapActions } from "vuex";
 
 export default {
@@ -87,11 +89,11 @@ export default {
   },
    methods: {
     ...mapActions(['setCurrentAction']),
-    setAction(action){
+    setAction(action){ // called by button click with given action
       this.setCurrentAction(action);
     }
    },
-   computed: mapGetters(["currentAction"]),
+   computed: mapGetters(["currentAction"]),  // used to style page by currentAction
 };
 </script>
 

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import contacts from './modules/contacts';
+import contacts from './modules/contacts'; // store module for whole app  
 
 Vue.use(Vuex);