From 40cbc7cdb676551c2bd685aca526d48850d4d88b Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Thu, 11 Nov 2021 15:52:18 +1030 Subject: [PATCH 1/4] Remove support for building old taker frontend `maker-frontend` vite config supports only maker now. --- .github/workflows/build-release-binary.yml | 6 +----- .github/workflows/ci.yml | 4 ++-- maker-frontend/dynamicApp.ts | 18 ------------------ maker-frontend/index.html | 3 +-- maker-frontend/vite.config.ts | 19 +++---------------- start_all.sh | 2 +- 6 files changed, 8 insertions(+), 44 deletions(-) delete mode 100644 maker-frontend/dynamicApp.ts diff --git a/.github/workflows/build-release-binary.yml b/.github/workflows/build-release-binary.yml index d683c52..27eb19a 100644 --- a/.github/workflows/build-release-binary.yml +++ b/.github/workflows/build-release-binary.yml @@ -89,7 +89,7 @@ jobs: run: | cd maker-frontend; yarn - APP=maker yarn build + yarn build # Overwrite taker frontend with our new fancy UI - name: Build taker frontend @@ -224,7 +224,3 @@ jobs: --tag ghcr.io/${{ github.repository }}/taker:${{ github.event.release.tag_name }} \ --build-arg BINARY_PATH=taker \ . - - - - diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 876a227..cdbfe43 100644 --- a/.github/workflows/ci.yml +++ b/.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: diff --git a/maker-frontend/dynamicApp.ts b/maker-frontend/dynamicApp.ts deleted file mode 100644 index 1cc3313..0000000 --- a/maker-frontend/dynamicApp.ts +++ /dev/null @@ -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; - }, - }; -} diff --git a/maker-frontend/index.html b/maker-frontend/index.html index 3066105..a89d7ce 100644 --- a/maker-frontend/index.html +++ b/maker-frontend/index.html @@ -7,7 +7,6 @@
- + diff --git a/maker-frontend/vite.config.ts b/maker-frontend/vite.config.ts index d1ad0a5..a4f2301 100644 --- a/maker-frontend/vite.config.ts +++ b/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`, }, }, }); diff --git a/start_all.sh b/start_all.sh index ec0b3b1..5058af4 100755 --- a/start_all.sh +++ b/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) \ No newline at end of file +(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) From dd955d5ce7707675b85f19a97daae9e15fb833f3 Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Thu, 11 Nov 2021 15:52:51 +1030 Subject: [PATCH 2/4] Align vite configuration of the new taker UI - use vitejs/plugin-react-refresh - proxy `/alive` path --- taker-frontend/package.json | 1 + taker-frontend/vite.config.ts | 11 +++++++++-- taker-frontend/yarn.lock | 15 +++++++++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/taker-frontend/package.json b/taker-frontend/package.json index 0853e84..ffda2d6 100644 --- a/taker-frontend/package.json +++ b/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" }, diff --git a/taker-frontend/vite.config.ts b/taker-frontend/vite.config.ts index 1dd36db..4ded139 100644 --- a/taker-frontend/vite.config.ts +++ b/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", }, }, }); diff --git a/taker-frontend/yarn.lock b/taker-frontend/yarn.lock index 624a565..fe244e4 100644 --- a/taker-frontend/yarn.lock +++ b/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" From 9ded2c9be97c7b75f849d5eb033ea666d587de3f Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Thu, 11 Nov 2021 16:08:57 +1030 Subject: [PATCH 3/4] Update README after new taker frontend rollout --- README.md | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index e94895e..e27cd60 100644 --- a/README.md +++ b/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 ``` From 9c5122fc45c54c8b8391a9af6b82b535e09f1650 Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Thu, 11 Nov 2021 17:43:09 +1030 Subject: [PATCH 4/4] Simplify the build release binary workflow Two separate frontend builds were not needed --- .github/workflows/build-release-binary.yml | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/.github/workflows/build-release-binary.yml b/.github/workflows/build-release-binary.yml index 27eb19a..9a56e1e 100644 --- a/.github/workflows/build-release-binary.yml +++ b/.github/workflows/build-release-binary.yml @@ -83,22 +83,13 @@ 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; + cd ${{ matrix.bin }}-frontend; yarn yarn build - # Overwrite taker frontend with our new fancy UI - - name: Build taker frontend - if: matrix.bin == 'taker' - shell: bash - run: | - cd taker-frontend; - yarn - yarn build - name: Build ${{ matrix.target }} ${{ matrix.bin }} release binary run: cargo build --target=${{ matrix.target }} --release --bin ${{ matrix.bin }}