A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Live Demo · Twitter

A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

💿 Features

• Fly app Deployment with Docker.
• Database ORM with Prisma.
• Production Ready with SQLite and PostgreSQL.
• GitHub Actions for Deploy on merge to Production and Staging environments.
• Healthcheck Endpoint for Fly backups Region Fallbacks.
• Styling with Tailwind.css + Tailwind Prettier-Plugin.
• End-to-End testing with Playwright.
• Unit Testing with Vitest and Testing Library.
• Local third party request mocking with MSW.
• Linting with ESLint.
• Code formatting with Prettier.
• Static Types with TypeScript.
• Support for Javascript developers with continuous updates over time based on remix.init.

Learn more about Remix Stacks.

🔋 Quickstart

Playwright Stack has support for multiple database based on Prisma. The installer will prompt a selector allowing you to choose the database your project will run on. Deployment files will be updated matching the required criteria to successfully deploy to Fly.io

To get started, run the following commands in your console:

# Initializes template in your workspace:
npx create-remix@latest --template remix-stacks/playwright

# You will be prompted to select the database your project will run on.
# ...

# Starts dev server:
npm run dev

Note: Cloning the repository instead of initializing it with the above commands, will result in a inappropriate experience. This template uses remix.init to configure itself and prepare your environment.

Prisma Migrations

If your database choice was PostgreSQL, you will need to run Prisma migrations with your Postgres client running on the background. In order to accomplish it, feel free to remove the folder inside /prisma called /migrations, and run npx prisma migrate dev --name init to properly setup them.

🚀 Deployment

In order to keep a better track and an easier maintenance of each deployment documentation, we moved each one to its own file.

Check SQLite DEPLOYMENT.md or PostgreSQL DEPLOYMENT.md to get your app to production.

⚙️ GitHub Actions

We use GitHub Actions for continuous integration and deployment.

Anything that gets into the main branch will be deployed to production after running tests, build, etc.
Anything in the dev branch will be deployed to staging.

🧩 Testing

Playwright

We use Playwright for End-to-End tests. 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.

Vitest

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

To run these tests in development, run npm run test or npm run test:cov to get a detailed summary of your tests.

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 to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

This template has pre-configured prettier settings on .package-json. Feel free to update each value with your preferred work style.

✨ Support

If you found the template useful, support it with a Star ⭐
It helps the repository grow and gives us motivation to keep working on it. Thanks you!