Skip to content

Commit c47cc57

Browse files
djhidjhi
authored
Merge pull request #10783 from marmelab/docs-deploy
[Doc] Add deployment instructions
2 parents 197583b + 26a4c0c commit c47cc57

File tree

3 files changed

+203
-0
lines changed

3 files changed

+203
-0
lines changed

‎docs/Deploy.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
layout: default
3+
title: "Deployment"
4+
---
5+
6+
# Deployment
7+
8+
You can use react-admin with Vite.js, Next.js, Remix, or any other React platform. Each of these platforms has its own way to deploy your application:
9+
10+
- [Vite deployment guide](https://vite.dev/guide/static-deploy.html)
11+
- [Next.js deployment guide](https://nextjs.org/docs/pages/getting-started/deploying)
12+
- [Remix deployment guide](https://remix.run/docs/en/main/guides/deployment)
13+
14+
The general principles are the same. This tutorial explains how to deploy your React-admin application with [`create-react-admin`](./CreateReactAdmin.md) (powered by Vite.js).
15+
16+
## Building The Single Page Application
17+
18+
React-admin uses the [Single Page Applications](./Architecture.md#single-page-application) architecture. It means that your app can be bundled as a single JavaScript file and served by a simple static web server.
19+
20+
In an application initialized with `create-react-admin`, you can run the `build` command to compile your application:
21+
22+
```sh
23+
npm run build
24+
# or
25+
yarn build
26+
```
27+
28+
This creates a few files in the `dist` directory. Let's have a look to what's in there:
29+
30+
```tree
31+
dist/
32+
├ assets/
33+
│ └ index-F74jyUxd.js
34+
├ favicon.ico
35+
├ index.html
36+
└ manifest.json
37+
```
38+
39+
The entry point is `index.html`. It contains a `<script>` tag that loads the app from the `assets` directory.
40+
41+
To deploy your application, you just need to serve this `dist` directory with all URLs handled by `index.html`.
42+
43+
There are multiple ways to do so, let's see a few of them.
44+
45+
## Deploying To GitHub Pages
46+
47+
[GitHub Pages](https://pages.github.com) can serve static assets from a GitHub repository. You can automate the build step by setting up a [GitHub Actions](https://github.com/features/actions) workflow.
48+
49+
First, [configure the source of your GitHub Pages to GitHub Actions](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow).
50+
51+
Then, initialize a new workflow in `.github/workflows/deploy.yml` with the following content:
52+
53+
```yaml
54+
name: Build and deploy
55+
56+
on:
57+
push:
58+
branches:
59+
- main
60+
61+
jobs:
62+
build:
63+
name: Build the single-page application
64+
runs-on: ubuntu-latest
65+
environment: github-pages
66+
steps:
67+
# Pull the latest version of the application.
68+
- uses: actions/checkout@v4
69+
70+
# Setup NodeJS tools.
71+
- uses: actions/setup-node@v4
72+
with:
73+
node-version: lts/*
74+
- name: Enable corepack to use latest stable yarn
75+
run: corepack enable
76+
77+
# Build the React-admin application.
78+
- name: Build
79+
run: yarn build
80+
81+
# Upload the built application as a GitHub Pages artifact.
82+
- name: Upload static files as artifact
83+
uses: actions/upload-pages-artifact@v3
84+
with:
85+
path: dist/
86+
87+
deploy:
88+
name: Deploy to GitHub Pages
89+
runs-on: ubuntu-latest
90+
needs: build
91+
92+
environment:
93+
name: github-pages
94+
url: ${{ steps.deployment.outputs.page_url }}
95+
96+
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
97+
permissions:
98+
pages: write # to deploy to Pages
99+
id-token: write # to verify the deployment originates from an appropriate source
100+
101+
steps:
102+
# Deploy the GitHub Pages artifact.
103+
- name: Deploy artifact to GitHub Pages
104+
uses: actions/deploy-pages@v4
105+
```
106+
107+
This workflow will run every time you push or merge something in the main branch of your repository. You can find the URL of the deployed website in `Settings > Pages` in your GitHub repository.
108+
109+
## Deploying to Cloudflare
110+
111+
To deploy to [Cloudflare Pages](https://pages.cloudflare.com/), you need to have a [Cloudflare](https://www.cloudflare.com/) account. First, retrieve your account ID from Cloudflare, the documentation on how to retrieve it is available on the [Cloudflare documentation](https://developers.cloudflare.com/fundamentals/account/find-account-and-zone-ids/)
112+
113+
Then, create a new API token from your [Cloudflare Profile page](https://dash.cloudflare.com/profile/api-tokens):
114+
115+
- First click on `Create Token`
116+
- Then on the `Edit Cloudflare Workers` template
117+
- Select your organization inside the `Account Resources`
118+
- Select `All Zones` for `Zone Resources`
119+
- Then `Continue to Summary`
120+
- Then `Create Token`.
121+
122+
More information on how to create an API token is available on the [Cloudflare documentation](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/).
123+
124+
To create a new Cloudflare Page App, go to your Cloudflare dashboard, then on `Compute (workers) > Workers & Pages > Create > Pages tab`. Create a new pages from direct upload, enter your project name and then click on `Create Project`, then go back to the `Compute page`.
125+
126+
![Create a New Cloudflare Pages App](./img/Deploy-Cloudflare-Pages.png)
127+
128+
Once you have configured your API token and retrieved your Account ID, you can setup the following secrets in your repository by going to `Settings > Secrets and variables > Actions` on your GitHub repository:
129+
130+
```sh
131+
# Your Cloudflare API token
132+
CLOUDFLARE_API_TOKEN=
133+
134+
# Your Cloudflare Account ID
135+
CLOUDFLARE_ACCOUNT_ID=
136+
137+
# The Cloudflare Pages project name
138+
CLOUDFLARE_PROJECT_NAME=
139+
```
140+
141+
Once your project has been configured, initialize a new workflow in your repository `.github/workflows/deploy.yml` with the following content:
142+
143+
```yml
144+
name: Build and deploy
145+
146+
on:
147+
push:
148+
branches:
149+
- main
150+
151+
jobs:
152+
build:
153+
name: Build the single-page application
154+
runs-on: ubuntu-latest
155+
steps:
156+
- uses: actions/checkout@v4
157+
158+
- uses: actions/setup-node@v4
159+
with:
160+
node-version: lts/*
161+
162+
- name: Install dependencies
163+
run: npm install
164+
165+
- name: Build
166+
run: npm run build
167+
168+
- name: Upload dist folder as an artifact
169+
uses: actions/upload-artifact@v4
170+
with:
171+
name: dist
172+
path: dist
173+
174+
deploy:
175+
name: Deploy to Cloudflare
176+
runs-on: ubuntu-latest
177+
needs: build
178+
179+
permissions:
180+
contents: read
181+
deployments: write
182+
183+
steps:
184+
- name: Download prebuilt admin
185+
uses: actions/download-artifact@v4
186+
with:
187+
name: dist
188+
path: dist
189+
190+
- name: Display structure of downloaded files
191+
run: ls -R
192+
193+
- name: Deploy artifact to Cloudflare
194+
uses: cloudflare/wrangler-action@v3
195+
with:
196+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
197+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
198+
command: pages deploy dist --project-name=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
199+
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
200+
```
201+
202+
Now, each time your code is pushed to the `main` branch, GitHub will automatically deploy your app to your Cloudflare Pages.

‎docs/img/Deploy-Cloudflare-Pages.png‎

16.3 KB
Loading

‎docs/navigation.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<li {% if page.path == 'Vite.md' %} class="active" {% endif %}><a class="nav-link" href="./Vite.html">Vite</a></li>
1515
<li {% if page.path == 'NextJs.md' %} class="active" {% endif %}><a class="nav-link" href="./NextJs.html">Next.js</a></li>
1616
<li {% if page.path == 'Remix.md' %} class="active" {% endif %}><a class="nav-link" href="./Remix.html">Remix</a></li>
17+
<li {% if page.path == 'Deploy.md' %} class="active beginner" {% endif %}><a class="nav-link" href="./Deploy.html">Deployment</a></li>
1718
</ul>
1819

1920
<ul><div>Guides & Concepts</div>

0 commit comments

Comments
 (0)