Update local web development instructions (#1208)

* Indicate production with NODE_ENV

* Use local.json config to point to Bitwarden production APIs

* Add proxy configuration to cloud and qa environment

* Move notifications to urls

Co-authored-by: Hinton <oscar@oscarhinton.com>

README.md

@@ -41,18 +41,20 @@ If you want to point the development web vault to the production APIs, you can r
 
 ```
 npm install
-ENV=production npm run build:oss:watch
+ENV=cloud npm run build:oss:watch
 ```
 
 You can also manually adjusting your API endpoint settings by adding `config/local.json` overriding any of the following values:
 
 ```json
 {
-    "proxyApi": "http://your-api-url",
-    "proxyIdentity": "http://your-identity-url",
-    "proxyEvents": "http://your-events-url",
-    "proxyNotifications": "http://your-notifications-url",
-    "allowedHosts": ["hostnames-to-allow-in-webpack"],
+    "dev": {
+        "proxyApi": "http://your-api-url",
+        "proxyIdentity": "http://your-identity-url",
+        "proxyEvents": "http://your-events-url",
+        "proxyNotifications": "http://your-notifications-url",
+        "allowedHosts": ["hostnames-to-allow-in-webpack"],
+    },
     "urls": {
       
     }

config.js

@@ -3,6 +3,11 @@ function load(envName) {
         ...require('./config/base.json'),
         ...loadConfig(envName),
         ...loadConfig('local'),
+        dev: {
+            ...require('./config/base.json').dev,
+            ...loadConfig(envName).dev,
+            ...loadConfig('local').dev,
+        },
     };
 }
 

config/base.json

@@ -5,5 +5,8 @@
     "paypal": {
         "businessId": "AD3LAUZSNVPJY",
         "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
+    },
+    "dev": {
+        "allowedHosts": []
     }
 }

config/cloud.json

@@ -8,5 +8,10 @@
     "paypal": {
         "businessId": "4ZDA7DLUUJGMN",
         "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
+    },
+    "dev": {
+        "proxyApi": "https://api.bitwarden.com",
+        "proxyIdentity": "https://identity.bitwarden.com",
+        "proxyEvents": "https://events.bitwarden.com"
     }
 }

config/development.json

@@ -1,10 +1,11 @@
 {
-    "proxyApi": "http://localhost:4000",
-    "proxyIdentity": "http://localhost:33656",
-    "proxyEvents": "http://localhost:46273",
-    "proxyNotifications": "http://localhost:61840",
-    "allowedHosts": [],
     "urls": {
         "notifications": "http://localhost:61840"
+    },
+    "dev": {
+        "proxyApi": "http://localhost:4000",
+        "proxyIdentity": "http://localhost:33656",
+        "proxyEvents": "http://localhost:46273",
+        "proxyNotifications": "http://localhost:61840"
     }
 }

config/qa.json

@@ -2,5 +2,10 @@
     "urls": {
         "icons": "https://icons.qa.bitwarden.pw",
         "notifications": "https://notifications.qa.bitwarden.pw"
+    },
+    "dev": {
+        "proxyApi": "https://api.qa.bitwarden.pw",
+        "proxyIdentity": "https://identity.qa.bitwarden.pw",
+        "proxyEvents": "https://events.qa.bitwarden.pw"
     }
 }

webpack.config.js

@@ -169,7 +169,7 @@ const plugins = [
 
 // ref: https://webpack.js.org/configuration/dev-server/#devserver
 let certSuffix = fs.existsSync('dev-server.local.pem') ? '.local' : '.shared';
-const devServer = ENV !== 'development' ? {} : {
+const devServer = NODE_ENV !== 'development' ? {} : {
     https: {
         key: fs.readFileSync('dev-server' + certSuffix + '.pem'),
         cert: fs.readFileSync('dev-server' + certSuffix + '.pem'),
@@ -177,32 +177,32 @@ const devServer = ENV !== 'development' ? {} : {
     // host: '192.168.1.9',
     proxy: {
         '/api': {
-            target: envConfig['proxyApi'],
+            target: envConfig.dev?.proxyApi,
             pathRewrite: {'^/api' : ''},
             secure: false,
             changeOrigin: true
         },
         '/identity': {
-            target: envConfig['proxyIdentity'],
+            target: envConfig.dev?.proxyIdentity,
             pathRewrite: {'^/identity' : ''},
             secure: false,
             changeOrigin: true
         },
         '/events': {
-            target: envConfig['proxyEvents'],
+            target: envConfig.dev?.proxyEvents,
             pathRewrite: {'^/events' : ''},
             secure: false,
             changeOrigin: true
         },
         '/notifications': {
-            target: envConfig['proxyNotifications'],
+            target: envConfig.dev?.proxyNotifications,
             pathRewrite: {'^/notifications' : ''},
             secure: false,
             changeOrigin: true
         },
     },
     hot: false,
-    allowedHosts: envConfig['allowedHosts']
+    allowedHosts: envConfig.dev?.allowedHosts,
 };
 
 const webpackConfig = {