Hi! just came across this library and I think it's awesome. I've been using Cloudflare workers for a while now and this is what I was using for integrating login through google, github, discord ...etc https://github.com/da7a90-backup/worker-auth-providers

I would love to contribute if you think it would be a good addition to the toolkit where you could add it to the auth layer and using this with something like itty-router to simplify route handling and securing the whole app with a middleware.

i’m very impressed by this project and was quite excited to get started with the @superflare/remix package. however, i see that it’s depending on remix version ^1.14.1, whereas i’m on the latest version of remix (v2.6.0 as of now). are there any plans to migrate the remix package to the v2.x branch of remix? i have no idea how deep the integration is (and how much is likely to have broken between 1.14.x and 2.x), but i’d also be happy to take a look at making a PR to get the package working with 2.x. @jplhomer would that be something you would be interested in and able to devote time to code review / merging it upstream?

thanks for this project! i hope superflare is going to continue to be a viable option for enhancing the cloudflare workers / remix stack, because i think it’s currently an unbeatable stack in terms of performance, cost, and developer productivity.

I just stumbled on Superflare and would like to explore integrating it with SolidStart, a new meta-framework that might work nicely with Superflare. Are there any instructions or outlines available for supporting the integration process? If not, would it be possible to get a brief walkthrough on this issue so that I can begin exploring the process?

Thank you!

Found this repo and I like what's going on! Cloudflare are certainly upping the ante these days and I'm glad to see a opinionated toolkit for it.

Have you considered using Drizzle as an ORM instead of rolling your own?
It already has a D1 adapter and also has a migration creation tool too, Drizzle Kit.
I've not used Drizzle before, but it looks like it does plenty of things that Superflare is wanting to do.

Some food for thought, excited to see where this project goes next!

Since Superflare is deeply integrated with the Cloudflare ecosystem and Remix doesn't have a built-in image optimizer, it would be nice if there were a way to optimize images using Cloudflare Image Optimization.

Perhaps this could take the form of a custom Image component imported from @superflare/remix combined with a Vite plugin or maybe something simpler like a CLI command when the custom CLI is implemented.

Currently the ModelInstance interface expects a field "id" that is a number. this may not be the case, for example if using UUIDs as ids, instead of numbers.

additionally, when writing a database migration (new table), there is no way to specify that table.string("id") should be used as the primary key.

Hello,

Would it be possible to create an example for a plain cloudflare worker (no remix)?

Thanks for putting this together!

I'm guessing this might be related to the --experimental-backend D1 change but it appears the local path is different now for the sqlite database.

Looks to be now .wrangler/state/v3/d1/[dbId]/db.sqlite. Will open a PR attempting to sort this soon!

Hey Josh! Love the look of this project.

When running the npx superflare@latest new command, I got the following error:

ReferenceError: fetch is not defined
    at downloadGitHubTarball (/Users/larryhudson/.npm/_npx/36e6aaa710414c00/node_modules/superflare/dist/cli.js:1019:19)
    at async generateTemplate (/Users/larryhudson/.npm/_npx/36e6aaa710414c00/node_modules/superflare/dist/cli.js:1009:19)
    at async Object.newHandler [as handler] (/Users/larryhudson/.npm/_npx/36e6aaa710414c00/node_modules/superflare/dist/cli.js:898:3)

I realised this is because I was running Node 17. This was fixed by installing the latest Node 18 LTS version. Is it right that 'fetch' is built in starting with Node 18?

Anyway, it would be good to add a note that Node 18 is required in the installation guide.

Following the steps from getting started, I get the following error:

> npx superflare@latest new

(cd into project, build, dev, killed)

