smartrent · tscritch · Nov 16, 2021 · Nov 16, 2021 · Dec 12, 2021 · Feb 24, 2022
diff --git a/README.md b/README.md
@@ -43,7 +43,8 @@ In the `example directory` run the follow commands:
 
 - `yarn` to install node modules in the example folder
 - `yarn link "badmagic"`
-- `yarn start` (to start the example that will be running on port 3000 by default)
+- `yarn dev` (to start the example that will be running on port 3005 and server on port 3333 by default)
+  > Use env vars PORT and SERVER_PORT to change the ports if needed.
 
 ## General Usage
 
@@ -116,9 +117,7 @@ export function BadMagicClient() {
     ],
   };
 
-  return (
-    <BadMagic workspaces={[superheroWorkspace]} />
-  );
+  return <BadMagic workspaces={[superheroWorkspace]} />;
 }
 ```
 
@@ -174,7 +173,7 @@ export function AuthForm({
       <TextInput name="password" />
       <Button onClick={() => {
         // axios request to login user, fetch access token, and store access token in state or local storage
-        // then in the `applyAxiosInterceptors`, the `getAccessToken()` function can fetch the token from state or 
+        // then in the `applyAxiosInterceptors`, the `getAccessToken()` function can fetch the token from state or
         // local storage
       }}>
     </div>
@@ -246,7 +245,7 @@ Example:
 export function HistoryMetadata({
   metadata,
 }: {
-  metadata: Record<string, any>;
+  metadata: Record<string, any>,
 }) {
   if (!metadata?.accessToken) {
     return null;
@@ -311,6 +310,7 @@ const superheroes = {
 ```
 
 ## Route Deprecation
+
 - Each route can specify its deprecation status by adding a `deprecated` key to the object.
 - `deprecated` accepts a boolean and will by default is set to `false`
 
@@ -324,13 +324,14 @@ const superheroes = {
     {
       name: "Fetch Superhero",
       path: "/v1/superheroes/:superhero_id",
-      deprecated: true
+      deprecated: true,
     },
   ],
 };
 ```
 
 ## Input Field Tooltip
+
 - Each input type can have a tooltip hover to describe what the input field is expecting if the name is ambiguous.
 - The existence of a `description` attribute will generate the on-hover icon and it will pull the text from the `description` as well
 
@@ -346,7 +347,7 @@ const superheroes = {
         path: "/v1/superheroes/:superhero_id",
         method: "PATCH",
         body: [
-          { 
+          {
             name: "first_name",
             required: true,
             description: "The first name of the hero you want to update to"

diff --git a/example/mock-server.js b/example/mock-server.js
@@ -0,0 +1,22 @@
+const express = require("express");
+var cors = require("cors");
+const app = express();
+const port = process.env.SERVER_PORT ? Number(process.env.SERVER_PORT) : 3333;
+
+app.use(cors());
+
+app.get("/", (req, res) => {
+  res.send("Mock Example Server");
+});
+
+app.get("/breeds/list/all", (req, res) => {
+  res.json({
+    breeds: ["Labrador", "German Shepard", "Poodle"],
+  });
+});
+
+app.use("/views", express.static("mock-views"));
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`);
+});
diff --git a/example/mock-views/breeds.html b/example/mock-views/breeds.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Breeds View</title>
+  </head>
+  <body>
+    <h1>Breeds</h1>
+    <ul>
+      <li>Labrador</li>
+      <li>German Shepard</li>
+      <li>Poodle</li>
+    </ul>
+  </body>
+</html>
diff --git a/example/mock-views/redirect.html b/example/mock-views/redirect.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Redirect View</title>
+    <script>
+      location.href = "https://www.google.com/";
+    </script>
+  </head>
+  <body>
+    <h1>Redirect</h1>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "badmagic": "latest",
-    "react-scripts": "^4.0.3"
+    "react-scripts": "^5.0.0"
   },
   "scripts": {
+    "dev": "PORT=3005 yarn start & yarn server",
+    "server": "node mock-server.js",
     "start": "react-scripts start"
   },
   "eslintConfig": {
@@ -23,5 +25,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.17.1"
   }
 }
diff --git a/example/src/dog-workspace.ts b/example/src/dog-workspace.ts
@@ -38,6 +38,30 @@ export const dogWorkspace = {
         },
       },
     },
+    {
+      name: "HTML response",
+      path: "/views/breeds.html",
+      responses: {
+        "200": {
+          description: "successful operation",
+          // schema: {
+          //   type: "array",
+          //   items: {
+          //     $ref: "#/definitions/Dog",
+          //   },
+          // },
+        },
+      },
+    },
+    {
+      name: "Redirecting HTML Response",
+      path: "/views/redirect.html",
+      responses: {
+        "200": {
+          description: "Should stop the redirection from the html response",
+        },
+      },
+    },
 
     {
       name: "View Random Breed Image",