📢 Shoutout: A lot of initial inspiration came from rphlmr's remix-hono-vite template. Go check out their template too for more inspiration!
This opinionated template combines the power of Remix for server-side rendering and the lightweight Hono framework to make building and deploying full-stack apps simple and efficient. It’s set up with sensible defaults for modern development practices, including testing, CI/CD, type safety, and consistent code formatting. Perfect for developers looking to scaffold a performant web app quickly.
If you’re familiar with these tools, you'll feel right at home, and if not, I hope this setup makes it easy to dive in!
💡 Note: Most of this template is grab and go, but there are a few areas that would need to be updated to be production ready. I marked areas that would need updating with
@UPDATE. You can grep this project to find what needs to be updated.
Below I've laid out the technologies used in this project and some back stories behind them. These are just tools that I've used and loved. I'm sure there's other great stuff out there like Deno, which I want to try out in the future. Don't feel like this is the only way to achieve the same result
- PNPM - super-efficient package manager that saves space and helps keep dependencies organized, which is a big plus for complex projects.
- Vite - quick, no-fuss bundler that’s great for modern frameworks and makes development faster with instant hot reloads.
- Github Actions - automates testing, linting, and deploying, all within GitHub, so you can speed up your workflow without leaving your repo.
- Docker - package everything into containers, so deployments are consistent and easy no matter where you're running them.
Each of these tools addresses a key aspect of the build process—from managing dependencies efficiently (PNPM), to creating a fast dev experience (Vite), automating quality checks (GitHub Actions), and ensuring reliable deployments (Docker).
- React - super popular library for building user interfaces, letting you create reusable components that make your app easier to maintain.
- Hono - lightweight web framework with a focus on speed, great for creating APIs or simple web apps with minimal setup.
- Remix - takes React to the next level by offering server-side rendering (SSR), which helps make your app faster and more SEO-friendly.
- Radix - UI components that are accessible and customizable, perfect if you’re building your own design system from scratch.
- StyleX - fresh take on styling in JavaScript, offering new tools to make styling easier and more modular.
⚠️ Caution: Radix currently uses inline styles which results in a needing a weaker CSP policy. I have been trying to get some traction on changing this. If top notch security is a deciding factor, you may want to pick another library here or roll your own.If you want to use Radix and want to see them become more CSP conscious please interact with my discussion to help boost priority.
Each of these choices was made to create a responsive, SEO-friendly, and scalable front end, with flexibility for UI and styling so you can adapt as project requirements evolve.
- Vitest - great for running unit and integration tests; it's fast and works seamlessly with modern JavaScript frameworks, so you can easily test components and functions in isolation.
- Playwright - handles end-to-end (E2E) testing, simulating real user interactions across different browsers, which is super useful for ensuring everything works together as expected.
With Vitest handling isolated testing and Playwright covering real-world scenarios, you can be confident in both the small parts and the overall behavior of your app.
- Typescript - adds type safety to JavaScript, which helps catch errors early and makes code easier to understand.
- ESlint - enforces coding standards and best practices, catching common errors and keeping code consistent across the team.
- Prettier - takes care of formatting, so you don’t have to worry about spaces, indentation, or style debates—it just makes everything look good automatically.
This set of tools not only helps keep the codebase error-free but also ensures consistency, which is especially important when multiple developers are contributing.
You might be wondering why this template doesn't come with preconfigured state management. In my experience, developers often reach for a state manager too quickly, loading it up with more than they need. I prefer to go as far as possible using built-in state management options, like search parameters and simple React contexts, before adding a dedicated state manager.
If you do find yourself needing more advanced state management, I've had good experiences with Zustand and Redux Toolkit. Redux got a lot of criticism in the past, but Redux Toolkit has made it both powerful and approachable—it might surprise you!
I find NVM to be a great way to switch between node versions when working on multiple projects. Whether it's node v20, v18, or v8 NVM can quickly swap node versions!
Once NVM is setup run the following:
nvm install
npm i -g pnpm@^8
pnpm installAlternatively, you can use corepack to manage your package management.
After running pnpm install various lifecycle scripts will run to setup git hooks and certificates to utilize https for
the dev server.
You'll need to modify your operating system's host file to include local.example-test.com this is helps with CORS and
CSP issues that can come up when just using localhost or 127.0.0.1.
💡 Note: If you want to build off of this template for your own project, then you'll need to set the host file value to the domain of your app instead of
local.example-test.com.
Most production applications require environment variables to configure settings securely. We’ll set up a .env file to
inject variables locally, making them accessible via process.env. This template also uses Zod to
ensure type safety when loading these variables.
- Create a
.envfile at the root of the project and add the following values:
ABORT_DELAY=5000
APP_NAME=Example App- These variables are now accessible on the
process.envobject when the server starts and validated with Zod to catch any type issues early.
To start the dev server run the following and navigate to the url provided in the terminal:
pnpm dev- Unit/Integration Tests: Run the following to test individual components or functions in isolation:
pnpm test- End-to-End (E2E) Tests: Run the following to simulate user interactions across different browsers:
pnpm test:e2e:localMost IDEs will take in the provided eslint and prettier configs and automatically format files on save. If not running the following will check to make sure there are no styling issues:
pnpm lint # eslint check
pnpm format:verify # prettier check
pnpm typecheck # typechecking