Monorepo (stellar#255)

* Monorepo client + shared works

* Updating build

* Remove build folder

* Server works

* add backend server for sep-10 client attribution

* fix typos in description

* add build command for wallet server

* Set up forked server and client Dockerfiles

* Set demo-wallet-client's node engine version to `>=14`, rather than 14
* Move Dockerfile to Dockerfile-client, switch image from Ubuntu to Node (since we're using that in other areas of SDF to improve reliability of builds
* Create Dockerfile-server, for the server half
* Edit Makefile to do docker-build-client & docker-build-server, docker-push-client & docker-push-server, instead of just one
* Move demo-wallet-client's `yarn start` to `yarn dev`, since `yarn start` should be a prod-ready command

* Adjust Dockerfiles for proper Husky invocation and shared build

* whitespace change to poke previews

* update stellar.toml signing key

* add env vars to client dockerfile, remove unused scripts from client package.json

* add env vars to Makefile for docker-build-client

* trigger build

* trigger build

* trigger build

* trigger build

* trigger build

* trigger build

* remove unused env variables from docker file, address comments

Co-authored-by: stfung77 <[email protected]>
Co-authored-by: Trevor Robinson <[email protected]>

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+*/**/node_modules
 /.pnp
 .pnp.js
 
@@ -10,6 +11,8 @@
 
 # production
 /build
+*/**/dist
+*/**/build
 
 # distributions
 /dist
@@ -18,10 +21,11 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+/packages/*/.env
+/packages/*/.env.local
+/packages/*/.env.development.local
+/packages/*/.env.test.local
+/packages/*/.env.production.local
 
 npm-debug.log*
 yarn-debug.log*

Dockerfile-client

@@ -0,0 +1,21 @@
+FROM node:16 as build
+
+MAINTAINER SDF Ops Team <[email protected]>
+
+WORKDIR /app
+
+ARG REACT_APP_CLIENT_DOMAIN
+ENV REACT_APP_CLIENT_DOMAIN $REACT_APP_CLIENT_DOMAIN
+
+ARG REACT_APP_WALLET_BACKEND_ENDPOINT
+ENV REACT_APP_WALLET_BACKEND_ENDPOINT $REACT_APP_WALLET_BACKEND_ENDPOINT
+
+COPY . /app/
+RUN yarn workspace demo-wallet-client install
+RUN yarn build:shared
+RUN yarn build:client
+
+# Copy the compiled static files out to an Nginx container, since we don't need any of the Node files.
+FROM nginx:1.17
+COPY --from=build /app/packages/demo-wallet-client/build/ /usr/share/nginx/html/
+COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile-server

@@ -0,0 +1,17 @@
+FROM node:16 as build
+
+MAINTAINER SDF Ops Team <[email protected]>
+
+WORKDIR /app
+
+COPY . /app/
+RUN yarn workspace demo-wallet-server install
+RUN yarn build:shared
+RUN yarn build:server
+
+# Copy it all to a clean image to avoid cache artifacts elsewhere in the image
+FROM node:16
+COPY --from=build /app /app
+WORKDIR /app
+
+CMD ["yarn", "start:server"]

Makefile

@@ -4,13 +4,22 @@ SUDO := $(shell docker version >/dev/null 2>&1 || echo "sudo")
 # If LABEL is not provided set default value
 LABEL ?= $(shell git rev-parse --short HEAD)$(and $(shell git status -s),-dirty-$(shell id -u -n))
 # If TAG is not provided set default value
-TAG ?= stellar/stellar-demo-wallet:$(LABEL)
+SERVER_TAG ?= stellar/stellar-demo-wallet-server:$(LABEL)
+CLIENT_TAG ?= stellar/stellar-demo-wallet-client:$(LABEL)
 # https://github.com/opencontainers/image-spec/blob/master/annotations.md
 BUILD_DATE := $(shell date -u +%FT%TZ)
 
-docker-build:
-	$(SUDO) docker build --pull --label org.opencontainers.image.created="$(BUILD_DATE)" \
-	--build-arg REACT_APP_AMPLITUDE_KEY=$(AMPLITUDE_KEY) --build-arg REACT_APP_SENTRY_KEY=$(SENTRY_KEY) -t $(TAG) .
+docker-build-server:
+	$(SUDO) docker build -f Dockerfile-server --pull --label org.opencontainers.image.created="$(BUILD_DATE)" \
+	-t $(SERVER_TAG) .
 
-docker-push:
-	$(SUDO) docker push $(TAG)
+docker-push-server:
+	$(SUDO) docker push $(SERVER_TAG)
+
+docker-build-client:
+	$(SUDO) docker build -f Dockerfile-client --pull --label org.opencontainers.image.created="$(BUILD_DATE)" \
+	--build-arg REACT_APP_CLIENT_DOMAIN=$(REACT_APP_CLIENT_DOMAIN) --build-arg REACT_APP_WALLET_BACKEND_ENDPOINT=$(REACT_APP_WALLET_BACKEND_ENDPOINT) \
+	-t $(CLIENT_TAG) .
+
+docker-push-client:
+	$(SUDO) docker push $(CLIENT_TAG)

README.md

@@ -107,16 +107,28 @@ To start building with this project clone this repo and install the deps:
 yarn install
 ```
 
+create a **.env** file in *packages/demo-wallet-client* with the **REACT_APP_CLIENT_DOMAIN** 
+(where stellar.toml is hosted) and the wallet backend **REACT_APP_WALLET_BACKEND_ENDPOINT**
+
+NOTE: if using a locally running test anchor (in docker) use *docker.for.mac.host.internal*,
+this will allow the anchor that's running in a docker container to access the host network where
+the client domain (server hosting the stellar.toml) is running.
+ex:
+```
+REACT_APP_CLIENT_DOMAIN = docker.for.mac.host.internal:7000
+REACT_APP_WALLET_BACKEND_ENDPOINT = http://demo-wallet-server.stellar.org
+```
+
 and run:
 
 ```bash
-yarn start
+yarn start:client
 ```
 
 To build the app for production, run:
 
 ```bash
-yarn build
+yarn build:client
 ```
 
 ---

package.json

@@ -1,108 +1,21 @@
 {
-  "name": "stellar-demo-wallet",
-  "version": "1.2.4",
-  "description": "Stellar Demo Wallet",
-  "repository": "https://github.com/stellar/stellar-demo-wallet",
-  "license": "Apache-2.0",
-  "engines": {
-    "node": "14.x"
-  },
-  "lint-staged": {
-    "src/**/*.ts?(x)": [
-      "eslint --fix --max-warnings 0"
-    ]
-  },
-  "dependencies": {
-    "@reduxjs/toolkit": "^1.6.2",
-    "@stellar/design-system": "^0.4.1",
-    "@stellar/frontend-helpers": "^2.1.3",
-    "@stellar/prettier-config": "^1.0.1",
-    "@stellar/wallet-sdk": "^0.5.0-rc.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.2.1",
-    "bignumber.js": "^9.0.1",
-    "crypto": "^1.0.1",
-    "dompurify": "^2.3.3",
-    "html-react-parser": "^1.4.0",
-    "lodash": "^4.17.21",
-    "marked": "^3.0.4",
-    "node-sass": "^6.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-json-view": "^1.21.3",
-    "react-redux": "^7.2.5",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "redux": "^4.1.1",
-    "stellar-sdk": "^9.0.0-beta.1",
-    "styled-components": "^5.3.1",
-    "toml": "^3.0.0",
-    "tslib": "^2.3.1",
-    "typescript": "~4.4.3",
-    "web-vitals": "^2.1.0"
-  },
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "prod:build": "docker image build --build-arg REACT_APP_AMPLITUDE_KEY=$AMPLITUDE_KEY --build-arg REACT_APP_SENTRY_KEY=$SENTRY_KEY -t stellar-demo-wallet:localbuild .",
-    "prod:serve": "docker run -p 8000:80 stellar-demo-wallet:localbuild",
-    "production": "yarn prod:build && yarn prod:serve",
-    "prepare": "husky install",
-    "pre-commit": "concurrently 'pretty-quick --staged' 'lint-staged' 'tsc --noEmit'"
+    "build:client": "yarn workspace demo-wallet-client build",
+    "build:shared": "yarn workspace demo-wallet-shared build",
+    "build:server": "yarn workspace demo-wallet-server build",
+    "build": "run-s build:shared build:client",
+    "start:client": "yarn workspace demo-wallet-client start",
+    "start:shared": "yarn workspace demo-wallet-shared start",
+    "start:server": "yarn workspace demo-wallet-server start",
+    "clean": "rm -rf node_modules && rm -rf */**/node_modules && rm -rf */**/build"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@stellar/eslint-config": "^2.1.1",
-    "@stellar/tsconfig": "^1.0.2",
-    "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.175",
-    "@types/marked": "^3.0.1",
-    "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
-    "@types/react-copy-to-clipboard": "^5.0.1",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-redux": "^7.1.18",
-    "@types/react-router-dom": "^5.1.9",
-    "@types/redux": "^3.6.0",
-    "@types/styled-components": "^5.1.14",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "concurrently": "^6.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react": "^1.1.7",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^6.1.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsdoc": "^36.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^7.0.2",
-    "lint-staged": "^11.2.0",
-    "prettier": "^2.4.1",
-    "pretty-quick": "^3.1.1"
+  "dependencies": {
+    "demo-wallet-shared": "^1.0.0",
+    "npm-run-all": "^4.1.5",
+    "stellar-sdk": "^9.1.0"
   }
 }