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
kapa.ai13mo 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
kapa.ai13mo 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
kapa.ai13mo ago
<@659228943206842389> kapa.ai is still learning and improving, please let us how it did by reacting below
fair-rose
fair-rose13mo 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
compatible-crimson
compatible-crimson13mo ago
Currently new to both Remix and Refine Will give a try after some time