how to handle client side react routing in loopback.js - reactjs

Question

I am using react with loopback. I wanted to integrate react code in loopback.
if i do these 3 steps
1)middleware.json - put this
"files": {
"loopback#static": {
"params":"$!../client"
}
},`
2)root.js
router.get('/');
3)front end code
"build": "react-scripts build && cp -r build/* ../client/",
That didopen my react site on localhost:3000 .Now issue is when i do this
i cant access my loopback on :3000/explorer
So my first question is in this scenario, how to access explorer.
But then i rolled it back , because i wanted to use loopback explorer again.
So, i deleted all these added code and explorer came back
but when i added it again
Now, i dont see my react code
I can still see explorer at http://localhost:3000/explorer/
if i go to http://localhost:3000/apphome
i see 404 error
Right now, my middleware.json file for loopback is
{
"initial:before": {
"loopback#favicon": {}
},
"initial": {
"compression": {},
"cors": {
"params": {
"origin": true,
"credentials": true,
"maxAge": 86400
}
},
"helmet#xssFilter": {},
"helmet#frameguard": {
"params": [
"deny"
]
},
"helmet#hsts": {
"params": {
"maxAge": 0,
"includeSubdomains": true
}
},
"helmet#hidePoweredBy": {},
"helmet#ieNoOpen": {},
"helmet#noSniff": {},
"helmet#noCache": {
"enabled": false
}
},
"session": {},
"auth": {},
"parse": {
"body-parser#json": {},
"body-parser#urlencoded": {
"params": {
"extended": true
}
}
},
"routes": {
"loopback#rest": {
"paths": [
"${restApiRoot}"
]
}
},
"files": {
"loopback#static": {
"params":"$!../client"
}
},
"final": {
"loopback#urlNotFound": {},
"./LoopbackUrlNotFoundCatch.js": {}
},
"final:after": {
"strong-error-handler": {}
}
}
root.js file
'use strict';
//router.get('/', server.loopback.status());
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
-edit
I made some changes. Now, i have react components showing, I can also see data when i use api routes. But, explorer is still missing.
middleware.json
"files": {
"loopback#static": [
{
"name": "publicPath",
"paths": ["/"],
"params": "$!../client"
},
{
"name": "reactRouter",
"paths": ["*"],
"params": "$!../client/index.html",
"optional":true
}
]
},
I have also changed named of root.js to root_something.js . In documentation, its written, no need of root.js

Answer 1

First of all you Should be create react app in an other director like
Root ->
|-- client // emply
|-- clint_src // react app
and getting build react app and copy build files to client
now you should be remove server.loopback.status() in "server/boot/root.js" file
Example:
router.get('/', server.loopback.status());
To :
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
after that you need say to loopback middleware which file should be load in your path
go to middlware /server/middleware.json and replace blow code to "files": {}
"files": {
"loopback#static": [
{
"paths": ["/"],
"params": "$!../client"
},
{
"paths": ["*"],
"params": "$!../client"
}
]
},
on "paths": ["*"], all route will be open react file exeption the "/api" and "explorer" so you should be handle page notfound inside react app
Hope This was help full
Good Luck

Answer 2

I suspect React's default service worker intercepts and tries to cache /explorer. It skips urls prefixed with __ so this might fix the need to clear browser:
In component-config.json:
{ "loopback-component-explorer": {
"mountPath": "/__explorer" }}
Then access explorer at /__explorer.

Answer 3

As the instructions for adding a GUI to a loopback application state, you need to remove the root.js '/' route completely, by either renaming the root.js file to something without a .js extension, or deleting the file altogether.
$ rm root.js
### or, you can do this
$ mv root.js root.js.old
In the loopback 3 server configuration, the client folder has to be setup as a middleware route in middleware.json, like so:
"files": {
"loopback#static": {
"params": "$!../client"
}
},
Now, your client application is served from the /client folder, and by default the static files are served with Express -- so, it will look for index.html when you hit localhost:3000/