From e9b238717e1572c495357eee6505069462dfde96 Mon Sep 17 00:00:00 2001
From: Andre Giron <andre@spiralai.co>
Date: Mon, 27 Jun 2022 12:57:50 -0700
Subject: [PATCH] Update README for ui development. (#146)

* Update README for ui development.
---
 src/ui/README.md | 70 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/ui/README.md b/src/ui/README.md
index 8e1766c03..fe0c98e64 100644
--- a/src/ui/README.md
+++ b/src/ui/README.md
@@ -1,17 +1,69 @@
 # Aqueduct UI
 
 The Aqueduct UI is implemented in Next.js. Once you've installed the Aqueduct
-package, you can start the UI by running `aqueduct ui`.
+package, you can start the UI by running `aqueduct start`.
 
 The code here is organized into two directories -- a component library in
-`components/` that is published to npm, and an application server in `app/`
-that consumes `components/`.
+`common/` that is published to npm as a package called `@aqueducthq/common`, and an application server in `app/`
+that consumes `@aqueducthq/common`.
 
-If you're actively developing the UI, you will need to copy the `.env.local` file 
-to `/app` from `~/.aqueduct/ui/app`. If you are exposing the ui at a public IP, make
+If you're actively developing the UI, you will need create a file called ```.env.local``` in the root of `src/ui/app/`.
+
+This file should contain the following:
+
+```SERVER_ADDRESS=http://localhost:8080```
+
+If you are exposing the ui at a public IP, make
 sure to update the `SERVER_ADDRESS` field accordingly (e.g. 
-`SERVER_ADDRESS=3.142.105.48:8080`). Then, you can start the Next.js server in dev 
-mode by running `make dev`. Note that this will symlink your local version of
-the `components/` directory to pick up any changes you might have made. 
+`SERVER_ADDRESS=3.142.105.48:8080`). 
+
+## Development Guide
+
+### Node and npm versions
+We use [nvm](https://github.com/nvm-sh/nvm) to manage node.js and npm versions.
+
+For convenience, we have added a .nvmrc file at the root of the ui folder to make sure all developers use the same
+version of node.js.
+
+To use the .nvmrc, from the ```src/ui```, simply run:
+
+```nvm use```
+
+### Installing Dependencies
+
+Since ```common/``` is used throughout the ```app/``` project, you must first install dependencies in common and link
+to the package with npm.
+
+### 1. Install @aqueducthq/common's dependencies:
+
+```cd src/ui/common```
+
+```npm install```
+
+The install command above will both install dependencies to node_modules and build a JavaScript bundle to be used by ```app```
+
+```npm link```
+
+The link command above will create a symlink to your local ```@aqueducthq/common``` package which will be used in ```app```.
+
+### 2. Install app's dependencies:
+
+```cd src/ui/app```
+
+```npm link @aqueducthq/common```
+
+The link command above will install the @aqueducthq/common package that was symlinked via ```npm link``` and will also install
+the remaining dependencies for ```app```.
+
+### Active development:
+To enable local development with automatic reloading, open up two terminal windows and do the following:
+
+In the first terminal window, navigate to ```src/ui/common``` and run:
+
+```npm run watch```
+
+Finally, in the second terminal window navigate to ```src/ui/app``` and run:
+
+```npm run start```
 
-More details coming soon!
+You should now be able to edit files in both ```common``` and ```app``` and see changes reflected live.
\ No newline at end of file