> npm install @superflare/remix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @cloudflare/[email protected]
npm ERR! node_modules/@cloudflare/workers-types
npm ERR!   dev @cloudflare/workers-types@"4.20230307.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @cloudflare/workers-types@"^2.0.0 || ^3.0.0" from @remix-run/[email protected]
npm ERR! node_modules/@remix-run/cloudflare
npm ERR!   @remix-run/cloudflare@"^1.14.1" from the root project
npm ERR!   peer @remix-run/cloudflare@"^1.14.0" from @superflare/[email protected]
npm ERR!   node_modules/@superflare/remix
npm ERR!     @superflare/remix@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/jacob/.npm/_logs/2023-08-07T20_19_36_351Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jacob/.npm/_logs/2023-08-07T20_19_36_351Z-debug-0.log

The R2 documentation is incorrect. It says the API is await storage().put(key, file);, but in actuality it is await storage().put(file);. Though I wonder if there's a better API that could be provided for multipart uploads. I think the only way to work with the current API is to buffer an entire file upload into memory before saving to R2. Mixed with Remix, it looks like:

export async function action({request}: ActionArgs) {
  const uploadHandler = unstable_composeUploadHandlers(
    async ({ name, contentType, data, filename }) => {
      const dataArray1 = [];

      for await (const x of data) {
        dataArray1.push(x);
      }

      const file = new File(dataArray1, filename!, { type: contentType });

      await storage().put(file);

      return `${new URL(request.url).origin}/resources/images/${filename}`;
    }
  );

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

  const image = formData.get("image");

  return json({ image });
}

Is there another, better way to save files to r2 from multipart upload forms?

Hey 👋

Just stumbled upon this project while trying to find a way to do queued jobs in my SvelteKit project.

This seems to be the missing piece in the JS ecosystem to actually make it full-stack. No other "full-stack" framework implements File Storage, background jobs, or Auth.

From what I remember in Remix, it's actually very similar to SvelteKit. both has the concept of loaders and action and follow the same rendering strategy, with layouts and and the parallel loading of nested routes.

So I'm just wondering what components do I need to mess around with to bring this to SvelteKit?

Running npx superflare@latest new -> Database Models, Scheduled Tasks-> npm install --legacy-peer-deps-> npx superflare migrate -> npm run dev or npx superflare dev yields the following error on opening the index URL right now:

[mf:err] GET /: InvalidCharacterError: Invalid character
    at atob (.../node_modules/@miniflare/core/src/standards/encoding.ts:33:13)
    at unsign (.../node_modules/@remix-run/cloudflare/dist/crypto.js:29:42)
    at decodeCookieValue (.../node_modules/@remix-run/server-runtime/dist/cookies.js:82:27)
    at Object.parse (.../node_modules/@remix-run/server-runtime/dist/cookies.js:54:60)
    at Object.getSession (.../node_modules/@remix-run/server-runtime/dist/sessions/cookieStorage.js:36:54)
    at handleFetch2 (.../node_modules/@superflare/remix/dist/index.mjs:23:5)
    at ServiceWorkerGlobalScope.[kDispatchFetch] (.../node_modules/@miniflare/core/src/standards/event.ts:385:13)
    at Server.<anonymous> (.../node_modules/@miniflare/http-server/src/index.ts:291:20)

Hi again Josh :-)

I had a couple more issues setting up a new project that included all the features - D1, R2, Queue and Durable Object.

I got an error saying:

✘ [ERROR] A request to the Cloudflare API (/accounts/xxx/r2/buckets) failed.

  Please enable R2 through the Cloudflare Dashboard. [code: 10042]

That was straightforward enough to fix myself, but might be worth adding a note in the setup instructions to do that before starting.

But the other error from the Workers SDK was more vague:

✘ [ERROR] A request to the Cloudflare API (/accounts/xxx/workers/queues) failed.

  workers.api.error.not_entitled [code: 10015]

I ended up working out that I needed a paid Workers subscription (the $5 plan) in order to use the Queues and Durable Object features. I didn't see that mentioned in the docs. As soon as I set up the paid subscription, the command worked properly.

Thanks Josh, hope this is helpful.

