## Project setup

Create a new folder (`my-cli-demo` for example) and use `npm init` command. Answer the questions with default options, except the entry point, which should be changed to `bin/index.js`

```
package name: (cli-demo)
version: (1.0.0)
description:
entry point: (index.js) bin/index.js
test command:
keywords:
author: 
license: (ISC)
```

After that, we can use npm to install the project dependencies for our CLI tool:

```
npm i yargs chalk@~4 && npm i typescript @types/yargs @types/node --save-dev
```

Lastly we need to tell npm that our package has an executable file and since we are using typescript, we should also add a `watch` script, to recompile our code when we make changes. This will allow us to test our CLI tool locally, without having to run a compile command manually every time: 

```json
{
  "name": "my-cli-demo",
  "version": "1.0.0",
  "bin": {
    "my-cli-demo": "bin/index.js" // <- command name of our cli script and the executable file it points to
  },
  "main": "bin/index.js",
  "scripts": {
    "watch": "tsc -w" // <- watch script
  },
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.2",
    "yargs": "^17.7.2"
  },
  "devDependencies": {
    "@types/node": "^20.1.0",
    "@types/yargs": "^17.0.24",
    "typescript": "^5.0.4"
  }
}
```

### Typescript configuration

We should also add a minimal `tsconfig.json`:

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true, // creates d.ts type declarations
    "declarationMap": true, // creates map files for our d.ts files
    "sourceMap": true, // creates map files for our source code
    "outDir": "bin", // compile source code into "bin" folder
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "esModuleInterop": true
  },
  "include": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Parsing command line arguments

It’s time to start writing our CLI script! We’re going to use `yargs` to parse the command line arguments, that can be passed to our CLI tool. Yargs makes it easier to define which command line arguments can be used and it can automatically add documentation for our CLI tool that can be show with the `--help` flag.

Start by creating `src/index.ts` and adding the following contents:

```tsx
#! /usr/bin/env node
import yargs from 'yargs'
import { hideBin } from 'yargs/helpers'

yargs(hideBin(process.argv))
  .help()
  .argv
```

Let’s start by getting our watch script up and running by typing `npm run watch` in a terminal. Now everytime we make a change, our code will be recompiled into the `bin` folder, which is configured as our main entry point. If we open another terminal and run `node . --help`, we should see the following output from our CLI script:

```
Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]
```

## Adding a command module

Yargs allows us to define commands for our CLI tool, for example, we could define an `init` command that gets executed like this:

```
node . init
```

To add a command module, let’s start by creating `src/commands/init.ts` and adding the following content:

```tsx
import { CommandModule, Argv, ArgumentsCamelCase } from 'yargs'
import chalk from 'chalk'

// the builder function can be used to define additional
// command line arguments for our command
function builder(yargs: Argv) {
  return yargs.option('name', {
    alias: 'n',
    string: true
  })
}

// the handler function will be called when our command is executed
// it will receive the command line arguments parsed by yargs
function handler(args: ArgumentsCamelCase) {
  console.log(chalk.green('Hello world!'), args)
}

// name and description for our command module
const init: CommandModule = {
  command: 'init',
  describe: 'Init command',
  builder,
  handler
}

export default init
```

We should also change our `src/index.ts` to let yargs know about our new command module:

```tsx
#! /usr/bin/env node
import yargs from 'yargs'
import { hideBin } from 'yargs/helpers'
import init from './commands/init'

yargs(hideBin(process.argv))
  .command(init) // registers the init command module
  // or to register everything in the commands dir: .commandDir('./commands')
  .demandCommand()
  .help()
  .argv
```

Now if we run `node . init --name Rense`  in our terminal, we will see the following output:

```
Hello world! Rense
```

## Publishing to NPM

To publish our new CLI tool to NPM, we first need to add a git repository. Run the `git init` command in our project root directory and then create a repository on github or any other git host and add the remote url to our project with: `git remote add origin git@github.com:[username]/[repository_name].git` now add our files to the registry with `git add .` and push our initial commit: `git commit -m "init" && git push`.

We will use `np` for publishing, let’s install some additional dependencies to make this happen:

```
npm i np cross-env --save-dev
```

We’re going to add a `release` script to our `package.json`, but we need a way to prevent someone from accidentally running `npm publish` in the root of our project. To achieve this we can create this `prepublish.js` file with the following content:

```jsx
const RELEASE_MODE = !!(process.env.RELEASE_MODE)

if (!RELEASE_MODE) {
  console.log('Run `npm run release` to publish the package')
  process.exit(1)
}
```

Now we can add the following scripts to our `package.json`:

```json
[
  "prepublishOnly": "node prepublish.js",
  "release": "cross-env RELEASE_MODE=true np --no-tests"
]
```

And then run `npm run release` and answer the questions that `np` asks us. The `prePublishOnly` script will prevent anyone from manually running `npm publish`.

## Using our CLI tool

After the CLI tool is published to NPM, we can install it anywhere we want to use it:

```json
npm i my-cli-demo
my-cli-demo init --name Rense
```

## Links

