Deploy Remix Supabase to Cloudflare

Makerkit supports deployment to Cloudflare for the Turbo versions. Cloudflare is a great choice for deploying your application due to its low cost and high performance.

To deploy the application to Cloudflare, you need to do the following:

1. Switch to a Cloudflare-compatible mailer (Resend)
2. Switching CMS or use a remote strategy (Keystatic)
3. Setting Node.js Compatibility Flags
4. Environment variables
5. Workarounds

Before you start: update to the paid Cloudflare tier

Deploying to Cloudflare requires a subscription to the Cloudflare Workers paid service due to the size limitations of the free tier. It starts at $5.

0. Limitations

Before you continue, please evaluate the limitations of the Edge runtime. The Edge runtime does not support all Node.js features, so you may need to adjust your application accordingly.

Cloudflare is cheaper and faster than many other providers, but running your application on Cloudflare Pages means not having access to the vast Node.js ecosystem.

Makerkit uses Cloudflare as a baseline, so you can deploy it to Cloudflare Pages without any issues. However, you will need to keep in mind the limitations of the Workers/Edge runtime when adding new features.

One more thing to consider is that the Edge runtime does run close to your users, but may run far from your database. Consider read replicas or other strategies to reduce latency in all situations.

If your mind is set on using Cloudflare, please follow the instructions below.

1. Switch to the Cloudflare branch

Makerkit's Remix SaaS boilerplate has a branch that is compatible with Cloudflare. To switch to the Cloudflare branch, run the following command:

git checkout cloudflare

This branch is optimized for Cloudflare and includes the necessary changes to run on Cloudflare.

1. Using Resend Mailer

Since the default library nodemailer relies on Node.js, we cannot use it in the Edge runtime. Instead, we will Resend Mailer.

Set the MAILER_PROVIDER environment variable to resend in the apps/web/.env file:

MAILER_PROVIDER=resend

And provide the Resend API key:

RESEND_API_KEY=your-api-key

Alternatively, please implement your own mailer using the abstract class we provide in the packages/mailers package. It is extremely straightforward to implement a mailer using the abstract class.

2. Switching CMS

By default, Makerkit uses Keystatic as a CMS.

Keystatic's local mode (which relies on the file system) is not supported in the Edge runtime. Therefore, you will need to switch to another CMS or use Keystatic's Github mode - which uses Github as data provider.

At this time, the other CMS supported is WordPress. Set CMS_CLIENT to wordpress in the apps/web/.env file:

CMS_CLIENT=wordpress

Alternatively, use the Keystatic remote mode through Github.

Please check the CMS documentation for more information.

3. Select "apps/web" as path to build

When prompted to select the path to build, select apps/web as the path to build - since our Remix app is located in the apps/web directory.

If you have multiple apps, you can select the app you want to deploy.

4. Setting Node.js Compatibility Flags

Cloudflare requires you to set the Node.js compatibility flags. Please follow the instructions on the Cloudflare documentation.

Please don't miss this step, as it's crucial for the application to work in the Edge runtime.

5. Environment variables

When adding environment variables, make sure to add all of them from the Cloudflare dashboard instead of the .env file. I cannot understand why, but the Workers did not pick up the environment variables from the .env file. So please do make sure to add all the environment variables from the Cloudflare dashboard.

Conclusion

Deploying to Cloudflare is a great choice if you want to run your application close to your users. However, you need to keep in mind the limitations of the Edge runtime and adjust your application accordingly.