I cannot find acceptWebsocket anywhere in the source code. Does that mean superflare currently doesn't use Hibernation API for Websocket and durable objects?

Hey there, I'm trying to use Cloudflare's Browser Rendering API in a job, which requires invoking the ENV context. How do I access that in a Job?

Hey, @jplhomer thanks for that awesome work i was struggling to build my abstraction around the Cloudflare stack but you did an amazing job!

I am wondering if there is a plan to support Cron jobs. Also, i am ready to contribute to this.

I've just set up a fresh project using npx superflare@latest new

Do you want to continue?
│  Yes
│
◇  Done creating resources:
✅ D1 Database: sophily-db created!
✅ R2 Bucket: sophily-bucket created!
✅ Queue: sophily-queue created!
✅ Durable Object: Added binding and Channel export to worker.ts
│
└  You're all set! `cd ./sophily`, run `npm install`, and then `npx superflare migrate` to get started.

npm install then had issues which was fixed with --legacy-peer-deps

~/Code/sophily via  v19.3.0
at 11:21:11 ❯ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @cloudflare/[email protected]
npm ERR! node_modules/@cloudflare/workers-types
npm ERR!   dev @cloudflare/workers-types@"^4.20230307.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @cloudflare/workers-types@"^2.0.0 || ^3.0.0" from @remix-run/[email protected]
npm ERR! node_modules/@remix-run/cloudflare
npm ERR!   @remix-run/cloudflare@"^1.14.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/dangamble/.npm/_logs/2023-03-14T11_21_14_485Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dangamble/.npm/_logs/2023-03-14T11_21_14_485Z-debug-0.log
arm64
~/Code/sophily via  v19.3.0 took 3s
at 11:21:17 ❯ npm i --legacy-peer-deps
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

added 842 packages, and audited 844 packages in 44s

171 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
arm64

But I'm then getting an issue on npx superflare migrate:

~/Code/sophily via  v19.3.0 took 44s
at 11:22:11 ❯ npx superflare migrate
Compiling migrations...
Migrating database...
superflare migrate

🏗️ Migrate your database and update types

Options:
  -v, --version                Show version number  [boolean]
  -h, --help                   Show help  [boolean]
  -d, --db                     Path to the database  [default: "/Users/dangamble/Code/sophily/.wrangler/state/d1/DB.sqlite3"]
  -m, --models                 Path to the models directory  [default: "/Users/dangamble/Code/sophily/app/models"]
      --superflare-migrations  Path to the Superflare migrations directory  [default: "/Users/dangamble/Code/sophily/db/migrations"]
      --wrangler-migrations    Path to the Wrangler migrations directory  [default: "/Users/dangamble/Code/sophily/migrations"]
  -c, --create                 Create a model if it doesn't exist  [boolean] [default: false]
  -f, --fresh                  Run a fresh migration by dropping the existing database  [boolean] [default: false]
  -s, --seed                   Seed the database after migrating  [boolean] [default: false]
      --seed-path              Path to the seed file  [default: "/Users/dangamble/Code/sophily/db/seed.ts"]

Error: npx wrangler d1 migrations apply DB --local exited with code 1
    at ChildProcess.<anonymous> (/Users/dangamble/Code/sophily/node_modules/superflare/dist/cli.js:145:11)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess.emit (node:domain:489:12)
    at maybeClose (node:internal/child_process:1098:16)
    at Socket.<anonymous> (node:internal/child_process:456:11)
    at Socket.emit (node:events:513:28)
    at Socket.emit (node:domain:489:12)
    at Pipe.<anonymous> (node:net:305:12)

Not entirely sure where to even start with this one otherwise I'd dig through this myself. I've not even opened this in my editor yet so this is an entirely fresh start.

It looks pretty awesome. Congratulations!
Some questions:
-Why are not using 'standard' Remix libraries like remix-auth , zod ...?
-Are you planning to integrate any testing library like playwright?
-Why aren't you using CF Pages?
Thanks!