how to setup demo line up: a strapi container and a refine app container?

as title say, i am trying on a centos docker env to play this demo:

docker run -it -p 1337:1337 --rm --entrypoint=/bin/bash --name strapi -v /home/book/:/srv/app naskio/strapi

docker run -it -p 1337:1337 --rm --entrypoint=/bin/bash --name strapi -v /home/book/:/srv/app naskio/strapi

inside the 'strapi' container:

strapi new standardbook --quickstart --no-run
cd standardbook
npm run build 
yarn develop

strapi new standardbook --quickstart --no-run
cd standardbook
npm run build 
yarn develop

on the web page 0.0.0.0:1337 we create the strapi full access token like : dc7ff0d97ee7b1271e4ca94748da5c00ad8d26a77bb873f5fa26be0d1850ddba064ba331388b6e4bd483c2c116795f778726808130530a25f4d9b751b465f20de4c973cc2e23bdaaabb332a2f0c27e02f3536539ec89a0d091fbb831c475e59849a2525c73059079c576385b61db9c3c1ca97e619f72a20f748831c58f7c6935 create the refine container:

docker run -it --link strapi -p 5173:5173 node:18 /bin/bash

docker run -it --link strapi -p 5173:5173 node:18 /bin/bash

inside the 'refine' container:

npm i @refinedev/strapi-v4

npm create refine-app@latest

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-nextjs
✔ What would you like to name your project?: · test
✔ Choose your backend service to connect: · data-provider-strapi-v4
✔ Do you want to use a UI Framework?: · mui
✔ Do you want to add example pages?: · inferencer
✔ Do you need i18n (Internationalization) support?: · i18n-mui
✔ Choose a package manager: · yarn


cd test

yarn dev --host

npm i @refinedev/strapi-v4

npm create refine-app@latest

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-nextjs
✔ What would you like to name your project?: · test
✔ Choose your backend service to connect: · data-provider-strapi-v4
✔ Do you want to use a UI Framework?: · mui
✔ Do you want to add example pages?: · inferencer
✔ Do you need i18n (Internationalization) support?: · i18n-mui
✔ Choose a package manager: · yarn


cd test

yarn dev --host

this is OK for your kindly demo which link to your website. but, when i try to reconfig the src/constants.ts :

export const API_URL = "http://strapi:1337";
export const TOKEN_KEY = "922d1fa6d8068efa9ecb1fb2d981a82d384561dfab0c2afaaed3900e1ac10171551663c6cd4c888c07e7a2c89bd3cd7b85b123e82d1da7b7c129f71e21e6a52a4c798be85fcf551429675cb471f006b7f202f2fe14b675c92c81b96062750de9aa3e8b3aa930a80a29d30c31118bd1dc3ba36a58e93e2aa9a801712f7c124d71";

//export const API_URL = "https://api.strapi-v4.refine.dev";
//export const TOKEN_KEY = "strapi-jwt-token";

export const API_URL = "http://strapi:1337";
export const TOKEN_KEY = "922d1fa6d8068efa9ecb1fb2d981a82d384561dfab0c2afaaed3900e1ac10171551663c6cd4c888c07e7a2c89bd3cd7b85b123e82d1da7b7c129f71e21e6a52a4c798be85fcf551429675cb471f006b7f202f2fe14b675c92c81b96062750de9aa3e8b3aa930a80a29d30c31118bd1dc3ba36a58e93e2aa9a801712f7c124d71";

//export const API_URL = "https://api.strapi-v4.refine.dev";
//export const TOKEN_KEY = "strapi-jwt-token";

i can not login on the http://localhost:5173/ , the web ui failed by the image attachment. pls correct me which step i had do the wrong thing, thanks very much !

11 Replies

kapa.ai•16mo ago

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

kapa.ai•16mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation and blog posts for more information on setting up and configuring refine with Strapi: - Refine Documentation (https://refine.dev/docs) - Refine Blog (https://refine.dev/blog) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Blog | refine

A Docusaurus powered blog!

kapa.ai•16mo ago

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

ratty-blush•16mo ago

Hey @timiil, Actually I have not enough knowledge about Docker, so I can't help you with that. But maybe, our Strapi server repo can inspire you. You can check it out here: https://github.com/refinedev/refine-strapi/tree/v4

wise-white•15mo ago

i think may be is the CORS problem, do you kindly have an example about how to use vite proxy config or nginx to reverse proxy the strapi that can let refine access it ?

stormy-gold•15mo ago

please tell me how to remove this item.

stormy-gold•15mo ago

I also can't find the layout component in the latest file structure. Please help me asap

xenial-black•15mo ago

@saheb961 https://refine.dev/docs/packages/documentation/inferencer/#hiding-the-code-viewer-and-development-warning

Inferencer | refine

@refinedev/inferencer is a package that provides a way to automatically generate views for resources based on the data structure. The aim is to reduce the amount of time spent on creating views for resources by generating the code automatically that can be customized easily.

stormy-gold•15mo ago

When the web will be deployed on the server, will it still be showing this?

xenial-black•15mo ago

Hello @saheb961 please read the link I sent you. It will be hidden on prod as mentioned.

stormy-gold•15mo ago

Roger, thanks