Overview

The Remix RockSpec Stack is a comprehensive stack for building full-stack Progressive Web Apps (PWAs) using Remix. It offers a wide range of features including fly app deployment with Docker, production-ready PostgreSQL database, email/password authentication, database ORM with Prisma, styling with Tailwind, end-to-end testing with Cypress, code formatting with Prettier, linting with ESLint, and static types with TypeScript.

Features

• Fly app deployment with Docker
• Production-ready PostgreSQL Database
• Fully functional Progressive Web App native capabilities including automatic caching, network detection, and more.
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Styling with Tailwind
• End-to-end testing with Cypress
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Installation

To install and set up the Remix RockSpec Stack, follow these steps:

1. Create a .env file and copy the content from the .env.example file. Delete the .env.example file afterwards.
2. Provision the database and connect it to the app using the DATABASE_URL environment variable. Skip this step if you’re using Fly Postgres database.
3. If you don’t have a Postgres database already, you can quickly provision one for free using Railway.
4. Set up Prisma and connect it to the database.
5. Generate VAPID Keys for the Push API subscription service and store the public key in the VAPID_PUBLIC_KEY and the private key in the VAPID_PRIVATE_KEY environment variable.
6. Start the development server.

Below is an example of the relevant code for a simple note-taking app built with the Remix RockSpec Stack:

• Creating users and logging in/out: ./app/models/user.server.ts
• User sessions and verification: ./app/session.server.ts
• Creating and deleting notes: ./app/models/note.server.ts
• Client-side PWA APIs: ./app/utils/client/pwa-utils.client.ts
• Server-side PWA APIs: ./app/utils/server/pwa-utils.server.ts
• PWA manifest: ./app/routes/resources/manifest.json.ts

Summary

The Remix RockSpec Stack is a powerful stack for building full-stack Progressive Web Apps. It provides a range of features and tools for seamless development, including fly app deployment, a production-ready database, authentication, styling, testing, code formatting, linting, and static typing. With its comprehensive features and easy installation process, the Remix RockSpec Stack is a great choice for developers looking to build robust PWAs.