tailscale/cmd/tsconnect/README.md

# tsconnect

The tsconnect command builds and serves the static site that is generated for
the Tailscale Connect JS/WASM client.

## Development

To start the development server:

```
./tool/go run ./cmd/tsconnect dev
```

The site is served at http://localhost:9090/. JavaScript, CSS and Go `wasm` package changes can be picked up with a browser reload. Server-side Go changes require the server to be stopped and restarted. In development mode the state the Tailscale client state is stored in `sessionStorage` and will thus survive page reloads (but not the tab being closed).

## Deployment

To build the static assets necessary for serving, run:

```
./tool/go run ./cmd/tsconnect build
```

To serve them, run:

```
./tool/go run ./cmd/tsconnect serve
```

By default the build output is placed in the `dist/` directory and embedded in the binary, but this can be controlled by the `-distdir` flag. The `-addr` flag controls the interface and port that the serve listens on.

# Library / NPM Package

The client is also available as [an NPM package](https://www.npmjs.com/package/@tailscale/connect). To build it, run:

```
./tool/go run ./cmd/tsconnect build-pkg
```

That places the output in the `pkg/` directory, which may then be uploaded to a package registry (or installed from the file path directly).

To do two-sided development (on both the NPM package and code that uses it), run:

```
./tool/go run ./cmd/tsconnect dev-pkg

```

This serves the module at http://localhost:9090/pkg/pkg.js and the generated wasm file at http://localhost:9090/pkg/main.wasm. The two files can be used as drop-in replacements for normal imports of the NPM module.
cmd/tsconnect: add README with instructions Outlines basic development, build and serving workflows. Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago			`# tsconnect`

			`The tsconnect command builds and serves the static site that is generated for`
			`the Tailscale Connect JS/WASM client.`

			`## Development`

			`To start the development server:`

			```
			`./tool/go run ./cmd/tsconnect dev`
			```

cmd/tsconnect: use empty string as the default state store key Makes the Wasm client more similar to the others, and allows the default profile to be correctly picked up when restarting the client in dev mode (where we persist the state in sessionStorage). Also update README to reflect that Go wasm changes can be picked up with just a reload (as of #5383) Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago			The site is served at http://localhost:9090/. JavaScript, CSS and Go `wasm` package changes can be picked up with a browser reload. Server-side Go changes require the server to be stopped and restarted. In development mode the state the Tailscale client state is stored in `sessionStorage` and will thus survive page reloads (but not the tab being closed).
cmd/tsconnect: add README with instructions Outlines basic development, build and serving workflows. Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago
			`## Deployment`

			`To build the static assets necessary for serving, run:`

			```
			`./tool/go run ./cmd/tsconnect build`
			```

			`To serve them, run:`

			```
			`./tool/go run ./cmd/tsconnect serve`
			```

			By default the build output is placed in the `dist/` directory and embedded in the binary, but this can be controlled by the `-distdir` flag. The `-addr` flag controls the interface and port that the serve listens on.
cmd/tsconnect: extract NPM package for reusing in other projects `src/` is broken up into several subdirectories: - `lib/` and `types`/ for shared code and type definitions (more code will be moved here) - `app/` for the existing Preact-app - `pkg/` for the new NPM package A new `build-pkg` esbuild-based command is added to generate the files for the NPM package. To generate type definitions (something that esbuild does not do), we set up `dts-bundle-generator`. Includes additional cleanups to the Wasm type definitions (we switch to string literals for enums, since exported const enums are hard to use via packages). Also allows the control URL to be set a runtime (in addition to the current build option), so that we don't have to rebuild the package for dev vs. prod use. Updates #5415 Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago
			`# Library / NPM Package`

cmd/tsconnect: add README to generated NPM package Makes the landing page at https://www.npmjs.com/package/@tailscale/connect look slightly nicer. Fixes #5976 Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago			`The client is also available as [an NPM package](https://www.npmjs.com/package/@tailscale/connect). To build it, run:`
cmd/tsconnect: extract NPM package for reusing in other projects `src/` is broken up into several subdirectories: - `lib/` and `types`/ for shared code and type definitions (more code will be moved here) - `app/` for the existing Preact-app - `pkg/` for the new NPM package A new `build-pkg` esbuild-based command is added to generate the files for the NPM package. To generate type definitions (something that esbuild does not do), we set up `dts-bundle-generator`. Includes additional cleanups to the Wasm type definitions (we switch to string literals for enums, since exported const enums are hard to use via packages). Also allows the control URL to be set a runtime (in addition to the current build option), so that we don't have to rebuild the package for dev vs. prod use. Updates #5415 Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago
			```
			`./tool/go run ./cmd/tsconnect build-pkg`
			```

			That places the output in the `pkg/` directory, which may then be uploaded to a package registry (or installed from the file path directly).
cmd/tsconnect: add dev-pkg command for two-sided development Allows imports of the NPM package added by 1a093ef4822b973ec86d481924690349eddba5cb to be replaced with import("http://localhost:9090/pkg/pkg.js"), so that changes can be made in parallel to both the module and code that uses it (without any need for NPM publishing or even building of the package). Updates #5415 Signed-off-by: Mihai Parparita <mihai@tailscale.com> 2 years ago
			`To do two-sided development (on both the NPM package and code that uses it), run:`

			```
			`./tool/go run ./cmd/tsconnect dev-pkg`

			```

			`This serves the module at http://localhost:9090/pkg/pkg.js and the generated wasm file at http://localhost:9090/pkg/main.wasm. The two files can be used as drop-in replacements for normal imports of the NPM module.`