This movie database serves as an example for various data loading strategies in Remix.

Watch the "Remix Singles" on YouTube

To get started create a wrangler.toml configuration file, which will provide information like our database name.

cp wrangler.example.toml wrangler.toml

You'll notice that the name and database_name are already filled in. Deploying to Cloudflare shows you how to create a Pages project and D1 database, which you can name these whatever you want.

To create and seed your local database, run the following. There is a lot of data, so this may take a little while.

npm run db:migrate -- --local

You can now start the app locally.

npm run dev

The deployed version of this application uses Cloudflare Pages and Cloudflare D1. In order to create and use these resources, you'll first need to log in to your Cloudflare account.

If you don't have an account this command will take you to a page where you can create one for free.

npx wrangler login

First we need to provision a new D1 database. Be sure to copy the database_id returned and add it to your wrangler.toml.

npx wrangler d1 create remix-movies-db

To setup and seed the database, run the following

npm run db:migrate

Run the following to setup a new Cloudflare Pages project

npx wrangler pages project create remix-movies

Before you deploy your application, you'll need to bind your D1 database to your Pages Function.

Select your Pages project > Settings > Functions > D1 database bindings > Add binding.

Name the Variable name "DB" and select remix-movies-db (or whatever you named your D1 database) from the dropdown and hit Save.

If you get stuck, visit the Cloudflare docs for the full instructions

Now you're ready to deploy your site!

npm run pages:deploy