Deploying to Cloudflare Workers in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Cloudflare adapter for Remix.

Remix

import { [1] } from '@remix-run/cloudflare';

Drag options to blanks, or click blank then click option'

AcreateCloudflareAdapter

BcreateCloudflareWorker

CcreateCloudflareHandler

DcreateCloudflare

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createCloudflareHandler' which does not exist.

Importing 'createCloudflareWorker' which is incorrect.

The correct import is createCloudflareAdapter which sets up Remix to run on Cloudflare Workers.

2fill in blank

medium

Complete the code to export the Remix handler for Cloudflare Workers.

Remix

export default [1](remixHandler);

Drag options to blanks, or click blank then click option'

AcreateCloudflareWorker

BcreateCloudflareHandler

CcreateCloudflareAdapter

DcreateCloudflare

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like 'createCloudflareWorker'.

Forgetting to wrap the handler with the adapter.

You export the Remix handler wrapped by createCloudflareAdapter to run on Cloudflare Workers.

3fill in blank

hard

Fix the error in the Cloudflare Workers deployment script by completing the environment variable access.

Remix

export default [1](remixHandler, { env: [2].ENV });

Drag options to blanks, or click blank then click option'

AcreateCloudflareAdapter

Bprocess

CglobalThis

Dself

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'process' which is not available in Cloudflare Workers.

Not wrapping the handler with the adapter function.

The deployment script must use createCloudflareAdapter to wrap the handler and pass environment variables correctly. The environment variables are accessed via self.ENV in Cloudflare Workers.

4fill in blank

hard

Fill both blanks to correctly define the Cloudflare Worker entry point and export.

Remix

addEventListener('[1]', event => {
  event.respondWith([2](event.request));
});

Drag options to blanks, or click blank then click option'

Afetch

BcreateCloudflareAdapter

ChandleRequest

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect event names like 'request' or 'handle'.

Not using the adapter function to respond.

The Cloudflare Worker listens for the 'fetch' event and uses createCloudflareAdapter to handle requests.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that filters environment variables for Cloudflare deployment.

Remix

const envVars = Object.fromEntries(
  Object.entries(env).filter(([[1], [2]]) => [3].startsWith('CF_'))
);

Drag options to blanks, or click blank then click option'

Akey

Bvalue

Denv

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'env' instead of 'key' in the filter condition.

Swapping key and value in destructuring.

This code extracts environment variables whose keys start with 'CF_'. The entries are filtered by key.