Merge #531

531: Cleanup frontend code r=klochowicz a=klochowicz

Remove the `APP` variable from `maker-frontend` (from now on, it only builds maker).
Update README, CI and start_all.sh script.

note: the old taker component will be remove in the next PR, as I'm still mining it for ideas.

Co-authored-by: Mariusz Klochowicz <mariusz@klochowicz.com>

.github/workflows/build-release-binary.yml

@@ -83,23 +83,14 @@ jobs:
           cache: yarn
           cache-dependency-path: '**/yarn.lock'
 
-      - name: Build maker frontend
-        if: matrix.bin == 'maker'
+      - name: Build frontends
         shell: bash
         run: |
-          cd maker-frontend;
-          yarn
-          APP=maker yarn build
-
-      # Overwrite taker frontend with our new fancy UI
-      - name: Build taker frontend
-        if: matrix.bin == 'taker'
-        shell: bash
-        run: |
-          cd taker-frontend;
+          cd ${{ matrix.bin }}-frontend;
           yarn
           yarn build
 
+
       - name: Build ${{ matrix.target }} ${{ matrix.bin }} release binary
         run: cargo build --target=${{ matrix.target }} --release --bin ${{ matrix.bin }}
 
@@ -224,7 +215,3 @@ jobs:
               --tag ghcr.io/${{ github.repository }}/taker:${{ github.event.release.tag_name }} \
               --build-arg BINARY_PATH=taker \
               .
-
-
-
-

.github/workflows/ci.yml

@@ -70,8 +70,8 @@ jobs:
           cache: 'yarn'
           cache-dependency-path: maker-frontend/yarn.lock
       - run: yarn install
-      - run: APP=maker yarn test
-      - run: APP=maker yarn build
+      - run: yarn test
+      - run: yarn build
 
   build_and_test_taker_frontend:
     defaults:

README.md

@@ -14,8 +14,8 @@ All the components can be started at once by running the following script:
 ./start_all.sh
 ```
 
-Note: Before first run, you need to run `cd frontend; yarn install` command to
-ensure that all dependencies get installed.
+Note: Before first run, you need to run `cd maker-frontend; yarn install; cd../taker-frontend; yarn install` command to ensure that all dependencies get
+installed.
 
 The script combines the logs from all binaries inside a single terminal so it
 might not be ideal for all cases, but it is convenient for quick regression testing.
@@ -46,24 +46,31 @@ Note: The sqlite databases for maker and taker are currently created in the proj
 
 ## Starting the maker and taker frontend
 
-We use a single react project for hosting both the taker and the maker frontends.
-However, the development environment still needs to be start twice!
-Which frontend to start is configured via the `APP` environment variable.
+We use a separate react projects for hosting taker and maker frontends.
+
+At the moment you will need a browser extension to allow CORS headers like `CORS Everywhere` ([Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/)) to use the frontends.
+
+### Taker
 
 ```bash
-cd frontend
+cd taker-frontend
 yarn install
-APP=taker yarn dev
-APP=maker yarn dev
+yarn dev
 ```
 
-Bundling the web frontend and serving it from the respective daemon is yet to be configured.
-At the moment you will need a browser extension to allow CORS headers like `CORS Everywhere` ([Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/)) to use the frontends.
+### Maker
+
+```bash
+cd maker-frontend
+yarn install
+yarn dev
+```
 
 ### Linting
 
 To run eslint, use:
 
 ```bash
-cd frontend && yarn run eslint
+cd maker-frontend && yarn run eslint
+cd taker-frontend && yarn run eslint
 ```

maker-frontend/dynamicApp.ts

@@ -1,18 +0,0 @@
-import { Plugin } from "vite";
-
-export default function dynamicApp(app: string): Plugin {
-    return {
-        name: "dynamicApp", // required, will show up in warnings and errors
-        resolveId: (id) => {
-            // For some reason these are different?
-            const productionBuildId = "src/__app__.tsx";
-            const devBuildId = "/src/__app__.tsx";
-
-            if (id === productionBuildId || id === devBuildId) {
-                return `${__dirname}/src/${app}.tsx`;
-            }
-
-            return null;
-        },
-    };
-}

maker-frontend/index.html

@@ -7,7 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="src/__app__.tsx"> // `__app__` is dynamically resolved by the `dynamicApp` vite plugin
-    </script>
+    <script type="module" src="/src/maker.tsx"></script>
   </body>
 </html>

maker-frontend/vite.config.ts

@@ -1,18 +1,6 @@
 import reactRefresh from "@vitejs/plugin-react-refresh";
 import { resolve } from "path";
 import { defineConfig } from "vite";
-import dynamicApp from "./dynamicApp";
-
-const app = process.env.APP;
-
-if (!app || (app !== "maker" && app !== "taker")) {
-    throw new Error("APP environment variable needs to be set to `maker` `taker`");
-}
-
-const backendPorts = {
-    "taker": 8000,
-    "maker": 8001,
-};
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -22,18 +10,17 @@ export default defineConfig({
                 ? [reactRefresh()]
                 : []
         ),
-        dynamicApp(app),
     ],
     build: {
         rollupOptions: {
             input: resolve(__dirname, `index.html`),
         },
-        outDir: `dist/${app}`,
+        outDir: `dist/maker`,
     },
     server: {
         proxy: {
-            "/api": `http://localhost:${backendPorts[app]}`,
-            "/alive": `http://localhost:${backendPorts[app]}`,
+            "/api": `http://localhost:8001`,
+            "/alive": `http://localhost:8001`,
         },
     },
 });

