Skip to content

Commit bc0352d

Browse files
ryanflorenceryanflorence
committed
docs: add deploying doc
1 parent 501d554 commit bc0352d

File tree

1 file changed

+65
-99
lines changed

1 file changed

+65
-99
lines changed

‎docs/start/framework/deploying.md‎

Lines changed: 65 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Deploying
3-
hidden: true
3+
order: 10
44
---
55

66
# Deploying
@@ -14,138 +14,104 @@ React Router can be deployed two ways:
1414
- Fullstack Hosting
1515
- Static Hosting
1616

17-
To get the most benefits from React and React Router, we recommend fullstack hosting.
17+
The official [React Router templates](https://github.com/remix-run/react-router-templates) can help you bootstrap an application or be used as a reference for your own application.
1818

19-
## Fullstack Hosting
19+
When deploying to static hosting, you can deploy React Router the same as any other single page application with React.
2020

21-
You can get the most out of React and React Router by deploying to a fullstack hosting provider.
21+
## Templates
2222

23-
### Cloudflare
23+
After running the `create-react-router` command, make sure to follow the instructions in the README.
2424

25-
Click this button to automatically deploy a starter project with your GitHub account:
26-
27-
[![Deploy to Cloudflare][cloudflare_button]][cloudflare]
28-
29-
This template includes:
30-
31-
- SQL database with Cloudflare D1
32-
- Key Value storage with Cloudflare KV
33-
- Asset upload and storage with Cloudflare R2
34-
- Image uploads, storage, and optimized `<Image/>` component with Cloudflare Images
35-
36-
[View it live →](https://react-router-template.pages.dev)
37-
38-
### Epic Stack (Fly.io)
39-
40-
Start with the Epic Stack template and follow the instructions in the README:
25+
### Node.js with Docker
4126

4227
```
43-
npx degit @epicweb-dev/template my-app
28+
npx create-react-router@latest --template remix-run/react-router-templates/default
4429
```
4530

46-
This maximalist template includes a lot, including, but not limited to:
31+
- Server Rendering
32+
- Tailwind CSS
4733

48-
- Regional hosting on Fly.io
49-
- Multi-region, distributed, SQLite Database with LiteFS and Prisma
50-
- Image hosting
51-
- Error monitoring with Sentry
52-
- Grafana Dashboards of the running app
53-
- CI with GitHub actions
54-
- Authentication with Permissions
55-
- Full unit/integration testing setup
56-
- Transactional Email with Resend
34+
The containerized application can be deployed to any platform that supports Docker, including:
5735

58-
[View it live →](https://react-router-template.fly.dev)
36+
- AWS ECS
37+
- Google Cloud Run
38+
- Azure Container Apps
39+
- Digital Ocean App Platform
40+
- Fly.io
41+
- Railway
5942

60-
### Ion (AWS)
61-
62-
Start with the ion template and follow the instructions in the README:
43+
### Node with Docker (Custom Server)
6344

6445
```
65-
npx degit @sst/react-template my-app
46+
npx create-react-router@latest --template remix-run/react-router-templates/node-custom-server
6647
```
6748

68-
This template includes:
49+
- Server Rendering
50+
- Tailwind CSS
51+
- Custom express server for more control
6952

70-
- Data Persistence with DynamoDB
71-
- Delayed Jobs with Amazon SQS
72-
- Image uploads, storage, and optimized `<Image/>` component with S3
73-
- Asset uploads and storage with S3
53+
The containerized application can be deployed to any platform that supports Docker, including:
7454

75-
[View it live →](#TODO)
55+
- AWS ECS
56+
- Google Cloud Run
57+
- Azure Container Apps
58+
- Digital Ocean App Platform
59+
- Fly.io
60+
- Railway
7661

77-
### Netlify
62+
### Node with Docker and Postgres
7863

79-
Click this button to automatically deploy a starter project with your GitHub account:
80-
81-
[![Deploy to Netlify][netlify_button]][netlify_spa]
64+
```
65+
npx create-react-router@latest --template remix-run/react-router-templates/node-postgres
66+
```
8267

83-
This template includes:
68+
- Server Rendering
69+
- Postgres Database with Drizzle
70+
- Tailwind CSS
71+
- Custom express server for more control
8472

85-
- Integration with Supabase
86-
- Optimized Image Transforms with `<Image/>` and Netlify Image CDN
73+
The containerized application can be deployed to any platform that supports Docker, including:
8774

88-
[View it live →](#TODO)
75+
- AWS ECS
76+
- Google Cloud Run
77+
- Azure Container Apps
78+
- Digital Ocean App Platform
79+
- Fly.io
80+
- Railway
8981

9082
### Vercel
9183

92-
Click this button to automatically deploy a starter project with your GitHub account:
93-
94-
[![Deploy to Vercel][vercel_button]][vercel_spa]
95-
96-
This template includes:
97-
98-
- Postgres database integration with Vercel Postgres
99-
- Optimized Image Transforms with `<Image/>` and Vercel images
100-
- ISR for statically pre-rendered routes
101-
102-
[View it live →](#TODO)
103-
104-
### Manual Fullstack Deployment
105-
106-
If you want to deploy to your own server or a different hosting provider, see the [Manual Deployment](../how-to/manual-deployment) guide.
107-
108-
## Static Hosting
84+
```
85+
npx create-react-router@latest --template remix-run/react-router-templates/vercel
86+
```
10987

110-
React Router doesn't require a server and can run on any static hosting provider.
88+
- Server Rendering
89+
- Tailwind CSS
11190

112-
### Popular Static Hosting Providers
91+
### Cloudflare Workers w/ D1
11392

114-
You can get started with the following Deploy Now buttons:
93+
```
94+
npx create-react-router@latest --template remix-run/react-router-templates/cloudflare-d1
95+
```
11596

116-
[![Deploy SPA Cloudflare][cloudflare_button]][cloudflare_spa]
97+
- Server Rendering
98+
- D1 Database with Drizzle ORM
99+
- Tailwind CSS
117100

118-
[![Deploy Netlify SPA][netlify_button]][netlify_spa]
101+
### Cloudflare Workers
119102

120-
[![Deploy Vercel SPA][vercel_button]][vercel_spa]
103+
```
104+
npx create-react-router@latest --template remix-run/react-router-templates/cloudflare
105+
```
121106

122-
### Manual Static Hosting
107+
- Server Rendering
108+
- Tailwind CSS
123109

124-
Ensure the `ssr` flag is `false` in your Vite config:
110+
### Netlify
125111

126-
```ts
127-
import react from "@react-router/dev/vite";
128-
import { defineConfig } from "vite";
129-
export default defineConfig({
130-
plugins: [react({ ssr: false })],
131-
});
132112
```
133-
134-
Build the app:
135-
136-
```shellscript
137-
npx vite build
113+
npx create-react-router@latest --template remix-run/react-router-templates/netlify
138114
```
139115

140-
And then deploy the `build/client` folder to any static host.
141-
142-
You'll need to ensure that all requests are routed to `index.html`. This is different with every host/server, so you'll need to find out how with your host/server.
143-
144-
[netlify_button]: https://www.netlify.com/img/deploy/button.svg
145-
[netlify_spa]: https://app.netlify.com/start/deploy?repository=https://github.com/ryanflorence/templates&create_from_path=netlify-spa
146-
[netlify_spa]: https://app.netlify.com/start/deploy?repository=https://github.com/ryanflorence/templates&create_from_path=netlify
147-
[vercel_button]: https://vercel.com/button
148-
[vercel_spa]: https://vercel.com/new/clone?repository-url=https://github.com/ryanflorence/templates/tree/main/vercel-spa
149-
[cloudflare_button]: https://deploy.workers.cloudflare.com/button
150-
[cloudflare_spa]: https://deploy.workers.cloudflare.com/?url=https://github.com/ryanflorence/templates/tree/main/cloudflare-spa
151-
[cloudflare]: https://deploy.workers.cloudflare.com/?url=https://github.com/ryanflorence/templates/tree/main/cloudflare
116+
- Server Rendering
117+
- Tailwind CSS

0 commit comments

Comments
 (0)