Remix Start

Minimal containerized Remix Stack with Tailwind CSS.

pnpm create remix --template riipandi/remix-start app_name

Learn more about Remix Stacks.

---

What's in the stack?

• Deploy to Fly.io using Docker container
• Healthcheck endpoint for Fly backups region fallbacks
• Styling with Tailwind CSS, clsx, and tailwind-merge
• Tailwind linting and formatting with eslint-plugin-tailwindcss
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript
• Unit testing with Vitest
• E2E testing with Playwright

🏁 Quickstart

At least you will need Node.js >=18.17.1 and Docker >= 20.10 for building the container.

Generate Secret Key

Before you continue, you need to create .env file (you can duplicate .env.example) and fill the application secret key with some random string. To generate a secret key, use the following command:

openssl rand -base64 500 | tr -dc 'a-zA-Z0-9' | fold -w 32 | head -n 1

If you don't have openssl installed, you can also use 1password to generate a random secret.

Up and running

pnpm install      # install the dependencies
pnpm dev          # serve with hot reload

pnpm build        # build for production
pnpm start        # launch generated build

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

E2E Testing

pnpm e2e-test:ui

🐳 Build Container

pnpm docker:build

# Run API Docker container in foreground
docker run --rm -it -p 3000:3000 --name remix-start --env-file .env remix-start

🚀 Deployment

Read the guide to learn how to deploy this project.

🧑🏻‍💻 Development

This project uses TypeScript for type checking, ESLint for linting which is configured in .eslintrc.js, and Prettier for auto-formatting in this project. It's recommended to get TypeScript set up for your editor and install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on saving and get a really great in-editor experience with type checking and auto-complete.

👷‍♂️ Contributions

Contributions are welcome! Please open a pull requests for your changes and tickets in case you would like to discuss something or have a question.

Read CONTRIBUTING.md for detailed documentation.

🙏 Thanks to...

In general, I'd like to thank every single one who open-sources their source code for their effort to contribute something to the open-source community. Your work means the world! 🌍 ❤️

📝 License

This project is open-sourced software licensed under the MIT license.

Copyrights in this project are retained by their contributors. See the license file for more information.

---

_{🤫 Psst! If you like my work you can support me via GitHub sponsors.}