docs: install

wevm · Feb 28, 2024 · dff0be8 · dff0be8
1 parent 8dc7c73
commit dff0be8
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 12 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/pages/getting-started.mdx b/site/pages/getting-started.mdx
@@ -66,28 +66,31 @@ You can install Frog in an existing project, or start from scratch, by installin
 
 ### Install
 
-First, we will install `frog` as a dependency in our project.
+First, we will install `frog` as a dependency in our project along with its [`hono`](https://hono.dev) peer dependency.
 
 :::code-group
 
 ```bash [npm]
-npm i frog
+npm i frog hono
 ```
 
 ```bash [pnpm]
-pnpm i frog
+pnpm i frog hono
 ```
 
 ```bash [yarn]
-yarn add frog
+yarn add frog hono
 ```
 
 ```bash [bun]
-bun i frog
+bun i frog hono
 ```
 
 :::
 
+- [Hono](https://github.com/honojs/hono) is a small, simple, and ultrafast web framework for the Edges.
+- [TypeScript](https://github.com/microsoft/TypeScript) is optional, but highly recommended.
+
 ### Build your First Frame
 
 
@@ -141,8 +144,12 @@ After that, let's add a script to our `package.json` to serve our frame.
   "scripts": { 
     "dev": "frog dev", // [!code focus]
   },
+  "dependencies": {
+    "frog": "latest",
+    "hono": "latest"
+  },
   "devDependencies": {
-    "frog": "latest"
+    "typescript": "latest"
   }
 }
 ```

diff --git a/site/pages/installation.mdx b/site/pages/installation.mdx
@@ -0,0 +1,72 @@
+# Installation
+
+Install Frog via your package manager or build from source.
+
+## Package Manager
+
+Install the required packages.
+
+:::code-group
+```bash [pnpm]
+pnpm add frog hono
+```
+
+```bash [npm]
+npm install frog hono
+```
+
+```bash [yarn]
+yarn add frog hono
+```
+
+```bash [bun]
+bun add frog hono
+```
+:::
+
+- [Hono](https://github.com/honojs/hono) is a small, simple, and ultrafast web framework for the Edges.
+- [TypeScript](https://github.com/microsoft/TypeScript) is optional, but highly recommended.
+
+## Using Unreleased Commits
+
+If you can't wait for a new release to test the latest features, you can either install from the `canary` tag (tracks the [`main`](https://github.com/wevm/frog/tree/main) branch).
+
+:::code-group
+```bash [pnpm]
+pnpm add frog@canary
+```
+
+```bash [npm]
+npm install frog@canary
+```
+
+```bash [yarn]
+yarn add frog@canary
+```
+
+```bash [bun]
+bun add frog@canary
+```
+:::
+
+Or clone the [Frog repo](https://github.com/wevm/frog) to your local machine, build, and link it yourself.
+
+```bash
+gh repo clone wevm/frog
+cd frog
+pnpm install
+pnpm build
+cd src
+pnpm link --global
+```
+
+Then go to the project where you are using Frog and run `pnpm link --global frog` (or the package manager that you used to link Frog globally). Make sure you installed the [required peer dependencies](/installation#package-manager) and their versions are correct.
+
+## Security
+
+Ethereum-related projects are often targeted in attacks to steal users' assets. Make sure you follow security best-practices for your project. Some quick things to get started.
+
+- Pin package versions, upgrade mindfully, and inspect lockfile changes to minimize the risk of [supply-chain attacks](https://nodejs.org/en/guides/security/#supply-chain-attacks).
+- Install the [Socket Security](https://socket.dev) [GitHub App](https://github.com/apps/socket-security) to help detect and block supply-chain attacks.
+- Add a [Content Security Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html) to defend against external scripts running in your app.
+
diff --git a/site/vocs.config.tsx b/site/vocs.config.tsx
@@ -252,6 +252,10 @@ export default defineConfig({
     },
   ],
   sidebar: [
+    {
+      text: 'Installation',
+      link: '/installation',
+    },
     {
       text: 'Getting Started',
       link: '/getting-started',

diff --git a/src/frog-base.tsx b/src/frog-base.tsx
@@ -338,7 +338,7 @@ export class FrogBase<
           return true
         })
 
-      const body = isDevEnabled && (
+      const body = isDevEnabled ? (
         <body
           style={{
             alignItems: 'center',
@@ -352,6 +352,8 @@ export class FrogBase<
             open 𝒇𝒓𝒂𝒎𝒆 devtools
           </a>
         </body>
+      ) : (
+        <body />
       )
 
       return c.render(
@@ -378,10 +380,12 @@ export class FrogBase<
             )}
             {parsedIntents}
 
-            <meta
-              property="frog:context"
-              content={serializeJson(baseContext)}
-            />
+            {isDevEnabled && (
+              <meta
+                property="frog:context"
+                content={serializeJson(baseContext)}
+              />
+            )}
           </head>
           {body}
         </html>,

diff --git a/src/package.json b/src/package.json
@@ -39,7 +39,13 @@
     }
   },
   "peerDependencies": {
-    "hono": "^4"
+    "hono": "^4",
+    "typescript": ">=5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@farcaster/core": "^0.13.7",

diff --git a/templates/vercel/package.json b/templates/vercel/package.json
@@ -1,5 +1,6 @@
 {
   "name": "example-vercel-edge",
+  "private": true,
   "type": "module",
   "scripts": {
     "build": "frog vercel-build",