User management example

.github/workflows/deploy.yml

@@ -28,3 +28,5 @@ jobs:
       - run: make test
       - run: make deploy-rectangle-server
       - run: make deploy-rectangle-ui
+      - run: make deploy-usermanagement-server
+      - run: make deploy-usermanagement-ui

Dockerfile.rectangle-server

@@ -3,7 +3,8 @@ FROM node:16
 ENV PORT 8080
 WORKDIR /blueprint
 COPY . .
-RUN make install
-RUN make build 
+RUN make install-core
+RUN make build-core
+RUN cd examples/rectangle && make install && make build && cd ..;
 EXPOSE 8080
 CMD cd examples/rectangle; make run-server-prod;

Dockerfile.rectangle-ui

@@ -3,7 +3,8 @@ FROM node:16
 ENV PORT 3000
 WORKDIR /blueprint
 COPY . .
-RUN make install
-RUN make build
+RUN make install-core
+RUN make build-core
+RUN cd examples/rectangle && make install && make build && cd ..;
 EXPOSE 3000
 CMD cd examples/rectangle; make run-ui-prod;

Dockerfile.usermanagement-server

@@ -0,0 +1,10 @@
+FROM node:16
+# ENV NODE_ENV=production
+ENV PORT 8080
+WORKDIR /blueprint
+COPY . .
+RUN make install-core
+RUN make build-core
+RUN cd examples/userManagement && make install && make build && cd ..;
+EXPOSE 8080
+CMD cd examples/userManagement; make run-server-prod;

Dockerfile.usermanagement-ui

@@ -0,0 +1,10 @@
+FROM node:16
+# ENV NODE_ENV=production
+ENV PORT 3000
+WORKDIR /blueprint
+COPY . .
+RUN make install-core
+RUN make build-core
+RUN cd examples/userManagement && make install && make build && cd ..;
+EXPOSE 3000
+CMD cd examples/userManagement; make run-ui-prod;

Makefile

@@ -1,6 +1,12 @@
 install:
 	bash ./scripts/install.sh
 
+install-core:
+	bash ./scripts/installCore.sh
+
+build-core:
+	bash ./scripts/buildCore.sh
+
 build:
 	bash ./scripts/build.sh
 
@@ -29,4 +35,16 @@ deploy-rectangle-ui:
 	docker build -f Dockerfile.rectangle-ui --tag rectangle-ui .
 	docker tag rectangle-ui us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/rectangle-ui:latest
 	docker push us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/rectangle-ui
-	gcloud run deploy rectangle-ui --project=blueprint-8675309 --memory=2Gi --image=us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/rectangle-ui:latest --port=3000 --min-instances=1 --max-instances=1 --region=us-central1 --allow-unauthenticated
+	gcloud run deploy rectangle-ui --project=blueprint-8675309 --memory=2Gi --image=us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/rectangle-ui:latest --port=3000 --min-instances=1 --max-instances=1 --region=us-central1 --allow-unauthenticated
+
+deploy-usermanagement-server:
+	docker build -f Dockerfile.usermanagement-server --tag usermanagement-server .
+	docker tag usermanagement-server us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-server:latest
+	docker push us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-server
+	gcloud run deploy usermanagement-server --project=blueprint-8675309 --memory=2Gi --image=us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-server:latest --port=8080 --min-instances=1 --max-instances=1 --region=us-central1 --allow-unauthenticated
+
+deploy-usermanagement-ui:
+	docker build -f Dockerfile.usermanagement-ui --tag usermanagement-ui .
+	docker tag usermanagement-ui us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-ui:latest
+	docker push us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-ui
+	gcloud run deploy usermanagement-ui --project=blueprint-8675309 --memory=2Gi --image=us-central1-docker.pkg.dev/blueprint-8675309/blueprint-websites/usermanagement-ui:latest --port=3000 --min-instances=1 --max-instances=1 --region=us-central1 --allow-unauthenticated

README.md

@@ -1,4 +1,96 @@
-# blueprint
-The ergonomic web application framework
+# Blueprint
+*The ergonomic web application framework*
 
