Remix Edu Stack

Learn more about about using Remix at CZI's Education initiative at Intro to Remix.

Create a new Remix app from this template by running:

npx create-remix@latest --template chanzuckerberg/edu-stack

Table of contents

• What's in the stack
• Requirements
• Development

What's in the stack

• GitHub Actions for CI
• Code formatting with Prettier
• Component explorer with Storybook
• Email/Password Authentication with cookie-based sessions
• Linting with ESLint
• Local third party request mocking with MSW
• Query external services with GraphQL
• Static Types with TypeScript
• Styling with Tailwind
• Unit testing with Jest and Testing Library

Requirements

• nodenv

Development

• Install the required Node version

  nodenv install

• Install dependencies

  npm install

• Create .env file for local development

  cp .env.example .env

• Run the build, which generates the Node server + some other files:

  npm run build

• If you ever change the GraphQL schema or queries, generate new types with

  npm run codegen

• Start dev server:

  npm start

This starts your app in development mode, rebuilding assets on file changes.

By default there is a new user with some data you can use to get started:

• Email: [email protected]
• Password: password