Remix Cap Stack

Learn more about Remix Stacks.

npx create-remix@latest --template Deveosys/cap-stack

What's in the stack

• CapRover app deployment with Docker
• Production-ready SQLite Database
• Healthcheck endpoint
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Progressively Enhanced and fully type safe forms with Conform
• Styling with Tailwind
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Development

• First run this stack's remix.init script and commit the changes it makes to your project.

  npx remix init
  git init # if you haven't already
  git add .
  git commit -m "Initialize project"

• Initial setup:

  npm run setup

• Start dev server:

  npm run dev

This starts your app in development mode, rebuilding assets on file changes.

The database seed script creates a new user with some data you can use to get started:

• Email: rachel@remix.run
• Password: racheliscool

Relevant code:

Out of the box, you can create users, log in and log out.

• creating users, and logging in and out ./app/models/user.server.ts
• user sessions, and verifying them ./app/session.server.ts

Deployment

The Remix Cap Stack comes with two files for deployment:

• captain-definition
• Dockerfile

Deployment Process

Setup CapRover if you have not already done so, then follow these steps :

• Create your app on CapRover (e.g. remix-app) with Has Persistent Data checked on.

• Set container port to 3000

• Add the SESSION_SECRET Environmental Variable

• Add a persistant volume for SQLite data:

  Path in App: /data
  Label: remix-app-data (or a specific host path)
  

• Deploy your app!

  $ caprover deploy

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.