-Documentation site: https://blueprint-docs.readthedocs.io/en/latest/
+Blueprint is a full-stack web application framework. It combines server and frontend state/events into a single push-based architecture. This approach streamlines state management, synchronizing data, and ui reactivity.
+
+## Simple Example
+
+```
+//server
+import {app, state, task, from} from "blueprint-server";
+const area = (width: number, height: number) =>
+  width * height;
+
+const myApp = app(() => {
+  const width$ = state("width", 10);
+  const height$ = state("height", 15);
+  const area$ = task(from(area, width$, height$));
+
+  return {
+    name: "myApp",
+    state: [width$, height$],
+    events: [],
+    tasks: [area$]
+  };
+});
+
+const bp = create({myApp});
+bp.serve();
+```
+
+```
+//ui
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {app, state, task, Blueprint} from "blueprint-server";
+
+const MyApp = app("myApp");
+const useWidth = state<number>("myApp", "width");
+const useHeight = state<number>("myApp", "height");
+const useArea = task<number>("myApp", "area")
+
+const UI = () => {
+  const [width, setWidth] = useWidth();
+  const [height, setHeight] = useHeight();
+  const [area] = useArea();
+
+
+  return (
+    <MyApp>
+      <input defaultValue={width} onChange={e => setWidth(e.target.value)} />
+      <input defaultValue={height} onChange={e => setHeight(e.target.value)} />
+      <div>Area of Rectangle: {area}</div>
+    </MyApp>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <Blueprint>
+    <UI />
+  </Blueprint>
+);
+```
+
+**Result:**
+<iframe src="https://rectangle-ui-7y67ff2sba-uc.a.run.app/myApp" frameBorder=0 style="background-color:#f8f8f8;border:1px solid #e1e4e5;width:100%;"></iframe>
+<br />
+**Diagram:**
+<iframe src="https://rectangle-ui-7y67ff2sba-uc.a.run.app/__blueprint__?sheet=myApp" frameBorder=0 width="100%" height="300px" style="background-color:#f8f8f8;border:1px solid #e1e4e5;width:100%;"></iframe>
+<br />
+
+## Quick Start
+
+The fastest way to get started is to spin up the helloWorld app.
+
+```
+wget https://raw.githubusercontent.com/steaks/blueprint-templates/main/createBlueprint.sh
+chmod +x createBlueprint.sh
+./createBlueprint.sh -t helloWorld MyApp
+cd MyApp
+make install
+make build
+make run-server
+make run-ui #in separate terminal
+```
+
+Visit [http://localhost:3000](http://localhost:3000) to view your app.<br/>
+Visit [http://localhost:3000/__blueprint__](http://localhost:3000/__blueprint__) to view the architecture diagram.
+
+## Contributing
+
+Blueprint welcomes all contributors. Contributions can take many forms - bug fixes, enhancements, tests, issues, feedback, etc. Please reach out to Steven at [email protected].
+
+## Links
+
+- Documentation: https://blueprint-docs.readthedocs.io

clients/react/package.json

@@ -1,21 +1,21 @@
 {
   "name": "blueprint-react",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.15",
   "main": "./build/index.js",
   "types": "./build/types.d.ts",
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "dependencies": {
+    "@typed-mxgraph/typed-mxgraph": "^1.0.6",
     "mxgraph": "^4.2.2",
     "typescript": "^4.7.3",
     "socket.io-client": "^4.7.4"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.2",
-    "@typed-mxgraph/typed-mxgraph": "^1.0.6",
     "@types/jest": "^28.1.4",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",

clients/react/src/client.tsx

@@ -1,11 +1,15 @@
-import React, {useState, useEffect, useCallback} from "react";
+import React, {useState, useEffect, useCallback, useRef} from "react";
 import {BlueprintConfig, Props, Connection, ConnectionType} from "../types";
 import {io} from "socket.io-client";
+import {Diagram} from "./diagram";
 
 let connection = null as Connection | null;
 let connectionId = null as string | null;
 let connectionP = null as null | Promise<null>;
 
+const isDiagramRoute = () =>
+  window.location.pathname.startsWith("/__blueprint__");
+
 const addListener = <V, >(name: string, onMessage: (data: MessageEvent | V) => void) => {
   console.log(`Add listener ${name}`);
   const c = connection!;
@@ -94,7 +98,9 @@ export const Blueprint = (p: BlueprintConfig) => {
     });
   }, [uri]);
 
-  if (initialized) {
+  if (initialized && isDiagramRoute()) {
+    return <Diagram />
+  } else if (initialized) {
     return <>{p.children}</>
   }
   return <></>;