aboutsummaryrefslogtreecommitdiff
path: root/next-gen-gui/README.md
blob: 4e747ac4544b1df357803c0165d5aac3d4522523 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
# Syncthing Tech UI

## Usage

This is a very bare bones read-only GUI for viewing the status of large
setups. Download a [release
zip](https://github.com/kastelo/syncthing-tech-ui/releases) and unpack it
into the GUI override directory (assuming default Linux setup):

```
$ cd ~/.config/syncthing
$ mkdir -p gui/default
$ cd gui/default
$ unzip ~/tech-ui-v1.0.0.zip
```

Then load the GUI via http://localhost:8384/tech-ui/ or similar. You should see something like this:

![Screenshot](screenshot.png)

## Development server

Run `npm run serve` for a dev server. Navigate to `http://localhost:4200/`. The
app will automatically reload if you change any of the source files.

## Production server

In production we serve the UI through Syncthing itself. The easiest way to
do that is to simply put the built assets in the `gui` subdirectory of
Syncthing's config directory.

```
$ npm run build -- --prod
$ rsync -va --delete dist/tech-ui/ ~/.config/syncthing/gui/default/tech-ui/
```

Adjust for your actual Syncthing config dir if different. Navigate to
`http://localhost:8384/tech-ui/`.

Another option is to start Syncthing with the STGUIASSETS environment
variable pointing to the distribution directory.

```
$ npm run build -- --prod
$ ln -sf . dist/default
$ export STGUIASSETS=$(pwd)/dist
$ syncthing
```

The magic is symlink is because Syncthing will look for the GUI in the
`default` subdirectory. Navigate to `http://localhost:8384/tech-ui/`.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You
can also use `ng generate
directive|pipe|service|class|guard|interface|enum|module`.

## License

MPLv2

## Copyright

Copyright (c) 2020 The Syncthing Authors