Remix Jokes with Pending UI, Zod, Tailwind CSS and React Router v7

This is an upgraded and modified version of Remix Jokes that uses the more features of Remix to enable pending UI, zod for schema validation, and Tailwind CSS. It has also been migrated to React Router v7.

• 📖 React Router v7 docs

Development

Run the dev server:

npm run dev

Prisma Setup

Add a .env file to the root of the project, refer to .env.sample for the required environment variables. You need decide between prisma local development with sqlite or a real database with for example sqlserver. Define it in the schema.prisma file.

After switching, delete the prisma/migrations folder before running the migration command.

When using sqlserver, you need to migrate the database schema with:

npm run prisma.migrate

When using sqlite, initialize with:

npm run prisma.push

Seed prisma/seed.ts for initial data:

npm run prisma.seed

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

• build/server
• build/client

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.