Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: build tool updates #24

Merged
merged 2 commits into from
Nov 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint:staged
18 changes: 18 additions & 0 deletions .secretlintrc.json
Original file line number Diff line number Diff line change
@@ -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/"
}
]
}
}
]
}
14 changes: 9 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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:

Expand All @@ -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',
}),
});
```
Expand All @@ -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

Expand Down
3 changes: 3 additions & 0 deletions apps/demo-express-app/.env.example
Original file line number Diff line number Diff line change
@@ -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";
3 changes: 3 additions & 0 deletions apps/demo-nextjs-app-router/.env.example
Original file line number Diff line number Diff line change
@@ -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";
3 changes: 2 additions & 1 deletion apps/demo-nextjs-app-router/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@

// @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
Expand All @@ -24,7 +25,7 @@
// @snippet:end

type ErrorProps = {
error: any;

Check warning on line 28 in apps/demo-nextjs-app-router/app/page.tsx

View workflow job for this annotation

GitHub Actions / build

Unexpected any. Specify a different type
};

function Error(props: ErrorProps) {
Expand Down Expand Up @@ -102,7 +103,7 @@
}
);
setResult(result);
} catch (error: any) {

Check warning on line 106 in apps/demo-nextjs-app-router/app/page.tsx

View workflow job for this annotation

GitHub Actions / build

Unexpected any. Specify a different type
setError(error);
} finally {
setLoading(false);
Expand Down
3 changes: 3 additions & 0 deletions apps/demo-nextjs-page-router/.env.example
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 2 additions & 0 deletions cspell-dictionary.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
quickstart
runtimes
14 changes: 14 additions & 0 deletions cspell.json
Original file line number Diff line number Diff line change
@@ -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"]
}
21 changes: 19 additions & 2 deletions libs/proxy/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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
}),
});
```
Expand Down
Loading
Loading