Remix Supabase Playwright

Overview:

Remix Supabase Playwright is a development tool that combines the features of Remix, Supabase, and Playwright to provide an efficient way to create and test web applications. This tool allows developers to build and test their applications in a seamless manner, with built-in support for Supabase session cookies and authentication during testing. Additionally, Remix Supabase Playwright offers deployment options for live Supabase instances, including the ability to deploy using the built-in Remix app server or a custom hosting solution.

Features:

• Development Mode: Remix Supabase Playwright allows developers to start their applications in development mode, which automatically rebuilds assets on file changes, making the development process more efficient.
• Testing with Playwright: Playwright tests can be run with Remix Supabase Playwright, providing developers with a reliable way to test their applications and ensure their functionality.
• Authentication during Testing: By specifying the user fixture in Playwright tests, Remix Supabase Playwright sets the Supabase session cookie, allowing users to be already authenticated during the test.
• Deployment to Live Supabase Instances: Remix Supabase Playwright offers a deployment process for applications that are ready to be pushed to a live Supabase instance, ensuring a smooth transition from development to production.
• DIY Deployment: For developers familiar with deploying node applications, Remix Supabase Playwright provides a production-ready Remix app server, allowing for easy deployment of the application.
• Using a Template: Remix Supabase Playwright offers template options for hosting, allowing developers to create a new project and copy their app folder over to the pre-configured project for their target server.

Installation:

To install Remix Supabase Playwright, follow these steps:

1. Open your terminal and navigate to your desired directory.

2. Run the following command to start your app in development mode:

   remix run
   

3. To run Playwright tests, use the following command:

   remix test --playwright
   

4. If you want to run only tests containing the “signup” keyword, you can specify the user fixture in your Playwright tests:

   async ({ page, user }) => {
     // Your test code here
   }
   

   This will set the Supabase session cookie and authenticate the user during the test.

5. If you’ve made any database migrations and want to push them to a live Supabase instance, first build your app for production using the following command:

   remix build
   

6. Then, run the app in production mode:

   remix run --production
   

7. Finally, choose a hosting solution for your deployment:

   • If you’re familiar with deploying node applications, you can use the built-in Remix app server, which is production-ready. Make sure to deploy the output of the Remix build by using the following path: build/public/build/.
   • If you prefer to use a template for hosting, you can create a new project using the npx create-remix@latest command, select your desired hosting option, and then copy the app folder from your previous project to the new one.

Summary:

Remix Supabase Playwright is a powerful development tool that combines the functionalities of Remix, Supabase, and Playwright to provide an efficient and seamless experience for building, testing, and deploying web applications. Its features include development mode, testing with Playwright, authentication during testing, deployment to live Supabase instances, DIY deployment using the built-in Remix app server, and using a template for hosting. By using Remix Supabase Playwright, developers can streamline their workflow and create high-quality web applications with ease.