passive-yellow•17mo ago

How to add Example pages?

I used the CLI to create a new CRA project but the example pages were not created in the process, is there a way to create them after the initial process?

7 Replies

kapa.ai•17mo ago

Hi @alanleyva22. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, the refine CLI wizard does provide an option to add example pages during the project initialization process. If you select Yes for the Do you want to add example pages? option, refine will add sample CRUD pages utilizing refine Inferencer and fill the resources property. These example pages provide a clearer understanding of how refine works and let you test out the CRUD operation functionalities. If you missed this step during the initial setup, I recommend checking the refine documentation (https://refine.dev/docs) for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

passive-yellowOP•17mo ago

@kapa.ai How can I create a new page?

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Creating new pages in refine is straightforward thanks to its built-in command create-resource. This command is particularly useful for CRUD apps, allowing you to specify the type of pages to generate via flags list, create, edit, and show. Here's an example of how to create a new page that lists the content:

npm run refine create-resource products -- --actions list

npm run refine create-resource products -- --actions list

After running this command, a new folder pages will be created in your project file tree. Inside it, there will be a route-specific folder products that includes files index.ts and list.tsx. You can then open the list.tsx file and you'll notice that refine has even designed the Inferencer component that will automatically help you to design the views for resources based on the data structure:

import { IResourceComponentsProps, GetListResponse } from "@pankod/refine-core";  
import { AntdInferencer } from "@pankod/refine-inferencer/antd";  
  
export const ProductsList: React.FC<  
 IResourceComponentsProps<GetListResponse<{}>>  
> = () => {  
 return <AntdInferencer />;  
};

import { IResourceComponentsProps, GetListResponse } from "@pankod/refine-core";  
import { AntdInferencer } from "@pankod/refine-inferencer/antd";  
  
export const ProductsList: React.FC<  
 IResourceComponentsProps<GetListResponse<{}>>  
> = () => {  
 return <AntdInferencer />;  
};

The newly created list page is automatically imported and passed in as resource prop in the Refine component in App.tsx. For more details, you can refer to this blog post (https://refine.dev/blog/react-admin-frameworks-refine-vs-blitz-js) on the refine website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

flat-fuchsia•17mo ago

Hey @alanleyva22 you can use the create-resource method of cli. https://refine.dev/docs/packages/documentation/cli/#create-resource https://refine.dev/docs/packages/documentation/cli/ Also if you want to use inferencer you can check the following sample applications. https://github.com/refinedev/refine/tree/next/examples/inferencer-antd/src/pages/blog-posts

passive-yellowOP•17mo ago

Thanks! That'sexactly what I was looking for