chore: build tool updates (#24)

* chore: build tool updates

* chore: update readme docs

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:staged

.secretlintrc.json

@@ -0,0 +1,18 @@
+{
+  "rules": [
+    {
+      "id": "@secretlint/secretlint-rule-preset-recommend"
+    },
+    {
+      "id": "@secretlint/secretlint-rule-pattern",
+      "options": {
+        "patterns": [
+          {
+            "name": "Fal API key",
+            "pattern": "/\\b[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89abAB][0-9a-f]{3}-[0-9a-f]{12}:[0-9a-fA-F]{32}\\b/"
+          }
+        ]
+      }
+    }
+  ]
+}

README.md

@@ -18,7 +18,7 @@ The `serverless-js` library serves as a client for fal serverless Python functio
 This client library is crafted as a lightweight layer atop platform standards like `fetch`. This ensures a hassle-free integration into your existing codebase. Moreover, it addresses platform disparities, guaranteeing flawless operation across various JavaScript runtimes.
 
 > **Note:**
-> Ensure you've reviewed the [fal-serverless getting started guide](https://fal.ai/docs) to acquire your credentials and register your functions.
+> Ensure you've reviewed the [getting started guide](https://fal.ai/docs) to acquire your credentials, browser existing APIs, or create your custom functions.
 
 1. Start by configuring your credentials:
 
@@ -40,9 +40,11 @@ const result = await fal.run('my-function-id');
 
 The result's type is contingent upon your Python function's output. Types in Python are mapped to their corresponding types in JavaScript.
 
+See the available [model APIs](https://fal.ai/models) for more details.
+
 ### The fal client proxy
 
-Although the fal client is designed to work in any JS environment, including client-side, **it is not recommended** to store your credentials in your client source code. The common practice is to use your own server to serve as a proxy to serverless APIs. Luckily fal supports that out-of-the-box with plug-and-play proxy functions for the most common engines/framrworks.
+Although the fal client is designed to work in any JS environment, including directly in your browser, **it is not recommended** to store your credentials in your client source code. The common practice is to use your own server to serve as a proxy to serverless APIs. Luckily fal supports that out-of-the-box with plug-and-play proxy functions for the most common engines/frameworks.
 
 For example, if you are using Next.js, you can:
 
@@ -56,7 +58,7 @@ For example, if you are using Next.js, you can:
    import * as fal from '@fal-ai/serverless-js';
    fal.config({
      requestMiddleware: fal.withProxy({
-       targetUrl: '/api/_fal/proxy',
+       targetUrl: '/api/fal/proxy',
      }),
    });
    ```
@@ -66,11 +68,13 @@ See [libs/proxy](./libs/proxy/) for more details.
 
 ### The example Next.js app
 
-You can find a minimal Next.js + fal application examples in [apps/demo-nextjs-app/](https://github.com/fal-ai/serverless-js/tree/main/apps/demo-nextjs-app).
+You can find a minimal Next.js + fal application examples in [apps/demo-nextjs-page-router/](https://github.com/fal-ai/serverless-js/tree/main/apps/demo-nextjs-page-router).
 
 1. Run `npm install` on the repository root.
 2. Create a `.env.local` file and add your API Key as `FAL_KEY` environment variable (or export it any other way your prefer).
-3. Run `npx nx serve demo-nextjs-app` to start the Next.js app.
+3. Run `npx nx serve demo-nextjs-page-router` to start the Next.js app.
+
+Check our [Next.js integration docs](https://fal.ai/docs/integrations/nextjs) for more details.
 
 ## Roadmap
 

apps/demo-express-app/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to .env.local and add your fal credentials
+# Visit https://fal.ai to get started
+FAL_KEY="FAL_KEY_ID:FAL_KEY_SECRET";

apps/demo-nextjs-app-router/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to .env.local and add your fal credentials
+# Visit https://fal.ai to get started
+FAL_KEY="FAL_KEY_ID:FAL_KEY_SECRET";

apps/demo-nextjs-app-router/app/page.tsx

@@ -5,9 +5,10 @@ import { useMemo, useState } from 'react';
 
 // @snippet:start(client.config)
 fal.config({
+  // credentials: 'FAL_KEY_ID:FAL_KEY_SECRET',
   requestMiddleware: fal.withProxy({
     targetUrl: '/api/fal/proxy', // the built-int nextjs proxy
-    // targetUrl: 'http://localhost:3333/api/_fal/proxy', // or your own external proxy
+    // targetUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
   }),
 });
 // @snippet:end

apps/demo-nextjs-page-router/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to .env.local and add your fal credentials
+# Visit https://fal.ai to get started
+FAL_KEY="FAL_KEY_ID:FAL_KEY_SECRET";

cspell-dictionary.txt

@@ -0,0 +1,2 @@
+quickstart
+runtimes

cspell.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
+  "version": "0.2",
+  "language": "en",
+  "languageId": "markdown",
+  "dictionaryDefinitions": [
+    {
+      "name": "project-words",
+      "path": "./cspell-dictionary.txt",
+      "addWords": true
+    }
+  ],
+  "dictionaries": ["en_US", "project-words", "typescript", "python"]
+}

libs/proxy/README.md

@@ -12,7 +12,9 @@ The `@fal-ai/serverless-proxy` library enables you to route client requests thro
 npm install --save @fal-ai/serverless-proxy
 ```
 
-## Next.js integration
+## Next.js page router integration
+
+For Next.js applications using the page router:
 
 1. Create an API route in your Next.js app, as a convention we suggest using `pages/api/_fal/proxy.js` (or `.ts` if you're using TypeScript):
 2. Re-export the proxy handler from the library as the default export:
@@ -21,6 +23,21 @@ npm install --save @fal-ai/serverless-proxy
    ```
 3. Ensure you've set the `FAL_KEY` as an environment variable in your server, containing a valid API Key.
 
+## Next.js app router integration
+
+For Next.js applications using the app router:
+
+1. Create an API route in your Next.js app, as a convention we suggest using `app/api/fal/proxy/route.js` (or `.ts` if you're using TypeScript):
+2. Re-export the proxy handler from the library as the default export:
+
+   ```ts
+   import { route } from '@fal-ai/serverless-proxy/nextjs';
+
+   export const { GET, POST } = route;
+   ```
+
+3. Ensure you've set the `FAL_KEY` as an environment variable in your server, containing a valid API Key.
+
 ## Express integration
 
 For Express applications:
@@ -52,7 +69,7 @@ import * as fal from '@fal-ai/serverless-js';
 
 fal.config({
   requestMiddleware: fal.withProxy({
-    targetUrl: '/api/_fal/proxy', // or https://my.app.com/api/_fal/proxy
+    targetUrl: '/api/fal/proxy', // or https://my.app.com/api/fal/proxy
   }),
 });
 ```

package.json

@@ -6,9 +6,24 @@
     "start": "nx serve",
     "build": "nx build",
     "test": "nx test",
+    "lint:staged": "lint-staged",
     "prepare": "husky install"
   },
   "private": true,
+  "lint-staged": {
+    ".{env,env.example}": [
+      "secretlint"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "secretlint",
+      "prettier --write"
+    ],
+    "*.{md,mdx}": [
+      "secretlint",
+      "cspell",
+      "prettier --write"
+    ]
+  },
   "dependencies": {
     "@oclif/core": "^2.3.0",
     "@oclif/plugin-help": "^5.2.5",
@@ -48,6 +63,8 @@
     "@nx/web": "16.10.0",
     "@nx/webpack": "16.10.0",
     "@nx/workspace": "16.10.0",
+    "@secretlint/secretlint-rule-pattern": "^7.0.7",
+    "@secretlint/secretlint-rule-preset-recommend": "^7.0.7",
     "@swc-node/core": "^1.10.6",
     "@swc-node/register": "^1.6.8",
     "@testing-library/react": "14.0.0",
@@ -62,6 +79,7 @@
     "@typescript-eslint/parser": "5.62.0",
     "autoprefixer": "10.4.13",
     "babel-jest": "29.4.3",
+    "cspell": "^8.0.0",
     "cypress": "^11.0.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.1",
@@ -76,11 +94,13 @@
     "jest": "29.4.3",
     "jest-environment-jsdom": "29.4.3",
     "jest-environment-node": "^29.4.1",
+    "lint-staged": "^15.0.2",
     "nx": "16.10.0",
     "nx-cloud": "16.4.0",
     "organize-imports-cli": "^0.10.0",
     "postcss": "8.4.21",
     "prettier": "^2.6.2",
+    "secretlint": "^7.0.7",
     "tailwindcss": "3.2.7",
     "ts-jest": "29.1.1",
     "ts-node": "^10.9.1",