mirror of
https://github.com/tlsnotary/tlsn-js.git
synced 2026-01-09 20:47:55 -05:00
829b59df81
* chore: add react/typescript demo and quick start # Conflicts: # package.json * doc: improve quickstart --------- Co-authored-by: Hendrik Eeckhaut <hendrik@eeckhaut.org>
63 lines
1.9 KiB
Markdown
63 lines
1.9 KiB
Markdown
# Quick Start Guide
|
|
|
|
There is a simple react/typescript demo app in `./demo/react-ts-webpack`. The directory contains a webpack configuration file that allows you to quickly bootstrap a webpack app using tlsn-js.
|
|
|
|
## Run a local notary server and websocket proxy
|
|
|
|
### Websocket Proxy <a name="proxy"></a>
|
|
|
|
Since a web browser doesn't have the ability to make TCP connection, we need to use a websocket proxy server.
|
|
|
|
To run your own websockify proxy **locally**, run:
|
|
```sh
|
|
git clone https://github.com/novnc/websockify && cd websockify
|
|
./docker/build.sh
|
|
docker run -it --rm -p 55688:80 novnc/websockify 80 swapi.dev:443
|
|
```
|
|
|
|
Note the `swapi.dev:443` argument on the last line, this is the server we will use in this quick start.
|
|
|
|
### Run a Local Notary Server <a name="local-notary"></a>
|
|
|
|
For this demo, we also need to run a local notary server.
|
|
|
|
1. Clone the TLSNotary repository:
|
|
```shell
|
|
git clone https://github.com/tlsnotary/tlsn.git --branch "v0.1.0-alpha.4"
|
|
```
|
|
2. Edit the notary server config file (`notary-server/config/config.yaml`) to turn off TLS so that the browser extension can connect to the local notary server without requiring extra steps to accept self-signed certificates in the browser.
|
|
```yaml
|
|
tls:
|
|
enabled: false
|
|
```
|
|
3. Run the notary server:
|
|
```shell
|
|
cd notary-server
|
|
cargo run --release
|
|
```
|
|
|
|
The notary server will now be running in the background waiting for connections.
|
|
|
|
## `tlsn-js` in a React/Typescript app
|
|
|
|
### Run the
|
|
1. Clone the repository
|
|
```sh
|
|
git clone https://github.com/tlsnotary/tlsn-js
|
|
```
|
|
2. Go to the demo folder
|
|
```sh
|
|
cd ./tlsn-js/demo/react-ts-webpack
|
|
```
|
|
3. Install dependencies
|
|
```sh
|
|
npm i
|
|
```
|
|
4. Start Webpack Dev Server:
|
|
```
|
|
npm run dev
|
|
```
|
|
5. Open `http://localhost:8080` in your browser
|
|
6. Click the **start demo** button
|
|
7. Open developer tools and monitor the console logs
|