how to handle client side react routing in loopback.js

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

Procathedral

ok, so I made some changes to code. Now, i see my react components and I also see api data. However, explorer is still not working. – Procathedral

Now, I have to delete my history, cookies etc. Than, it start showing me explorer. I am happy with this solution for now. – Procathedral

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

Shewchuk

alternative, status can be set as /status ` router.get('/status', server.loopback.status());` and statics can be serve as ` [ { "paths": ["/"], "params": "$!../client/build" }, { "paths": ["*"], "params": "$!../client/build" } ]` – Tareyn

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.

Loredo

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/

Stand