---
title: "React Router Boilerplate"
description: "A new React Router app — the result of running `npx create-react-router@latest`."
url: "https://vercel.com/templates/react-router/react-router-boilerplate"
links:
  repository: "https://github.com/vercel/examples/tree/main/framework-boilerplates/react-router"
  demo: "https://react-router-v7-template.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=React+Router+Boilerplate&demo-description=A+new+React+Router+app+%E2%80%94+the+result+of+running+%60npx+create-react-router%40latest%60.&demo-url=https%3A%2F%2Freact-router-v7-template.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7sc6zKPM4smZHtfsZ0nzYY%2Fe9c7566d04fd801b48ca495bd56ee994%2FRRv7_Dark.jpg&project-name=React+Router+Boilerplate&repository-name=react-router-boilerplate&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fframework-boilerplates%2Freact-router&from=templates&skippable-integrations=1"
---

# React Router Boilerplate

A new React Router app — the result of running \`npx create-react-router@latest\`.

# Welcome to React Router!

A modern, production-ready template for building full-stack React applications using React Router.

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)

## Features

- 🚀 Server-side rendering
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
- 📖 [React Router docs](https://reactrouter.com/)

## Getting Started

### Installation

Install the dependencies:

```bash
npm install
```

### Development

Start the development server with HMR:

```bash
npm run dev
```

Your application will be available at `http://localhost:5173`.

## Building for Production

Create a production build:

```bash
npm run build
```

## Deployment

### Docker Deployment

This template includes three Dockerfiles optimized for different package managers:

- `Dockerfile` - for npm
- `Dockerfile.pnpm` - for pnpm
- `Dockerfile.bun` - for bun

To build and run using Docker:

```bash
# For npm
docker build -t my-app .

# For pnpm
docker build -f Dockerfile.pnpm -t my-app .

# For bun
docker build -f Dockerfile.bun -t my-app .

# Run the container
docker run -p 3000:3000 my-app
```

The containerized application can be deployed to any platform that supports Docker, including:

- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway

### DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of `npm run build`

```
├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code
```

## Styling

This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

---

Built with ❤️ using React Router.

## Related Templates

### [SvelteKit Boilerplate](https://vercel.com/templates/svelte/sveltekit-boilerplate)

A SvelteKit app including nested routes, layouts, and page endpoints.

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

### [Create React App](https://vercel.com/templates/react/create-react-app)

A client-side React app created with create-react-app.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.