How to connect my remix app and refine

How can I connect refine admin dashboard with my remix app.

2 Replies

Hi @toxi_teemo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To connect your Remix app with Refine, you need to initialize the Refine app in the app/root.tsx file of your Remix application. Here's an example of how to do it:

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";  
import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/remix-router";  
import { Layout } from "components/Layout";  

export default function App(): JSX.Element {  
 return (  
 <html lang="en">  
 <head>  
 <Meta />  
 <Links />  
 </head>  
 <body>  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 show: "/posts/show/:id",  
 },  
 {  
 name: "categories",  
 list: "/categories",  
 show: "/categories/show/:id",  
 },  
 ]}  
 >  
 <Layout>  
 <Outlet />  
 </Layout>  
 </Refine>  
 <ScrollRestoration />  
 <Scripts />  
 <LiveReload />  
 </body>  
 </html>  
 );  
}

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";  
import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/remix-router";  
import { Layout } from "components/Layout";  

export default function App(): JSX.Element {  
 return (  
 <html lang="en">  
 <head>  
 <Meta />  
 <Links />  
 </head>  
 <body>  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 show: "/posts/show/:id",  
 },  
 {  
 name: "categories",  
 list: "/categories",  
 show: "/categories/show/:id",  
 },  
 ]}  
 >  
 <Layout>  
 <Outlet />  
 </Layout>  
 </Refine>  
 <ScrollRestoration />  
 <Scripts />  
 <LiveReload />  
 </body>  
 </html>  
 );  
}

In this example, dataProvider is set to a fake REST API and routerProvider is set to the Remix router. The resources prop is used to define the routes for your resources. You can find more information about this in the Refine documentation (https://refine.dev/docs/routing/integrations/remix#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@450983052903186442> kapa.ai is still learning and improving, please let us know how it did by reacting below