Request to backend fails link on main webpage on no- localhost machine.

[JasonHoku]

Error: Objects are not valid as a React child (found: TypeError: Failed to fetch). If you meant to render a collection of children, use an array instead.
in code (at Home.tsx:41)
in p (at Home.tsx:40)
in Home (created by Context.Consumer)
in Route (at Routes.tsx:49)
in header (at Routes.tsx:37)
in div (at Routes.tsx:36)
in Switch (at Routes.tsx:31)
in Routes (at App.tsx:4)
in App (at src/index.tsx:9)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.tsx:8)
▼ 28 stack frames were expanded.
code
Home.tsx:41
p
Home.tsx:40
Route
Routes.tsx:49
header
Routes.tsx:37
div
Routes.tsx:36
Switch
Routes.tsx:31
Routes
App.tsx:4
App
src/index.tsx:9
BrowserRouter
src/index.tsx:8
throwOnInvalidObjectType
/node_modules/react-dom/cjs/react-dom.development.js:13413
reconcileChildFibers
/node_modules/react-dom/cjs/react-dom.development.js:14313
reconcileChildren
/node_modules/react-dom/cjs/react-dom.development.js:16762
updateHostComponent
/node_modules/react-dom/cjs/react-dom.development.js:17302
beginWork
/node_modules/react-dom/cjs/react-dom.development.js:18627
HTMLUnknownElement.callCallback
/node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
/node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
/node_modules/react-dom/cjs/react-dom.development.js:292
beginWork$1
/node_modules/react-dom/cjs/react-dom.development.js:23203
performUnitOfWork
/node_modules/react-dom/cjs/react-dom.development.js:22157
workLoopSync
/node_modules/react-dom/cjs/react-dom.development.js:22130
performSyncWorkOnRoot
/node_modules/react-dom/cjs/react-dom.development.js:21756
(anonymous function)
/node_modules/react-dom/cjs/react-dom.development.js:11089
unstable_runWithPriority
/node_modules/scheduler/cjs/scheduler.development.js:653
runWithPriority$1
/node_modules/react-dom/cjs/react-dom.development.js:11039
flushSyncCallbackQueueImpl
/node_modules/react-dom/cjs/react-dom.development.js:11084
flushSyncCallbackQueue
/node_modules/react-dom/cjs/react-dom.development.js:11072
scheduleUpdateOnFiber
/node_modules/react-dom/cjs/react-dom.development.js:21199
dispatchAction
/node_modules/react-dom/cjs/react-dom.development.js:15660
▲ 28 stack frames were expanded.
queryBackend
src/views/Home.tsx:23
20 | const message = await getMessage();
21 | setMessage(message);
22 | } catch (err) {

23 | setError(err);
| ^ 24 | }
25 | };
26 |
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

I assume this to be indicative of the methodology for file pathing, needing %PUBLIC_URL% or another director to account for react link generation.

I will take a look at this in the next couple days, might be a quick fix.

[Buuntu]

I don't think this is really an issue but if you want to make it clearer that you have to edit BACKEND_URL on non-localhost, go for it. It will be next to impossible to fit everyone's use case but we can make it more clear about how to edit this. We can provide the localhost url as a cookiecutter param, for example.

[JasonHoku]

I believe I have isolated the issue to file:
fastapi-react{{cookiecutter.project_slug}}\frontend\src\config\index.tsx

export const BASE_URL: string = 'http://localhost:{{cookiecutter.port}}';
export const BACKEND_URL: string =
  'http://localhost:{{cookiecutter.port}}/api/v1';

Is it possible to declare a %PUBLIC_URL% here or use 0.0.0.0 to fix the back-end request function?

I'll test this soon and will conclude in a few days with either a readme pr or a pr to config\index.tsx

[Buuntu]

I would prefer having this as a cookiecutter setting, so like {{cookiecutter.localhost}}:{{cookiecutter.port}} and then update the README