Updated @envy/browser start commands and README (#50)

Co-authored-by: Charles Brown <[email protected]>
FormidableLabs · Sep 19, 2023 · 5a0254b · 5a0254b
1 parent 9c6780b
commit 5a0254b
Show file tree

Hide file tree

Showing 14 changed files with 452 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,6 +40,7 @@ jspm_packages/
 # build output
 .turbo
 dist
+bin
 .vscode
 .parcel-cache
 
@@ -52,4 +53,4 @@ dist
 
 # examples/next.js
 **/.next/
-**/next-env.d.ts
+**/next-env.d.ts
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,180 @@
+# Contributing
+
+- [How to Contribute](#how-to-contribute)
+- [Development](#development)
+- [Release](#release)
+- [Code of Conduct](#contributor-covenant-code-of-conduct)
+
+## How to Contribute
+
+Envy is open to pull requests, issue reports, and questions from the community. Here are some good ways to get help if you need it.
+
+- If you have a question, please [open a new Q&A discussion thread](https://github.com/FormidableLabs/envy/discussions/new)
+- If you think you have found a bug, [open a new issue](https://github.com/FormidableLabs/envy/issues/new)
+
+### Current goals and initiatives
+
+We are currently working toward our first 1.0 release. As such, current features and APIs should be considered experimental and may rapidly change.
+
+## Development
+
+Envy is a monorepo managed by [Yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) and commands are executed using [TurboRepo](https://turbo.build/repo/docs)
+
+### Requirements
+
+- [Node.js](https://nodejs.org/) 16 or higher.
+- [yarn](https://yarn.io/) 1.2 or higher.
+
+### Setup
+
+Clone this repo:
+
+```sh
+$ git clone https://github.com/FormidableLabs/envy.git
+$ cd envy
+```
+
+Use [yarn](https://classic.yarnpkg.com/) to install dependencies:
+
+```sh
+$ yarn install
+```
+
+### Builds
+
+To typecheck and build all applications, execute this from root
+
+```
+yarn build
+```
+
+### Running examples
+
+To run examples for testing, execute a build and then running an example command
+
+```sh
+$ yarn example:apollo
+```
+
+## Release
+
+We use [changesets](https://github.com/changesets/changesets) to create package versions and publish them.
+
+### Using changesets
+
+Our official release path is to use automation to perform the actual publishing of our packages. The steps are to:
+
+1. A human developer adds a changeset. Ideally this is as a part of a PR that will have a version impact on a package.
+2. On merge of a PR our automation system opens a "Version Packages" PR.
+3. On merging the "Version Packages" PR, the automation system publishes the packages.
+
+Here are more details:
+
+### Add a changeset
+
+When you would like to add a changeset (which creates a file indicating the type of change), in your branch/PR issue this command:
+
+```sh
+$ yarn changeset
+```
+
+to produce an interactive menu. Navigate the packages with arrow keys and hit `<space>` to select 1+ packages. Hit `<return>` when done. Select semver versions for packages and add appropriate messages. From there, you'll be prompted to enter a summary of the change. Some tips for this summary:
+
+1. Aim for a single line, 1+ sentences as appropriate.
+2. Include issue links in GH format (e.g. `#123`).
+3. You don't need to reference the current pull request or whatnot, as that will be added later automatically.
+
+After this, you'll see a new uncommitted file in `.changesets` like:
+
+```sh
+$ git status
+# ....
+Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+	.changeset/flimsy-pandas-marry.md
+```
+
+Review the file, make any necessary adjustments, and commit it to source. When we eventually do a package release, the changeset notes and version will be incorporated!
+
+### Creating versions
+
+On a merge of a feature PR, the changesets GitHub action will open a new PR titled `"Version Packages"`. This PR is automatically kept up to date with additional PRs with changesets. So, if you're not ready to publish yet, just keep merging feature PRs and then merge the version packages PR later.
+
+### Publishing packages
+
+On the merge of a version packages PR, the changesets GitHub action will publish the packages to npm.
+
+## Contributor Covenant Code of Conduct
+
+### Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of
+experience, nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+### Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+### Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+### Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/README.md b/README.md
@@ -1,36 +1,111 @@
-[![Envy — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/envy/main/envy-hero.png)](https://formidable.com/open-source/envy)
+<div align="center">
+  <a href="https://formidable.com/open-source/" target="_blank">
+    <img alt="Envy — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/envy/main//envy-hero.png" />
+  </a>
+
+  <strong>
+    Zero Config Node.js Telemetry &amp; Network Viewer
+  </strong>
+
+  <br />
+  <br />
+</div>
 
 # Envy
 
-Zero Config Node.js Telemetry &amp; Network Viewer
+## Contents
 
-## Usage
+- [Getting Started](#getting-started)
+- [Contributing](#contributing)
 
-Install the Envy ecosystem in your project using `yarn`, `npm`, or your favorite tool.
+## Getting Started
 
+### 1. Install the Envy Browser to view application telemetry in your browser
+
+```sh
+# npm
+$ npm i --save-dev @envy/browser
+# or yarn
+$ yarn add --dev @envy/browser
 ```
-yarn add @envy/node @envy/browser
-```
 
-Import the tracing package into your applications entry point. These lines must be at the top of the file prior to any other import statements.
+### 2. Install a telemetry package for your application
+
+- [Node.js Application](#nodejs-application)
+- [Web Client Application](#web-client-application)
+
+### 3. Run the browser and start collecting telemetry
+
+Run the browser in a seperate terminal session
 
 ```
-import { enableTracing } from '@envy/node';
-enableTracing({ serviceName: 'name-of-your-app' });
+npx @envy/browser
+```
+
+or optionally, add it to your NPM scripts using a tool like [concurrently](https://www.npmjs.com/package/concurrently)
+
+```json
+"scripts": {
+  "start": "<your application start command>",
+  "start:withenvy": "concurrently \"npx @envy/browser\" \"npm start\""
+},
 ```
 
-Start your application and then launch the `@envy/browser` in a new terminal to start viewing network traces
+## Available Telemetry Packages
+
+### Node.js Application
+
+Install the `@envy/node` sender package in your node application:
 
+```sh
+# npm
+$ npm i --save-dev @envy/node
+# or yarn
+$ yarn add --dev @envy/node
 ```
-npx start @envy/browser
+
+Import and invoke the `enableTracing` function to the root of your app before any other code.
+
+```ts
+import { enableTracing } from '@envy/node';
+enableTracing({ serviceName: 'your-node-app-name' });
+
+// ... your app code
 ```
 
-## Development
+### Web Client Application
 
-Builds are executed using [TurboRepo](https://turbo.build/repo/docs) by running the following command
+Install the `@envy/web` sender package in your website:
 
+```sh
+# npm
+$ npm i --save-dev @envy/web
+# or yarn
+$ yarn add --dev @envy/web
 ```
-$ yarn build
+
+Import the `enableTracing` function to the root of your app, and invoke it before mounting your application.
+
+For example, in a simple React application:
+
+```ts
+import { enableTracing } from '@envy/web';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+
+const container = document.getElementById('app');
+const root = createRoot(container);
+
+enableTracing({ serviceName: 'your-website-name' }).then(() => {
+  root.render(<App />);
+});
 ```
 
-and packages are automatically linked using [Yarn](https://classic.yarnpkg.com/lang/en/docs/workspaces/)
+## Contributing
+
+Please see the [Contributing guide](CONTRIBUTING.md).
+
+## Maintenance Status
+
+**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
diff --git a/examples/apollo-client/src/index.js b/examples/apollo-client/src/index.js
@@ -6,6 +6,6 @@ import { App } from './App';
 const container = document.getElementById('app');
 const root = createRoot(container);
 
-enableTracing({ serviceName: 'examples/apollo-client', debug: true, port: 9999 }).then(() => {
+enableTracing({ serviceName: 'examples/apollo-client' }).then(() => {
   root.render(<App />);
 });
diff --git a/examples/apollo/package.json b/examples/apollo/package.json
@@ -5,10 +5,11 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "ts-node ./src/index.ts"
+    "start": "concurrently \"npx @envy/browser\" \"ts-node ./src/index.ts\""
   },
   "dependencies": {
     "@apollo/server": "^4.9.3",
+    "@envy/browser": "*",
     "@envy/node": "*",
     "@sanity/client": "^4.0.1",
     "apollo-utilities": "^1.3.4",

diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -5,16 +5,19 @@
   "source": [
     "src/index.html"
   ],
+  "bin": {
+    "envy": "bin/start.cjs"
+  },
   "type": "module",
   "repository": "https://github.com/FormidableLabs/envy.git",
   "license": "MIT",
   "scripts": {
-    "start": "concurrently \"yarn start:wss\" \"yarn start:ui\"",
-    "start:wss": "node ./src/scripts/startCollector.cjs",
-    "start:ui": "parcel src/index.html --host localhost --port 9998 --hmr-port 9997 --no-cache --log-level error",
+    "start": "node ./src/scripts/start.cjs --dev",
     "test": "jest",
-    "prebuild": "rimraf dist",
-    "build": "tsc && parcel build",
+    "prebuild": "rimraf dist && rimraf bin",
+    "build": "yarn build:parcel && yarn build:scripts",
+    "build:parcel": "cross-env NODE_ENV=production parcel build --no-cache",
+    "build:scripts": "copyfiles --flat ./src/scripts/start.cjs ./src/scripts/startCollector.cjs ./src/scripts/startViewer.cjs ./bin",
     "lint": "tsc --noEmit && eslint ./src --ext .ts,.tsx"
   },
   "dependencies": {
@@ -25,10 +28,14 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-json-view": "^1.21.3",
+    "servor": "^4.0.2",
     "ws": "^8.14.1",
-    "xml-formatter": "^3.5.0"
+    "xml-formatter": "^3.5.0",
+    "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
+    "@parcel/config-default": "^2.9.3",
+    "@parcel/core": "^2.9.3",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
@@ -39,6 +46,8 @@
     "@types/ws": "^8.5.5",
     "autoprefixer": "^10.4.15",
     "buffer": "^5.5.0||^6.0.0",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",