Convex with Remix 💿
I've just hooked up Convex to a 💿 Remix app (woohoo!), and ran into one small hiccup—Convex seems to think Remix is using Vite (probably because Remix uses esbuild, which Vite also uses), so every time I run
npx convex dev, it asks me if I want to ? Create a .env.local file and add VITE_CONVEX_URL to save dev URL? (Y/n) . This is annoying because I have to turn it down every time I run that command, and also because running npx convex dev with concurrently (i.e. non-interactively) then doesn't work! I discovered the --no-save-url flag, which allows non-interactive execution again, and which is why it's only a minor hiccup 🙂10 Replies
Remix uses
.env for local development (https://remix.run/docs/en/v1/guides/envvars#local-development), so I perhaps want something very similar to what the CLI is trying to offer for Vite.actually dunno, not sure why it's assuming vite — I think the code checks for vite in the package.json dependencies
I can confirm that there is definitely no Vite in my
package.json!
Barely edited from the Remix's Netlify templatecool, bug noted, thanks!
Still thinking about what should happen here. For Remix, I think that
-
npx convex dev/npm run dev should check for a .env file (and even offer to create one, at least if this is a new project), and offer to store the URL of the development Convex deployment in that .env file as CONVEX_URL
- npx convex deploy should print out the deployment URL, but not save it anywhereI see that Remix doesn't want you to commit the .env file, so that should definitely be where the dev key goes
For production there is no standardized approach, it depends on where you're hosting the Remix app.
Yeah, I think that sounds right to me
Here's what adding Convex to a Remix project will look like, lmk if any feedback
@RJ the interesting part for me it how do you use Convex in Remix's
loaders? Are you building an http enpoint for everything? or you're not using loaders at all?Looks good IMO! Another option for the prod scenario would be to echo the Remix guide and tell them to store the prod URL according to their host, and/or to link them directly to the relevant section of the Remix docs (https://remix.run/docs/en/v1/guides/envvars#production)
I’m just using the root loader to load the Convex URL, and then using the corresponding root component to insert the Convex React client, as outlined in https://discord.com/channels/1019350475847499849/1019350478817079338/1074870246965522442. I think you could use the Convex HTTP client with other loaders for specific routes if you wanted to do any SSR, and then you could have the React client take over the same query once the page has been served (as Tom described to me the other day), but I haven’t tried that yet.