start_all.sh

@@ -5,4 +5,4 @@ export RUST_BACKTRACE=1
 # A simple command to spin up the complete package, ie. both daemons and frontends.
 # A single 'ctrl+c' stops all processes.
 # The maker-id is generated from the makers seed found in daemon/util/testnet_seeds/maker_seed
-(trap 'kill 0' SIGINT; cargo run --bin maker -- testnet & cargo run --bin taker -- --maker-id 10d4ba2ac3f7a22da4009d813ff1bc3f404dfe2cc93a32bedf1512aa9951c95e testnet -- & APP=maker yarn --cwd=./maker-frontend dev  & yarn --cwd=./taker-frontend dev)
+(trap 'kill 0' SIGINT; cargo run --bin maker -- testnet & cargo run --bin taker -- --maker-id 10d4ba2ac3f7a22da4009d813ff1bc3f404dfe2cc93a32bedf1512aa9951c95e testnet -- & yarn --cwd=./maker-frontend dev  & yarn --cwd=./taker-frontend dev)

taker-frontend/package.json

@@ -40,6 +40,7 @@
     "@types/eslint": "^7",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
     "typescript": "^4.4.4",
     "vite": "^2.6.13"
   },

taker-frontend/vite.config.ts

@@ -1,10 +1,16 @@
-import react from "@vitejs/plugin-react";
+import reactRefresh from "@vitejs/plugin-react-refresh";
 import { resolve } from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [
+        (
+            process.env.NODE_ENV !== "test"
+                ? [reactRefresh()]
+                : []
+        ),
+    ],
     build: {
         rollupOptions: {
             input: resolve(__dirname, `index.html`),
@@ -14,6 +20,7 @@ export default defineConfig({
     server: {
         proxy: {
             "/api": "http://localhost:8000",
+            "/alive": "http://localhost:8000",
         },
     },
 });

taker-frontend/yarn.lock

@@ -50,7 +50,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.15.5", "@babel/core@^7.7.5", "@babel/core@^7.8.4":
+"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.14.8", "@babel/core@^7.15.5", "@babel/core@^7.7.5", "@babel/core@^7.8.4":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.0.tgz#c4ff44046f5fe310525cc9eb4ef5147f0c5374d4"
   integrity sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==
@@ -837,7 +837,7 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.16.0"
 
-"@babel/plugin-transform-react-jsx-self@^7.12.1", "@babel/plugin-transform-react-jsx-self@^7.14.9":
+"@babel/plugin-transform-react-jsx-self@^7.12.1", "@babel/plugin-transform-react-jsx-self@^7.14.5", "@babel/plugin-transform-react-jsx-self@^7.14.9":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.0.tgz#09202158abbc716a08330f392bfb98d6b9acfa0c"
   integrity sha512-97yCFY+2GvniqOThOSjPor8xUoDiQ0STVWAQMl3pjhJoFVe5DuXDLZCRSZxu9clx+oRCbTiXGgKEG/Yoyo6Y+w==
@@ -2879,6 +2879,17 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vitejs/plugin-react-refresh@^1.3.1":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-refresh/-/plugin-react-refresh-1.3.6.tgz#19818392db01e81746cfeb04e096ab3010e79fe3"
+  integrity sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==
+  dependencies:
+    "@babel/core" "^7.14.8"
+    "@babel/plugin-transform-react-jsx-self" "^7.14.5"
+    "@babel/plugin-transform-react-jsx-source" "^7.14.5"
+    "@rollup/pluginutils" "^4.1.1"
+    react-refresh "^0.10.0"
+
 "@vitejs/plugin-react@^1.0.0":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.0.7.tgz#d542003afbae875f86fb89f3811a0f7c0c9479f5"