From e2a99c0095b601700ca886c34555bda68c982039 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:38:39 +0200 Subject: [PATCH 1/3] Fix Remix Documentation --- docs/Remix.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/docs/Remix.md b/docs/Remix.md index 13dc130d4a2..9748efdf880 100644 --- a/docs/Remix.md +++ b/docs/Remix.md @@ -35,14 +35,40 @@ Add the `react-admin` npm package, as well as a data provider package. In this e cd remix-admin npm add react-admin ra-data-json-server ``` -**Tip**: If you're using yarn, Remix and react-admin both install `react-router`, and due to the way each library handles its dependencies, this results in duplicate packages. To avoid this, use [yarn resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) to force Remix to use the same version of `react-router` as react-admin. So add the following to the `package.json` file: + + +**Tip**: As Remix now use Vite for SSR too, you'll have to add the following to the `vite.config.ts` file: + +```diff +import { vitePlugin as remix } from "@remix-run/dev"; +import { defineConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; + +export default defineConfig({ + plugins: [ + remix({ + future: { + v3_fetcherPersist: true, + v3_relativeSplatPath: true, + v3_throwAbortReason: true, + }, + }), + tsconfigPaths(), + ], ++ ssr: { ++ noExternal: ['ra-data-json-server'] ++ }, +}); +``` + +**Tip**: If you're using yarn, Remix and react-admin both install `react-router`, and due to the way each library handles its dependencies, this results in duplicate packages. To avoid this, use [yarn resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) to force React Admin to use the same version of `react-router` as Remix. So add the following to the `package.json` file: ```js { // ... "resolutions": { - "react-router": "6.8.1", - "react-router-dom": "6.8.1" + "react-router": "6.24.1", + "react-router-dom": "6.24.1" } } ``` From 727777cbe43e8fc18525e4238cc1224bd2531891 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Tue, 9 Jul 2024 17:10:08 +0200 Subject: [PATCH 2/3] Apply review suggestions --- docs/Remix.md | 48 ++++++++++++++++++++++-------------------------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/docs/Remix.md b/docs/Remix.md index 9748efdf880..20a7f920bc1 100644 --- a/docs/Remix.md +++ b/docs/Remix.md @@ -36,8 +36,7 @@ cd remix-admin npm add react-admin ra-data-json-server ``` - -**Tip**: As Remix now use Vite for SSR too, you'll have to add the following to the `vite.config.ts` file: +**Tip**: As Remix now use Vite, you'll have to add the following to the `vite.config.ts` file for some dataProviders such as `ra-data-json-server`: ```diff import { vitePlugin as remix } from "@remix-run/dev"; @@ -115,20 +114,6 @@ body { margin: 0; } **Tip** Don't forget to set the `` prop, so that react-admin generates links relative to the "/admin" subpath: -Finally, update your `remix.config.js` to add `ra-data-json-server` to the `serverDependenciesToBundle` array: - -```diff -/** @type {import('@remix-run/dev').AppConfig} */ -export default { - ignoredRouteFiles: ["**/.*"], -+ serverDependenciesToBundle: ["ra-data-json-server"], - // appDirectory: "app", - // assetsBuildDirectory: "public/build", - // publicPath: "/build/", - // serverBuildPath: "build/index.js", -}; -``` - You can now start the app in `development` mode with `npm run dev`. The admin should render at `http://localhost:3000/admin`, and you can use the Remix routing system to add more pages. ## Adding an API @@ -213,18 +198,29 @@ Update the react-admin data provider to use the Supabase adapter instead of the npm add @raphiniert/ra-data-postgrest ``` -Update your `remix.config.js` to add `@raphiniert/ra-data-postgrest` to the `serverDependenciesToBundle` array: +Update your `vite.config.ts` to add `@raphiniert/ra-data-postgrest` to the `noExternal` array: + ```diff -/** @type {import('@remix-run/dev').AppConfig} */ -export default { - ignoredRouteFiles: ["**/.*"], -+ serverDependenciesToBundle: ["@raphiniert/ra-data-postgrest"], - // appDirectory: "app", - // assetsBuildDirectory: "public/build", - // publicPath: "/build/", - // serverBuildPath: "build/index.js", -}; +import { vitePlugin as remix } from "@remix-run/dev"; +import { defineConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; + +export default defineConfig({ + plugins: [ + remix({ + future: { + v3_fetcherPersist: true, + v3_relativeSplatPath: true, + v3_throwAbortReason: true, + }, + }), + tsconfigPaths(), + ], ++ ssr: { ++ noExternal: ['@raphiniert/ra-data-postgrest'] ++ }, +}); ``` Finally, update your Admin dataProvider: From f3824cbaf3b4ebdce184aa80a32b942f3a59064a Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Wed, 10 Jul 2024 13:14:16 +0200 Subject: [PATCH 3/3] [no ci] Misc wording --- docs/Remix.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Remix.md b/docs/Remix.md index 20a7f920bc1..289f4537db5 100644 --- a/docs/Remix.md +++ b/docs/Remix.md @@ -36,7 +36,7 @@ cd remix-admin npm add react-admin ra-data-json-server ``` -**Tip**: As Remix now use Vite, you'll have to add the following to the `vite.config.ts` file for some dataProviders such as `ra-data-json-server`: +Edit the `vite.config.ts` file to prevent Remix from executing the data provider package server-side: ```diff import { vitePlugin as remix } from "@remix-run/dev"; @@ -55,7 +55,7 @@ export default defineConfig({ tsconfigPaths(), ], + ssr: { -+ noExternal: ['ra-data-json-server'] ++ noExternal: ['ra-data-json-server'] // or the dataProvider you are using + }, }); ```