# Clock websocket React/TS UI

Web interface for websocket clock server writter in typescript/react.

Display a clock with possibility of changing timezone and adding alarms
producing notifications using the JS Notifications API.

Example deployment [here](https://yannweb.net/wsclock/).

## TODO

Replace the timezone update text input by two HTML selects, allowing to choose
a continent and a city from selected continent. To implement this feature, the
websocket server should implement a command returning a list of all available
timezones.

Add some tests, using jest ?

## Deployment

### Configure & build

Install dependencies
`npm install`

Change the `WS_URL` value according to server deployment configuration.
`edit src/config.json`

Create an optimized production build
`npm run build`

Copy `./build` to webserver's (`/var/www/clock`).

### Nginx webserver configuration

Install nginx
`apt install nginx`

Create server configuration
```
rm /etc/nginx/site-enabled/default
edit /etc/nginx/sites-available/clock
ln -s /etc/nginx/sites-available/clock /etc/nginx/sites-enabled/
```

*Example server config :*
```
server {
	listen 80 default_server;
	listen [::]:80 default_server;

	root /var/www/clock/;

	index index.html;

	server_name _;

	location / {
		try_files $uri $uri/ =404;
	}
}
```

## Start a development server

`npm run start`