README: add build dependencies to package.json and document production build properly (#21)

Fixes: #12

With build tooling added to the dev dependencies, it is no longer necessary to install system-wide.
This is particularly useful for production builds, where system-wide package pollution is highly discouraged or even prohibited.

npm@next, vue-cli and ncu may still be useful to developers, but they shouldn't be part of the build instructions. A separate readme update is on the way.

The PR now also includes a readme update to clarify which tools should be installed when.
Production builds do not need global tool installs.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/README.md

@@ -15,13 +15,11 @@ Install node: (CentOS/Fedora)
     curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
     sudo yum install nodejs
 
-Install tools and dependencies:
+For development, install tools and dependencies system-wide:
 
     sudo npm install -g @vue/cli webpack eslint
     sudo npm install -g npm@next
     sudo npm install -g npm-check-updates
-    ncu -u # optional: upgrade dependencies
-    npm install
 
 ## Development
 
@@ -38,11 +36,7 @@ Build and run:
     or
     npm run serve
 
-Production Build:
+Upgrade dependencies to the latest versions:
-
-    npm run build
-
-Upgrade dependencies:
 
     ncu -u
 
@@ -56,6 +50,44 @@ Fix issues and vulnerabilities:
 
     npm audit
 
+## Production
+
+Fetch dependencies and build:
+
+    npm install
+    npm run build
+
+This creates a static webpack application in `dist/`, which can then be served
+from any web server or CloudStack management server (jetty).
+
+To use CloudStack management server (jetty), you may copy the built Primate build
+to a new/existing webapp directory on the management server host. If the webapp
+directory is changed, please change the `webapp.dir` in the
+`/etc/cloudstack/management/server.properties` and restart the management server host.
+
+To use a separate webserver, note that the API server is accessed through the path
+`/client`, which needs be forwarded to an actual CloudStack instance.
+
+For example, a simple way to serve Primate with nginx can be implemented with the
+following nginx configuration (to be put into /etc/nginx/conf.d/default.conf or similar):
+
+```nginx
+server {
+    listen       80;
+    server_name  localhost;
+    location / {
+        # /src/primate/dist contains the built Primate webpack
+        root   /src/primate/dist;
+        index  index.html;
+    }
+    location /client/ {
+        # http://127.0.0.1:800 should be replaced your CloudStack management
+        # server's actual URI
+        proxy_pass   http://127.0.0.1:8000;
+    }
+}
+```
+
 ## Documentation
 
 ### Learning Resources

ui/package.json

@@ -61,6 +61,8 @@
     "vuex": "^3.1.2"
   },
   "devDependencies": {
+    "@kazupon/vue-i18n-loader": "^0.4.1",
+    "@vue/cli": "^4.0.5",
     "@vue/cli-plugin-babel": "^4.0.5",
     "@vue/cli-plugin-eslint": "^4.0.5",
     "@vue/cli-plugin-unit-jest": "^4.0.5",
@@ -75,11 +77,11 @@
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-vue": "^6.0.1",
     "less": "^3.10.3",
-    "@kazupon/vue-i18n-loader": "^0.4.1",
     "less-loader": "^5.0.0",
     "vue-cli-plugin-i18n": "^0.6.0",
     "vue-svg-icon-loader": "^2.1.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.41.2"
   },
   "eslintConfig": {
     "root": true,