/remix-jokes-workers

Remix Jokes Demo App for Cloudflare Workers

Primary LanguageTypeScript

Jokes App for Cloudflare Workers

Live Demo

tutorial: https://remix.run/docs/en/v1/tutorials/jokes

What's different?

This repository is a re-implementation of Jokes tutorial app. However, it uses Cloudflare Workers for backend and Workers KV for storage, instead of fly.io and Prisma/SQLite.

Tutorial

  • Add routes
  • Add styles
  • Setup a KV storage
  • Implement actions
  • Authentication
  • Error handling
  • SEO
  • Resource routes
  • Add scripts
  • Optimistic UI
  • Deploy

Development

You will be running two processes during development:

  • The Miniflare server (miniflare is a local environment for Cloudflare Workers)
  • The Remix development server
$ npm start

Open up http://127.0.0.1:8787 and you should be ready to go!

Deployment

Use wrangler to build and deploy your application to Cloudflare Workers. If you don't have it yet, follow the installation guide to get it setup. Be sure to authenticate the CLI as well.

If you cannot install wrangler and you are using Windows because of OpenSSL issue, retry it after install Strawberry Perl.

If you don't already have an account, then create a cloudflare account here and after verifying your email address with Cloudflare, go to your dashboard and set up your free custom Cloudflare Workers subdomain.

Next, you should create KV namespaces for your application.

$ wrangler kv:namespace create REMIX_JOKE
...
{ binding = "REMIX_JOKE", id = "e1076e1120f945d184898c67de69758a" }
$ wrangler kv:namespace create REMIX_JOKE_USER
...
{ binding = "REMIX_JOKE_USER", id = "b9aa11dfa8f54807bc4d5aa141561e10" }

Then, add the results in the wrantler.toml file.

kv_namespaces = [
  { binding = "REMIX_JOKE", id = "e1076e1120f945d184898c67de69758a" },
  { binding = "REMIX_JOKE_USER", id = "b9aa11dfa8f54807bc4d5aa141561e10" }
]

Also, you should add a secret key to your application.

$ wrangler secret put SESSION_SECRET

If upload fails, remove all SESSION_SECRET from the codes and retry. Then, rollback the changes.

Once that's done, you should be able to deploy your app:

$ npm run deploy

Finally, you have to add your secret to your Cloudflare Workers app.