Prettify and use different environments

Author: ThomasThelen

README.md

@@ -1,2 +1,58 @@
-# node-browser
+# kwg-node-browser
+
 Web service for viewing data about nodes
+
+## Background
+
+KnowWhereGraph has billions of data nodes, each with an attached HTTP URI. This web application provides an interface for viewing information attached to a particular node.
+
+## Running
+
+The node explorer can be run under several environments, which are defined as Angular environments under `src/app/environments`.
+
+### Local Environment
+
+The local environment assumes that the KnowWhereGraph stack is running locally, which includes an endpoint at `https://localhost/sparql`. It also redirects all web links to localhost.
+```
+ng serve --configuration=local
+```
+
+### Stage Environment
+
+The stage environment uses the staging deployments SPARQL endpoint. It also redirects links to the staging server.
+
+### Production Environment
+
+The prod environment uses the production SPARQL endpoint and redirects to the production server.
+
+### Custom
+
+Changes can be made to any of these environments to mix and match behavior.
+
+## Building & Deploying
+
+When using the node explorer in a production environment, the source should be built and then served with a server like NGINX or Apache.
+
+### Production
+
+Production deployments should deploy the application by building and serving the distribution with a reverse proxy such as nginx or apache.
+
+To build the node explorer,
+
+```
+ng build --configuration=prod
+```
+
+### Staging
+
+Staging builds are done similarly to production with
+
+```
+ng build --configuration=stage
+```
+
+## Developing
+
+The standard Git Flow: create a feature branch off of the `develop` branch and make pull requests into it. For full releases, merge from the `develop` branch into `main`.
+
+Before requesting a review, format the code with prettier: `npx prettier . --write`

node-browser/.prettierrc

@@ -0,0 +1 @@
+{}

node-browser/angular.json

@@ -26,14 +26,11 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss",
               "./node_modules/leaflet/dist/leaflet.css",
-              "./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css",
+              "./node_modules/material-icons/iconfont/material-icons.css",
               "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
             ],
             "scripts": [
@@ -44,42 +41,71 @@
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumError": "2mb"
                 }
               ],
               "outputHashing": "all"
             },
-            "development": {
+            "stage": {
               "buildOptimizer": false,
               "optimization": false,
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.stage.ts"
+                }
+              ]
+            },
+            "local": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
-            "production": {
+            "prod": {
               "browserTarget": "node-browser:build:production"
             },
-            "development": {
-              "browserTarget": "node-browser:build:development"
+            "local": {
+              "browserTarget": "node-browser:build:local"
+            },
+            "stage": {
+              "browserTarget": "node-browser:build:stage"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "prod"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -90,19 +116,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         }