- [Yargs documentation on command modules](https://github.com/yargs/yargs/blob/main/docs/advanced.md#providing-a-command-module)
- [np documentation](https://github.com/sindresorhus/np)
- [Documentation on NPM bin option](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#bin)

Create a new folder (`my-cli-demo` for example) and use `npm init` command. Answer the questions with default options, except the entry point, which should be changed to `bin/index.js`...

Publishing a NodeJS CLI tool to NPM

## What is WebRTC

WebRTC is a web standard for real time communication between two peers (p2p). It allows for streaming data, video and audio using Javascript and the browser API ([`RTCPeerConnection`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) and [`MediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices)).

This is a video (in Dutch) that demonstrates the capabilities of WebRTC for audio broadcasting:

[![WebRTC audio broadcast](https://vumbnail.com/725396499_large.jpg)](https://vimeo.com/725396499 "WebRTC audio broadcast - Click to Watch!")

## Peer discovery
Although WebRTC allows for true peer-to-peer communication, to establish a connection between peers, the peers do need to find eachother and negotiate a peer connection. For this we have to create a "signalling server". For this demo we built a room-based signalling server with NodeJS and socket.io. Peers join a specific room and other peers in that room will be notified once the new peer has joined.
```ts
import { Server, Socket } from  'socket.io'
import { v4 as uuid } from  'uuid'
import express from  'express'
import http from  'http'

const app = express()
const httpServer = http.createServer(app)
const io = new Server(httpServer)

io.use((socket: Socket, next: (err?: any) => void) => {
socket.on('join', ({ roomId }: { roomId:string }, ack) => {
  socket.join(roomId)
  socket.to(roomId).emit('new peer', { remotePeerId: socket.id })
  ack && ack(roomId)
})
socket.on('leave', ({ roomId }: { roomId:string }) => {
  socket.leave(roomId)
  socket.to(roomId).emit('peer left', { remotePeerId: socket.id })
})

const { PORT = '3000' } = process.env
httpServer.listen(Number(PORT), '0.0.0.0', () => console.log(`Server ready at http://0.0.0.0:${PORT}`))
```
## Negotiation phase
Now that our peers can find eachother, they can initiate an `RTCPeerConnection` and negotiate through the signalling server. On the client, the initiation of the `RTCPeerConnection` looks something like this:
```ts
const connections: Record<string, RTCPeerConnection> = {}

socket.on('new peer', ({ remotePeerId }: { remotePeerId:string }) => {
  const connection = new RTCPeerConnection()

  // create an offer for the remote peer when the local peer adds data/audio/video
  connection.onnegotiationneeded = async () => {
    await connection.setLocalDescription(await connection.createOffer())
    socket.emit('description', { to: remotePeerId, ...connection.localDescription })
  }

  // send ice candidates to the remote peer
  connection.onicecandidate = ({ candidate }) => socket.emit('candidate', { to: remotePeerId, ...candidate })
  
  // respond to onDataChannel or onTrack
  // ...
  
  connections[remotePeerId] = connection
})

socket.on('peer left', ({ remotePeerId }: { remotePeerId:string }) => connections[remotePeerId].close())

socket.on('description', async ({ remotePeerId, ...remoteSessionDescription }: RTCSessionDescriptionInit & { remotePeerId: string }) => {
  await connections[remotePeerId].setRemoteDescription(remoteSessionDescription)
  if(remoteSessionDescription.type === 'offer'){
    const answer = connections[remotePeerId].createAnswer()
    socket.emit('description', { to: remotePeerId, ...answer })
  }
})

socket.on('candidate', ({ remotePeerId, ...candidate }: RTCIceCandidate & { remotePeerId: string }) => {
  connections[remotePeerId].addIceCandidate(candidate)
})
```
To forward the negotiation to the correct peer we just need to add the following event handlers in our signalling server:
```ts
socket.on('description', payload => forwardToPeer('description', payload))
socket.on('candidate', payload => forwardToPeer('candidate', payload))

function forwardToPeer(eventType: 'description' | 'candidate', { to, ...payload}: { to: string }) {
  io.to(to).emit(eventType, { remotePeerId: socket.id, ...payload })
}
```
Now if we add a data channel or audio/video track to the `RTCPeerConnection` with `addDataChannel` or `addTrack`. The peers in the room will negotiate peer-to-peer connections with eachother and start receiving data/audio/video from eachother.

Once the peers are connected, in theory we can turn off the signalling server, however, to find new peers that want to connect, we need to keep it running.

WebRTC is a web standard for real time communication between two peers (p2p). It allows for streaming data, video and audio using Javascript and the browser API ([`RTCPeerConnection`](https://develope...

WebRTC prototype

Full-stack Developer @ Bizcuit

Full-stack Developer @ BUX

This project was a proof of concept written in Typescript, using the NS (dutch railroad company) API, to build a travel assistent app that would pro-actively help the user to find the next best connection if they miss their train, or if their selected train was cancelled or delayed.

The backend was built using [NodeJS](/nodejs)/Express and Apollo [GraphQL](/graphql) server and the frontend was made with [React](/react) and [MUI](/mui).

Some code samples and screenshots of the app are available through this gist: [https://gist.github.com/brense/bafdbcf0b656bb101be3ab5c31242ea9](https://gist.github.com/brense/bafdbcf0b656bb101be3ab5c31242ea9)

![](/images/travelassistant.png)

This project was a proof of concept written in Typescript, using the NS (dutch railroad company) API, to build a travel assistent app that would pro-actively help the user to find the next best connec...

Travel Assistant App

![Recipe details](https://media.graphassets.com/output=format:jpg/resize=height:800,fit:max/1pQ7k8wrQoyAhO0zOA5a)

![Overview recipes](https://media.graphassets.com/output=format:jpg/resize=height:800,fit:max/jS5hv2FRKGIk5KLOMmM1)

![Lab measurements report](https://media.graphassets.com/output=format:jpg/resize=height:800,fit:max/IysfE2dZSxuJgYbXGJn7)


Rense Bakker

Full-stack Developer @ Bizcuit

Full-stack Developer @ BUX

Full-stack Developer @ UMC Utrecht