charles-clerk-dev / new-wave-stack

Custom Remix stack using Clerk for authentication and full user management.

New Wave Stack

Learn more about Remix Stacks.

For more on our thoughts on the New Wave Stack check out our blog post.

To view this template in deployment visit: new-wave-stack.netlify.app

What's in the stack

• Netlify Deployment
• Email/Password Authentication with Clerk
• Document-relational database with Fauna
• Styling with Tailwind
• End-to-end testing with Cypress
• Unit testing with Jest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Development

Sign Up with Clerk

Sign up with Clerk if you haven't already.

Create a new Clerk application

Create a new application from the Clerk dashboard. Check out the Clerk docs for more information about setting up your Clerk application.

Create a new application using the New Wave Stack Template:

npx create-remix@latest --template charles-clerk-dev/new-wave-stack <your-app>

Navigate into your project directory

cd <your-app>

Create a .env file.

  touch .env

Find your Frontend API key and Backend API key on the Dashboard and add them to that file like this:

CLERK_FRONTEND_API=<YOUR_FRONTEND_API>
CLERK_API_KEY=<YOUR_CLERK_API_KEY>

Install Netlify CLI

If you don't already have the Netlify CLI downloaded, run:

npm i -g netlify-cli@latest

Trigger an initial build

npm run build

Start your development instance

npm run dev

Visit http://localhost:3000/. If everything is set up correctly, you should see something that looks like this:

That's it! You're all set to start building your Remix application with complete user management provided by Clerk.

Database

This template comes pre-configured to make calls to a Fauna database

To make authenticated calls to a Fauna database, you'll need to use one of Clerk's handy JWT Templates. Check out our detailed instructions about setting up Clerk and Fauna).

For a better understanding about how Fauna works with Remix and Clerk, it is highly recommend to work through Clerk's Remix/Clerk/Fauna Tutorial

Styling

This template is pre-configured to use Tailwind styling. For more information about Tailwind classes and core concepts, check out the Tailwind documentation.

Deployment

This template uses Netlify for deployment. Setting up your Remix app to deploy with Netlify couldn't be easier. Step by step instructions can be found here, and deployment only takes minutes.

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. We've included Cypress's example files to help you on your way, but for more information on Cypress, check out their official documentation.

Jest/Testing Library

For lower level tests of utilities and individual components, we use Jest and Testing Library.

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.