Adding Refine to Remix

I have remix project which is already working can I Refine to it. Do we have any douments How to get this done?

5 Replies

kapa.ai•15mo ago

Hi @srinivasarajui. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•15mo ago

---------------------- Yes, you can add Refine to your existing Remix project. To do this, you need to install the @refinedev/remix-router package and set up the router bindings for Refine. Here's a step-by-step guide based on the information extracts: 1. Install the @refinedev/remix-router package:

npm i @refinedev/remix-router

npm i @refinedev/remix-router

2. Use the routerProvider from @refinedev/remix-router to set up the router bindings for Refine. Define the action routes for your resources in the resources array and create your routes in the app/routes directory. 3. Create pages for your resources and routes as needed. For example: - app/routes/posts._index.tsx - List page for posts - app/routes/posts.show.$id.tsx - Detail page for posts - app/routes/categories._index.tsx - List page for categories - app/routes/categories.show.$id.tsx - Detail page for categories 4. Initialize the Refine app in the app/root.tsx file. For more detailed information, you can refer to the Remix Router documentation (https://refine.dev/docs/packages/documentation/routers/remix) provided in the information extracts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Remix | refine

refine provides router bindings and utilities for Remix. This package will provide easy integration between refine and Remix for both existing projects and new projects without giving up the benefits of Remix.

kapa.ai•15mo ago

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

equal-aqua•15mo ago

unfortunately not, but we want to prepare a document for this. For now, you can look at the sample project. 1. wrap your root to access refine features: https://github.com/refinedev/refine/blob/next/examples/with-remix-auth/app/root.tsx#L85 2. protected routes and layout https://github.com/refinedev/refine/blob/next/examples/with-remix-auth/app/routes/_protected.tsx#L16 3. dependencies https://github.com/refinedev/refine/blob/next/examples/with-remix-auth/package.json#L15

genetic-orange•15mo ago

Currently new to both Remix and Refine Will give a try after some time