ops(dashboard-v2): improve local developer experience

packages/dashboard-v2/.env.development

@@ -0,0 +1,2 @@
+GATSBY_PORTAL_DOMAIN=
+GATSBY_HOST=

packages/dashboard-v2/README.md

@@ -11,15 +11,20 @@ This is a Gatsby application. To run it locally, all you need is:
 
 ## Accessing remote APIs
 
-To be able to log in on a local environment with your production credentials, you'll need to make the browser believe you're actually on the same domain, otherwise the browser will block the session cookie.
+To have a fully functioning local environment, you'll need to make the browser believe you're actually on the same domain as a working API (i.e. a remote dev or production server) -- otherwise the browser will block the session cookie.
+To do the trick, configure proper environment variables in the `.env.development` file.
+This file allows to easily control which domain name you want to use locally and which API you'd like to access.
 
-To do the trick, edit your `/etc/hosts` file and add a record like this:
+Example:
 
-```
+```env
-127.0.0.1 local.skynetpro.net
+GATSBY_PORTAL_DOMAIN=skynetfree.net # Use skynetfree.net APIs
+GATSBY_HOST=local.skynetfree.net # Address of your local build
 ```
 
-then run `yarn develop:secure` -- it will run `gatsby develop` with `--https --host=local.skynetpro.net -p=443` options.
+> It's recommended to keep the 2LD the same, so any cookies dispatched by the API work without issues.
-If you're on macOS, you may need to `sudo` the command to successfully bind to port `443`.
 
-> **NOTE:** This should become easier once we have a docker image for the new dashboard.
+With the file configured, run `yarn develop:secure` -- it will run `gatsby develop` with `--https -p=443` options.
+If you're on macOS, you may need to `sudo` the command to successfully bind to port `443` (https).
+
+Gatsby will automatically add a proper entry to your `/etc/hosts` file and clean it up when process exits.

packages/dashboard-v2/gatsby-config.js

@@ -1,9 +1,15 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
+const { GATSBY_PORTAL_DOMAIN } = process.env;
+
 module.exports = {
   siteMetadata: {
-    title: "Skynet Account",
+    title: `Accounts Dashboard`,
-    siteUrl: `https://account.${process.env.GATSBY_PORTAL_DOMAIN}/`,
+    siteUrl: `https://account.${GATSBY_PORTAL_DOMAIN}`,
   },
   trailingSlash: "never",
   plugins: [
@@ -24,13 +30,27 @@ module.exports = {
     },
   ],
   developMiddleware: (app) => {
+    // Proxy Accounts service API requests:
     app.use(
       "/api/",
       createProxyMiddleware({
-        target: "https://account.skynetpro.net",
+        target: `https://account.${GATSBY_PORTAL_DOMAIN}`,
         secure: false, // Do not reject self-signed certificates.
         changeOrigin: true,
       })
     );
+
+    // Proxy /skynet requests (e.g. uploads)
+    app.use(
+      ["/skynet", "/__internal/"],
+      createProxyMiddleware({
+        target: `https://${GATSBY_PORTAL_DOMAIN}`,
+        secure: false, // Do not reject self-signed certificates.
+        changeOrigin: true,
+        pathRewrite: {
+          "^/skynet": "",
+        },
+      })
+    );
   },
 };

packages/dashboard-v2/package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "develop": "gatsby develop",
-    "develop:secure": "gatsby develop --https --host=local.skynetpro.net -p=443",
+    "develop:secure": "dotenv -e .env.development -- gatsby develop --https -p=443",
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
@@ -60,6 +60,8 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-preval": "^5.1.0",
     "babel-plugin-styled-components": "^2.0.2",
+    "dotenv": "^16.0.0",
+    "dotenv-cli": "^5.1.0",
     "eslint": "^8.9.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-storybook": "^0.5.6",

packages/dashboard-v2/src/services/skynetClient.js

@@ -1,3 +1,3 @@
 import { SkynetClient } from "skynet-js";
 
-export default new SkynetClient("https://skynetpro.net"); // TODO: proper API url
+export default new SkynetClient(`https://${process.env.GATSBY_PORTAL_DOMAIN}`);

packages/dashboard-v2/yarn.lock

@@ -6735,11 +6735,31 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv-cli@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-cli/-/dotenv-cli-5.1.0.tgz#0d2942b089082da0157f9b26bd6c5c4dd51ef48e"
+  integrity sha512-NoEZAlKo9WVrG0b3i9mBxdD6INdDuGqdgR74t68t8084QcI077/1MnPerRW1odl+9uULhcdnQp2U0pYVppKHOA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    dotenv "^16.0.0"
+    dotenv-expand "^8.0.1"
+    minimist "^1.2.5"
+
 dotenv-expand@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
+dotenv-expand@^8.0.1:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-8.0.3.tgz#29016757455bcc748469c83a19b36aaf2b83dd6e"
+  integrity sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==
+
+dotenv@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.0.tgz#c619001253be89ebb638d027b609c75c26e47411"
+  integrity sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==
+
 dotenv@^8.0.0, dotenv@^8.6.0:
   version "8.6.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"