-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update README for ui development. (#146)
* Update README for ui development.
- Loading branch information
Andre Giron
authored
Jun 27, 2022
1 parent
da62a9f
commit e9b2387
Showing
1 changed file
with
61 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |