Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #2511

Merged
merged 1 commit into from
Nov 13, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 41 additions & 35 deletions web/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
# StartOS Frontend
# StartOS Web

StartOS has three user interfaces and a shared library, all written in Ionic/Angular/Typescript using an Angular workspace environment:
StartOS web UIs are written in [Angular/Typescript](https://angular.io/docs) and leverage the [Ionic Framework](https://ionicframework.com/) component library.

1. **ui**: the main user interface
1. **install-wizard**: used to install StartOS
1. **setup-wizard**: used to facilitate initial setup
1. **diagnostic-ui**: used to display certain diagnostic information in the event StartOS fails to initialize
1. **marketplace**: abstracted ui elements to search for, list and display details for packages and their dependencies
1. **shared**: contains components, types, and functions shared amongst all of the UIs.
StartOS conditionally serves one of four Web UIs, depending on the state of the system and user choice.
- **install-wizard** - UI for installing StartOS, served on localhost.
- **setup-wizard** - UI for setting up StartOS, served on start.local.
- **diagnostic-ui** - UI to display any error during server initialization, served on start.local.
- **ui** - primary UI for administering StartOS, served on various hosts unique to the instance.

## Development Environment Setup
Additionally, there are two libraries for shared code:
- **marketplace** - library code shared between the StartOS UI and Start9's [brochure marketplace](https://github.com/Start9Labs/brochure-marketplace).
- **shared** - library code shared between the various web UIs and marketplace lib.

- Requirements:
- [Install nodejs](https://nodejs.org/en/)
- [Install npm](https://www.npmjs.com/get-npm)
## Environment Setup

Check your versions
#### Install NodeJS and NPM
- [Install nodejs](https://nodejs.org/en/)
- [Install npm](https://www.npmjs.com/get-npm)

#### Check that your versions match the ones below
```sh
node --version
v18.15.0
Expand All @@ -25,53 +27,57 @@ npm --version
v8.0.0
```

## Running locally with mocks

1. Clone the repository
#### Install and enable the Prettier extension for your text editor

#### Clone StartOS and load the PatchDB submodule if you have not already
```sh
git clone https://github.com/Start9Labs/start-os.git
cd start-os
git submodule update --init --recursive
cd frontend
npm ci
npm run build:deps
```

2. Copy `config-sample.json` and its contents to a new file `config.json`.
#### Move to web directory and install dependencies
```sh
cd web
npm i
npm run build:deps
```

#### Copy `config-sample.json` to a new file `config.json`.
```sh
cp config-sample.json config.json
```

By default, "useMocks" is set to `true`.
Valid values for "maskAs" are `tor` and `lan`.
- By default, "useMocks" is set to `true`.
- Use "maskAs" to mock the host from which the web UI is served. Valid values are `tor`, `local`, and `localhost`.
- Use "maskAsHttps" to mock the protocol over which the web UI is served. `true` means https; `false` means http.

## Running the development server

3. Start the development server(s)
You can develop using mocks (recommended to start) or against a live server. Either way, any code changes will live reload the development server and refresh the browser page.

### Using mocks

#### Start the standard development server
```sh
npm run start:ui
npm run start:install-wiz
npm run start:setup-wizard
npm run start:diagnostic-ui
npm run start:setup
npm run start:dui
npm run start:ui
```

## Running locally with proxied backend
### Proxying to a live server

This section enables you to run a local frontend with a remote backend (eg. hosted on a live Start9 server). It assumes you have completed Step 1 and Step 2 in the [section above](#running-locally-with-mocks)

1. Set `useMocks: false` in `config.json`

2. Create a proxy configuration file from the sample:
#### In `config.json`, set "useMocks" to `false`

#### Copy `proxy.conf-sample.json` to a new file `proxy.conf.json`
```sh
cp proxy.conf-sample.json proxy.conf.json
```

3. Change the target address to desired IP address in `proxy.conf.json`

4. Start the development server
#### Replace every instance of "\<CHANGEME>\" with the hostname of your remote server

#### Start the proxy development server
```sh
npm run start:ui:proxy
```