You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/Deploy.md
+42-28Lines changed: 42 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,31 @@
1
1
---
2
2
layout: default
3
-
title: "Deploy React-admin"
3
+
title: "Deployment"
4
4
---
5
5
6
-
# Deploy React-admin
6
+
# Deployment
7
7
8
-
You have created an awesome React-admin application. Well done! But now, you want to deploy your application in production so users can actually use it.
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:
React-admin is a framework to build [Single Page Applications](https://developer.mozilla.org/en-US/docs/Glossary/SPA). It means that your app can be served by a simple static web server.
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).
13
15
14
-
**Warning**: If you chose Next.js or Remix, you **have to use a dynamic web server** (e.g. CloudFlare pages, Vercel, etc.).
16
+
## Building The Single Page Application
15
17
16
-
With the default configuration of React-admin, that you can have using [`create-react-admin`](./CreateReactAdmin.md), you can run `yarn build` or `npm run build` to compile your application with [`vite`](https://vite.dev).
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.
17
19
18
-
This builds your application in the `dist` directory at the application root. Let's have a look to what's in there:
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:
19
29
20
30
```tree
21
31
dist/
@@ -26,18 +36,22 @@ dist/
26
36
└ manifest.json
27
37
```
28
38
29
-
As you can see, your app is contained in a single Javascript file, used in a simple `index.html`. To deploy your application, you just need to serve this directory with all URLs handled by `index.html`.
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`.
30
42
31
-
There are multiple ways to deploy your app automatically to various hosts which does not require you to setup a web server manually. Some of these are addressed in this page.
43
+
There are multiple ways to do so, let's see a few of them.
32
44
33
-
## Deploy With GitHub Actions And GitHub Pages
45
+
## Deploying To GitHub Pages
34
46
35
-
You can deploy your application with [GitHub Pages](https://pages.github.com)by setting up a [GitHub Actions](https://github.com/features/actions) workflow. To set it up, you need to [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).
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.
36
48
37
-
Then, initialize a new workflow in `.github/workflows/admin.yml` with the following content:
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:
38
52
39
53
```yaml
40
-
name: Build and deploy React-admin
54
+
name: Build and deploy
41
55
42
56
on:
43
57
push:
@@ -46,7 +60,7 @@ on:
46
60
47
61
jobs:
48
62
build:
49
-
name: Build the admin panel to be deployed
63
+
name: Build the single-page application
50
64
runs-on: ubuntu-latest
51
65
environment: github-pages
52
66
steps:
@@ -71,7 +85,7 @@ jobs:
71
85
path: dist/
72
86
73
87
deploy:
74
-
name: Deploy React-admin application to GitHub Pages
88
+
name: Deploy to GitHub Pages
75
89
runs-on: ubuntu-latest
76
90
needs: build
77
91
@@ -90,14 +104,14 @@ jobs:
90
104
uses: actions/deploy-pages@v4
91
105
```
92
106
93
-
This workflow will run everytime 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.
94
-
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.
95
108
96
-
## Deploy With GitHub Actions to Cloudflare
109
+
## Deploying to Cloudflare
97
110
98
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/)
99
112
100
113
Then, create a new API token from your [Cloudflare Profile page](https://dash.cloudflare.com/profile/api-tokens):
114
+
101
115
- First click on `Create Token`
102
116
- Then on the `Edit Cloudflare Workers` template
103
117
- Select your organization inside the `Account Resources`
@@ -113,21 +127,21 @@ To create a new Cloudflare Page App, go to your Cloudflare dashboard, then on `C
113
127
114
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:
115
129
116
-
117
130
```sh
118
-
# Your Cloudlfare API token
131
+
# Your Cloudflare API token
119
132
CLOUDFLARE_API_TOKEN=
120
133
121
-
# Your Cloudlfare Account ID
134
+
# Your Cloudflare Account ID
122
135
CLOUDFLARE_ACCOUNT_ID=
123
136
124
-
# The Cloudflare Pages
137
+
# The Cloudflare Pages project name
125
138
CLOUDFLARE_PROJECT_NAME=
126
139
```
127
140
128
-
Once your project has been configured, initialize a new workflow in your repository `.github/workflows/admin.yml` with the following content:
141
+
Once your project has been configured, initialize a new workflow in your repository `.github/workflows/deploy.yml` with the following content:
142
+
129
143
```yml
130
-
name: Build and deploy React-admin
144
+
name: Build and deploy
131
145
132
146
on:
133
147
push:
@@ -136,7 +150,7 @@ on:
136
150
137
151
jobs:
138
152
build:
139
-
name: Build the admin panel to be deployed
153
+
name: Build the single-page application
140
154
runs-on: ubuntu-latest
141
155
steps:
142
156
- uses: actions/checkout@v4
@@ -158,7 +172,7 @@ jobs:
158
172
path: dist
159
173
160
174
deploy:
161
-
name: Deploy React-admin Application to Cloudflare
175
+
name: Deploy to Cloudflare
162
176
runs-on: ubuntu-latest
163
177
needs: build
164
178
@@ -185,4 +199,4 @@ jobs:
185
199
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
186
200
```
187
201
188
-
Now, each time your code will be pushed to your main branch, an action will be started that will automatically deploy your app to your Cloudflare Pages app.
202
+
Now, each time your code is pushed to the `main` branch, GitHub will automatically deploy your app to your Cloudflare Pages.
0 commit comments