wsclock_front

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.

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