Indie Stack Simple Notes

screenshot of Indie Stack Simple Notes

Remix Indie Stack - Simple notes app

Overview:

The Remix Indie Stack is a full-stack development toolkit that provides a comprehensive set of tools and features for building web applications. It includes various components such as Fly app deployment with Docker, SQLite database, healthcheck endpoint for Fly backups region fallbacks, GitHub Actions for deployment, email/password authentication with cookie-based sessions, database ORM with Prisma, styling with Tailwind, end-to-end testing with Cypress, local third party request mocking with MSW, unit testing with Vitest and Testing Library, code formatting with Prettier, linting with ESLint, and static types with TypeScript. The stack allows for easy customization by forking and modifying the codebase.

Features:

  • Fly app deployment with Docker
  • Production-ready SQLite Database
  • Healthcheck endpoint for Fly backups region fallbacks
  • GitHub Actions for deploy on merge to production and staging environments
  • Email/Password Authentication with cookie-based sessions
  • Database ORM with Prisma
  • Styling with Tailwind
  • End-to-end testing with Cypress
  • Local third party request mocking with MSW
  • Unit testing with Vitest and Testing Library
  • Code formatting with Prettier
  • Linting with ESLint
  • Static Types with TypeScript

Development

  1. If you have just generated the project, the initial setup has been done for you.
  2. Start the dev server by running the following command:
npm run dev

This command will start your app in development mode and rebuild assets on file changes. 3. The database seed script has created a new user with some data that you can use to get started. The login credentials for this user are:

Email: rachel@remix.run
Password: rachelrox
  1. Relevant code for creating users, logging in and out, and creating and deleting notes can be found in the following files:
  • ./app/models/user.server.ts
  • ./app/session.server.ts
  • ./app/models/note.server.ts

Deployment

To deploy your app using the Remix Indie Stack, follow these steps:

  1. Install Fly and sign up/log in to Fly.
  2. Create two apps on Fly - one for staging and one for production.
  3. Create a new GitHub repository for your project.
  4. Add a FLY_API_TOKEN to your GitHub repository's secrets. To do this, go to your user settings on Fly to generate a new token, and then add it to your repo secrets with the name FLY_API_TOKEN.
  5. Add a SESSION_SECRET to your Fly app secrets by running the following commands:
flyctl secrets set SESSION_SECRET=<your_secret> --app <your_app_name>

If you don't have openssl installed, you can generate a random secret using a password generator tool like 1password and replace <your_secret> with the generated secret. 6. Create a persistent volume for the SQLite database in both your staging and production environments by running the following command:

flyctl volumes create data --region <your_region> --app <your_app_name>

Replace <your_region> with the desired region for the volume and <your_app_name> with the name of your app. 7. Commit and push your changes to your GitHub repository. Every commit to the main branch will trigger a deployment to your production environment, and every commit to the dev branch will trigger a deployment to your staging environment.

Summary:

The Remix Indie Stack is a powerful toolkit for full-stack web development. It provides a wide range of features and tools, from deployment and database management to authentication and testing. With its easy customization options, developers can quickly build and modify applications to suit their specific needs. Whether you're a beginner or an experienced developer, the Remix Indie Stack offers everything you need to build robust and scalable web applications.