The New Wave Stack

Introduction

In March 2022, Remix introduced a feature of the Remix CLI called Remix Stacks. This allows you to quickly and easily generate a Remix project from a pre-created template. These custom stacks are named after music genres. At Clerk, we’re all about making the developer experience as easy as possible, so we knew this was a perfect opportunity to combine the best of Remix’s development tools with Clerk’s easy-to-use user management and authentication platform.

New wave music was defined by the transition from the punk music scene to a more radio-friendly form of pop expressionism. In many ways, Modern Web tools like Clerk, Netlify, and Fauna represent much of the same thing for building web applications. Clerk’s custom Remix stack takes the DIY (Punk) freedom of designing an app the way you want and combines it with production-ready (Pop) resources to make your product accessible to a broader audience.

Welcome to The New Wave Stack. Let’s get happy.

Check out the official New Wave Stack repo on GitHub

The critical parts of any custom Remix stack are:

• Automatic deployment - Netlify
• Authentication - Clerk
• Database - Fauna
• Testing - Cypress, RTL, Jest
• Linting/Formatting/TypeScript - ESLint, Prettier

Deployment with Netlify

While it may seem odd to start with deployment, it can often be much more challenging to configure later on in the development process. If you can get deployment set up early and test deployment often, it can save you an incredible amount of stress in the future.

This stack is all about making things easy for developers, so Netlify was an obvious choice for deployment. Netlify allows you to connect a git repository and set up deployments to happen when a branch is merged into production. Or, if you prefer to deploy manually, Netlify has an easy-to-use CLI. It also provides deployment previews, rollbacks to previous deployments, and many other great features that make getting your application in front of users incredibly simple.

Authentication with Clerk

The New Wave Stack comes with Clerk’s complete authentication and user management features. This means that developers don’t have to worry about building many of the things users have come to expect from web applications. Components like Sign In, Sign Up, and User Profiles are available from the ground up. Clerk’s wide variety of authentication options will allow you the flexibility to manage your users the way you want. Setting up an account on Clerk takes seconds, and configuring your New Wave app is as simple as adding your API keys.

Database management with Fauna

Fauna is an excellent cloud-based database solution that combines the flexibility of NoSQL systems with the relational querying capabilities of SQL databases into a transactional database with GraphQL support and other modern features, such as real-time streaming.

Although Fauna offers built-in identity, authentication, and password management functionality, it requires that you manage the user data yourself. Clerk provides features like social SSO, passwordless authentication, multi-session management, and more without the hassle of managing your user and identity service. Clerk’s JSON Web Token (JWT) Templates feature makes it easy to authenticate queries to your Fauna database.

We have a comprehensive walkthrough on building an application with Remix, Clerk, and Fauna. Working through this tutorial will give you a solid understanding of how to set up your first Fauna database and how to query the database from your Remix application. It’s also quite a lot of fun.

Styling with Tailwind

Like everything else in this stack, our approach to styling is to provide the tool that allows you to build your application quickly and efficiently, which is why we configured The New Wave Stack to use Tailwind out of the box. Tailwind is possibly the most common solution for developers styling their Remix applications, and there are plenty of good reasons why. It allows for inline styling, which can speed up development time, and the generated CSS file for even large applications is usually less than 10kb.

Testing with Cypress/Testing Library

Developer experience is always a primary focus for Clerk, so we chose to configure this stack with Cypress for end-to-end testing. Cypress is commonly used in Remix stacks as it provides an effortless and straightforward testing environment. We’re sticking with the classic Testing Library/Jest combo for lower-level tests.

Formatting

Finally, we arrive at the last few touches that make your code sparkle. We’ve set up Prettier for formatting, ESLint to take care of linting, and TypeScript to manage typing.

Conclusion

It was a lot of fun building out the New Wave Stack and discovering how each piece seemed to fit naturally with the others. One of the benefits of Modern Web tools is the intuitive way they can be made to work together. It’s getting faster and easier for talented developers to take an idea and immediately begin putting it together. We want people to spend as little time as possible on setting up their app so that they can focus their effort on what makes their project special and unique.