wip deploying doc

remix-run · May 24, 2024 · 495f76b · 495f76b
1 parent bf1d3d7
commit 495f76b
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 80 deletions.
diff --git a/docs/guides/manual-deployment.md b/docs/guides/manual-deployment.md
@@ -0,0 +1,14 @@
+---
+title: Manual Deployment
+---
+
+# Manual Deployment
+
+- static files
+- running the server
+- polyfilling globals
+- runtime adapters
+  - express
+  - fastify
+  - custom
+  - etc.
diff --git a/docs/start/deploying.md b/docs/start/deploying.md
@@ -6,124 +6,145 @@ new: true
 
 # Deploying
 
-React Router apps can be deployed anywhere through bundler configuration.
+React Router can be deployed two ways:
 
-Many hosts automatically detect React Router apps and can deploy them without additional configuration. You can also control the output to accommodate any hosting provider, see the [Vite Plugin][vite_plugin] for more information.
+- Static Hosting
+- Fullstack Hosting
 
-## Netlify SPA
+To get the most benefits from React and React Router, we recommend fullstack hosting.
 
-[![Deploy SPA to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ryanflorence/templates&create_from_path=netlify-spa)
+## Fullstack Hosting
 
-## Generic Static Hosting
+You can get the most out of React and React Router by deploying to a fullstack hosting provider.
 
-First ensure your bundler plugin is configured without server rendering:
+### Cloudflare
 
-```tsx filename=vite.config.ts
-import react from "@react-router/dev/vite";
-import { defineConfig } from "vite";
+Click this button to automatically deploy a starter project with your GitHub account:
 
-export default defineConfig({
-  plugins: [react()],
-});
-```
+[![Deploy to Cloudflare][cloudflare_button]][cloudflare]
 
-Run the build:
+This template includes:
 
-```shellscript nonumber
-vite build
-```
+- SQL database with Cloudflare D1
+- Key Value storage with Cloudflare KV
+- Asset upload and storage with Cloudflare R2
+- Image uploads, storage, and optimized `<Image/>` component with Cloudflare Images
+
+[View it live →](https://react-router-template.pages.dev)
 
-Now deploy the build output directory at `build/client`.
+### Epic Stack (Fly.io)
 
-For instance, with cloudflare pages it's a single command:
+Start with the Epic Stack template and follow the instructions in the README:
 
-```shellscript nonumber
-npx wrangler pages deploy build/client
+```
+npx degit @epicweb-dev/template my-app
 ```
 
-## Cloudflare Pages Single Page App
+This maximalist template includes a lot, including, but not limited to:
 
-Configure vite:
+- Regional hosting on Fly.io
+- Multi-region, distributed, SQLite Database with LiteFS and Prisma
+- Image hosting
+- Error monitoring with Sentry
+- Grafana Dashboards of the running app
+- CI with GitHub actions
+- Authentication with Permissions
+- Full unit/integration testing setup
+- Transactional Email with Resend
 
-```tsx filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
-import { cloudflare } from "@react-router/cloudflare";
-import { defineConfig } from "vite";
+[View it live →](https://react-router-template.fly.dev)
 
-export default defineConfig({
-  plugins: [
-    app({
-      preset: cloudflare(),
-    }),
-  ],
-});
-```
+### Ion (AWS)
 
-Build and deploy:
+Start with the ion template and follow the instructions in the README:
 
-```shellscript nonumber
-npx react-router dev
-npx react-router build
-npx wrangler pages deploy
+```
+npx degit @sst/react-template my-app
 ```
 
-## AWS Lambda with SST
+This template includes:
 
-First [install SST][sst_install]:
+- Data Persistence with DynamoDB
+- Delayed Jobs with Amazon SQS
+- Image uploads, storage, and optimized `<Image/>` component with S3
+- Asset uploads and storage with S3
 
-```shellscript nonumber
-curl -fsSL https://ion.sst.dev/install | bash
-```
+[View it live →](#TODO)
 
-Init SST in your project root:
+### Netlify
 
-```shellscript nonumber
-sst init
-```
+Click this button to automatically deploy a starter project with your GitHub account:
 
-And then build and deploy:
+[![Deploy to Netlify][netlify_button]][netlify_spa]
 
-```shellscript nonumber
-npx react-router build
-sst deploy
-```
+This template includes:
 
-Note when using SST the dev command changes
+- Integration with Supabase
+- Optimized Image Transforms with `<Image/>` and Netlify Image CDN
 
-```shellscript nonumber
-sst dev react-router dev
-```
+[View it live →](#TODO)
 
-## Vercel
+### Vercel
 
-```tsx filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
-import { vercel } from "@vercel/remix";
-import { defineConfig } from "vite";
+Click this button to automatically deploy a starter project with your GitHub account:
 
-export default defineConfig({
-  plugins: [app({ preset: vercel() })],
-});
-```
+[![Deploy to Vercel][vercel_button]][vercel_spa]
 
-```shellscript nonumber
-npx react-router build
-vercel --prod
-```
+This template includes:
+
+- Postgres database integration with Vercel Postgres
+- Optimized Image Transforms with `<Image/>` and Vercel images
+- ISR for statically pre-rendered routes
+
+</div>
+
+[View it live →](#TODO)
+
+### Manual Fullstack Deployment
+
+If you want to deploy to your own server or a different hosting provider, see the [Manual Deployment](../guides/manual-deployment.md) guide.
+
+## Static Hosting
+
+React Router doesn't require a server and can run on any static hosting provider.
+
+### Popular Static Hosting Providers
 
-Or use their [GitHub Repo Integration][vercel_git].
+You can get started with the following Deploy Now buttons:
 
-[vercel_git]: https://vercel.com/new
-[sst_install]: https://ion.sst.dev/docs/#cli
+[![Deploy SPA Cloudflare][cloudflare_button]][cloudflare_spa]
 
-## Fly.io
+[![Deploy Netlify SPA][netlify_button]][netlify_spa]
 
-TODO:
+[![Deploy Vercel SPA][vercel_button]][vercel_spa]
 
-## Custom Node Server
+### Manual Static Hosting
+
+Ensure the `ssr` flag is not `true` in your Vite config:
+
+```ts
+import react from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [react({ ssr: false })],
+});
+```
+
+Build the app:
+
+```shellscript
+npx vite build
+```
 
-Please reference the [Custom Server][custom_server] guide for deploying to any Node environment.
+And then deploy the `build/client` folder to any static host.
 
-## TODO: add some others
+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.
 
-[vite_plugin]: ../bundler/vite
+[netlify_button]: https://www.netlify.com/img/deploy/button.svg
+[netlify_spa]: https://app.netlify.com/start/deploy?repository=https://github.com/ryanflorence/templates&create_from_path=netlify-spa
+[netlify_spa]: https://app.netlify.com/start/deploy?repository=https://github.com/ryanflorence/templates&create_from_path=netlify
+[vercel_button]: https://vercel.com/button
+[vercel_spa]: https://vercel.com/new/clone?repository-url=https://github.com/ryanflorence/templates/tree/main/vercel-spa
+[cloudflare_button]: https://deploy.workers.cloudflare.com/button
+[cloudflare_spa]: https://deploy.workers.cloudflare.com/?url=https://github.com/ryanflorence/templates/tree/main/cloudflare-spa
+[cloudflare]: https://deploy.workers.cloudflare.com/?url=https://github.com/ryanflorence/templates/tree/main/cloudflare