Merge pull request #8 from aaronvb/add-web-renderer

Add web renderer

Author: aaronvb

.github/workflows/tests.yml renamed to .github/workflows/test_go.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Test Go
 
 on:
   push:
@@ -7,7 +7,6 @@ on:
     branches: [ main ]
 
 jobs:
-
   build:
     runs-on: ubuntu-latest
     steps:

.github/workflows/test_js.yml

@@ -0,0 +1,27 @@
+name: Test JS
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node 16
+      uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Run tests
+      run: yarn test

.gitignore

@@ -2,4 +2,23 @@
 dist/
 requests.http
 *.log
-request_hole
+request_hole
+
+## web folder
+# dependencies
+web/node_modules
+web/.pnp
+web/.pnp.js
+
+# testing
+web/coverage
+
+# misc
+web/.env.local
+web/.env.development.local
+web/.env.test.local
+web/.env.production.local
+
+web/npm-debug.log*
+web/yarn-debug.log*
+web/yarn-error.log*

README.md

@@ -1,10 +1,12 @@
 # Request Hole CLI
 [![go.dev Reference](https://img.shields.io/badge/go.dev-reference-007d9c?logo=go&logoColor=white&style=flat)](https://pkg.go.dev/github.com/aaronvb/request_hole)
-[![Test](https://github.com/aaronvb/request_hole/workflows/Test/badge.svg)](https://github.com/aaronvb/request_hole/actions/workflows/tests.yml)
+[![Go Tests](https://github.com/aaronvb/request_hole/workflows/Test%20Go/badge.svg)](https://github.com/aaronvb/request_hole/actions/workflows/test_go.yml)
+[![JS Tests](https://github.com/aaronvb/request_hole/workflows/Test%20JS/badge.svg)](https://github.com/aaronvb/request_hole/actions/workflows/test_js.yml)
 [![Builds](https://github.com/aaronvb/request_hole/workflows/Builds/badge.svg)](https://github.com/aaronvb/request_hole/actions/workflows/builds.yml)
 
 `rh` is a CLI tool for creating an ephemeral endpoint for testing and inspecting requests from your application or webhook.
 
+<img width="1136" alt="Request Hole CLI web ui" src="https://user-images.githubusercontent.com/100900/125158715-9b866500-e10e-11eb-9438-36d0f8325c60.png">
 <img width="788" alt="Request Hole CLI" src="https://user-images.githubusercontent.com/100900/120265767-63048900-c23c-11eb-9a20-079ab9822767.png">
 
 
@@ -48,10 +50,21 @@ Flags:
       --log string          writes incoming requests to the specified log file (example: --log rh.log)
   -p, --port int            sets the port for the endpoint (default 8080)
   -r, --response_code int   sets the response code (default 200)
+      --web                 runs a web server to show incoming requests
+      --web_port int        sets the port for the web server (default 8081)
 
 Use "rh [command] --help" for more information about a command.
 ```
+## Using the Web UI
+### Create an HTTP endpoint
+```
+$ rh http --web
+```
+This option will open a web UI that will display the incoming requests. Incoming requests will render live in the browser when they are received.
 
+<img width="1136" alt="Request Hole CLI web ui" src="https://user-images.githubusercontent.com/100900/125158715-9b866500-e10e-11eb-9438-36d0f8325c60.png">
+
+## Using the CLI
 ### Creating an HTTP endpoint
 To create an http endpoint with default settings (port 8080, return status code 200):
 ```
@@ -73,9 +86,41 @@ $ rh http --log rh.log
 ```
 <img width="787" alt="Request Hole CLI log" src="https://user-images.githubusercontent.com/100900/120877567-fac2e980-c552-11eb-8ec0-8075bc6c0cd8.png">
 
-### Exposing Request Hole to the internet
+## Exposing Request Hole to the internet
 Sometimes we need to expose `rh` to the internet to test applications or webhooks from outside of our local dev env. The best way to do this is to use a tunneling service such as [ngrok](https://ngrok.com).
 ```
 $ ngrok http 3001
 $ rh http -p 3001
 ```
+
+## Running Tests and Building
+It is recommended to run the JS build first so that the Go build can embed the latest web UI build.
+
+### CLI
+```
+$ go test -v ./...
+$ go build
+```
+
+### Web UI
+```
+$ cd web; yarn test
+$ cd web; yarn build
+```
+#### For Development
+```
+$ cd web; yarn start
+```
+Visit `localhost:3000`
+
+## Built With
+- Go https://golang.org/
+- logparams https://github.com/aaronvb/logparams
+- logrequest https://github.com/aaronvb/logrequest
+- cobra https://github.com/spf13/cobra
+- gqlgen https://github.com/99designs/gqlgen (GraphQL/Websockets)
+- gorilla/mux https://github.com/gorilla/mux
+- Apollo https://github.com/apollographql/apollo-client (GraphQL frontend)
+- create-react-app https://github.com/facebook/create-react-app
+- Tailwind https://github.com/tailwindlabs/tailwindcss
+- React Testing Library https://github.com/testing-library/react-testing-library

cmd/protocol.go

@@ -13,14 +13,14 @@ var httpCmd = &cobra.Command{
 	Long: `rh: http
 Create an endpoint that accepts http connections.
 `,
-	Run: http,
+	Run: httpCommand,
 }
 
 func init() {
 	rootCmd.AddCommand(httpCmd)
 }
 
-func http(cmd *cobra.Command, args []string) {
+func httpCommand(cmd *cobra.Command, args []string) {
 	renderers := make([]renderer.Renderer, 0)
 
 	// Collect flag data into struct to use with renderers
@@ -31,10 +31,24 @@ func http(cmd *cobra.Command, args []string) {
 		LogFile:      LogFile,
 		Port:         Port,
 		ResponseCode: ResponseCode,
+		Web:          Web,
+		WebPort:      WebPort,
 	}
 
-	printer := &renderer.Printer{Details: Details}
-	renderers = append(renderers, printer)
+	if Web {
+		web := &renderer.Web{
+			Port:         WebPort,
+			StaticFiles:  StaticFS,
+			RequestAddr:  Address,
+			RequestPort:  Port,
+			ResponseCode: ResponseCode,
+			BuildInfo:    BuildInfo,
+		}
+		renderers = append(renderers, web)
+	} else {
+		printer := &renderer.Printer{Details: Details}
+		renderers = append(renderers, printer)
+	}
 
 	if LogFile != "" {
 		logger := &renderer.Logger{

cmd/root.go

@@ -1,7 +1,11 @@
 // Package cmd contains all of the CLI commands
 package cmd
 
-import "github.com/spf13/cobra"
+import (
+	"net/http"
+
+	"github.com/spf13/cobra"
+)
 
 var (
 	Address      string
@@ -10,6 +14,9 @@ var (
 	LogFile      string
 	Port         int
 	ResponseCode int
+	Web          bool
+	WebPort      int
+	StaticFS     http.FileSystem
 )
 
 var rootCmd = &cobra.Command{
@@ -19,8 +26,9 @@ var rootCmd = &cobra.Command{
 This CLI tool will let you create a temporary API endpoint for testing purposes.`,
 }
 
-func Execute(buildInfo map[string]string) error {
+func Execute(buildInfo map[string]string, staticFS http.FileSystem) error {
 	BuildInfo = buildInfo
+	StaticFS = staticFS
 	return rootCmd.Execute()
 }
 
@@ -30,4 +38,8 @@ func init() {
 	rootCmd.PersistentFlags().IntVarP(&ResponseCode, "response_code", "r", 200, "sets the response code")
 	rootCmd.PersistentFlags().BoolVar(&Details, "details", false, "shows header details in the request")
 	rootCmd.PersistentFlags().StringVar(&LogFile, "log", "", "writes incoming requests to the specified log file (example: --log rh.log)")
+
+	// Web server renderer
+	rootCmd.PersistentFlags().BoolVar(&Web, "web", false, "runs a web server to show incoming requests")
+	rootCmd.PersistentFlags().IntVar(&WebPort, "web_port", 8081, "sets the port for the web server")
 }

go.mod

@@ -3,11 +3,16 @@ module github.com/aaronvb/request_hole
 go 1.16
 
 require (
-	github.com/aaronvb/logparams v1.0.0
+	github.com/99designs/gqlgen v0.13.0
+	github.com/aaronvb/logparams v1.2.1
 	github.com/aaronvb/logrequest v1.0.0
+	github.com/google/uuid v1.2.0
 	github.com/gorilla/mux v1.8.0
+	github.com/gorilla/websocket v1.4.2
 	github.com/pterm/pterm v0.12.18
+	github.com/rs/cors v1.6.0
 	github.com/spf13/cobra v1.1.3
+	github.com/vektah/gqlparser/v2 v2.1.0
 	golang.org/x/sys v0.0.0-20210507161434-a76c4d0a0096 // indirect
 	golang.org/x/term v0.0.0-20210503060354-a79de5458b56 // indirect
 )