calciferlo / hive-stack

The Remix Stack with testing, linting, formatting, etc.

Remix Hive Stack

Learn more about Remix Stacks.

npx create-remix@latest --template remix-run/hive-stack

What's in the stack

• Production-ready SQLite Database
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Styling with Tailwind
• End-to-end testing with Playwright
• Local third party request mocking with MSW
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript
• UI Component library Radix UI
• Javascript library for talking to Hive API DHive
• Hivesigner

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Development

• This step only applies if you've opted out of having the CLI install dependencies for you:

  npx remix init

• Initial setup: If you just generated this project, this step has been done for you.

  npm run setup

• Start dev server:

  npm run dev

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

Testing

Playwright

We use Playwright for our End-to-End tests in this project. You'll find those in the tests/e2e directory. As you make changes, add to an existing file or create a new file in the tests/e2e directory to test your changes.

To run these tests in development, run npm run test:e2e:dev, you can also run your tests using the VS Code Extension.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.