Remix Muco Stack

💿 Features

This Stack has been created with two main purposes: simplicity and solidity. Aiming for those who loves to build their stuff from the ground, with a solid and well tested template, to start coding right away.

• Fly app Deployment with Docker.
• Database ORM with Prisma.
• Production-Ready with PostgreSQL Database
• GitHub Actions for Deploy on merge to Production and Staging environments.
• Healthcheck Endpoint for Fly backups Region Fallbacks.
• Styling with Chakra UI
• Unit Testing with Vitest and Testing Library.
• Linting with ESLint.
• Code formatting with Prettier.
• Static Types with TypeScript.

Learn more about Remix Stacks.

🔋 Quickstart

# Initialize the following template into your workspace:
npx create-remix --template muco-rolle/remix-muco-stack

# Setup database:
Manually set your Postgres database keys into the .env file.

# Seed your database:
npm run setup

# Build your server:
npm run build

# Start dev server:
npm run dev

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

🚀 Deployment

This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.

Prior to your first deployment, you'll need to do a few things:

• Install Fly

• Sign up and log in to Fly:

fly auth signup

• Create two apps on Fly, one for staging and one for production:

fly apps create remix-muco-stack
fly apps create remix-muco-stack-staging

Make sure this name matches the app set in your fly.toml file. Otherwise, you will not be able to deploy.

• Initialize Git:

git init --initial-branch=main

• Create a new GitHub Repository, and then add it as the remote for your project. Do not push your app yet!

git remote add origin <ORIGIN_URL>

• Add a FLY_API_TOKEN to your GitHub repo. To do this, go to your user settings on Fly and create a new token, then add it to your repo secrets with the name FLY_API_TOKEN.

• Add a SESSION_SECRET to your fly app secrets, to do this you can run the following commands:

fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app remix-muco-stack
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app remix-muco-stack-staging

Note: If you don't have openssl installed, you can also use 1password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.

• Create a database for both your staging and production environments. Run the following:

fly postgres create --name remix-muco-stack-db
fly postgres attach remix-muco-stack-db

fly postgres create --name remix-muco-stack-staging-db
fly postgres attach remix-muco-stack-staging-db

Fly will take care of setting the DATABASE_URL secret for you.

• Now that everything is set up you can commit and push your changes to your repo.

Every commit to your main branch will trigger a deployment to your production environment, and every commit to your dev branch will trigger a deployment to your staging environment.

⚙️ GitHub Actions

We use GitHub Actions for continuous integration and deployment.

Anything that gets into the main branch will be deployed to production after running tests / build / etc.
Anything in the dev branch will be deployed to staging.

🧩 Testing

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

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 to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

Also feel free to update prettier settings from .package-json with your preferred configuration.