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
- 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.
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 devNote: Cloning the repository instead of initializing it with the above commands, will result in a inappropriate experience. This template uses
remix.initto configure itself and prepare your environment.
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.
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.
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.
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.
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.
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.
This project uses ESLint for linting. That is configured in .eslintrc.js.
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.
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!
For "normal" dev just run npm run dev and have at it. However it is better to "test as you go". Run npm run dev in one tab
and npm run pw:dev in another. This will open up playwright with the inspector enabled. As you develop a feature, try using
playwright to make all the commands. Then save those into an integration test.