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
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:
----------------------<@754186866475008101> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold•14mo ago
@kapa.ai How can I create a new page?
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:
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:
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:
----------------------<@754186866475008101> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•14mo 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-postsoptimistic-gold•14mo ago
Thanks!
That'sexactly what I was looking for