title: how to handle client side react routing in loopback.js
body: <p>I am using react with loopback. I wanted to integrate react code in loopback.
  if i do these 3 steps</p>
  
  <pre><code>1)middleware.json - put this
   "files": {
      "loopback#static": {
        "params":"$!../client"
      }
    },`
  2)root.js
   router.get('/');
  3)front end code
   "build": "react-scripts build &amp;&amp; cp -r build/* ../client/",
  </code></pre>
  
  <p>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.</p>
  
  <p>But then i rolled it back , because i wanted to use loopback explorer again.</p>
  
  <p>So, i deleted all these added code and explorer came back
  but when i added it again
  Now, i dont see my react code</p>
  
  <p>I can still see explorer at <a href="http://localhost:3000/explorer/" rel="nofollow noreferrer">http://localhost:3000/explorer/</a>
  if i go to <a href="http://localhost:3000/apphome" rel="nofollow noreferrer">http://localhost:3000/apphome</a>
  i see 404 error</p>
  
  <p>Right now, my middleware.json file for loopback is </p>
  
  <pre><code>    {
    "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": {}
    }
  }
  </code></pre>
  
  <p>root.js file </p>
  
  <pre><code>'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);
  };
  </code></pre>
  
  <p>-edit </p>
  
  <p>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. </p>
  
  <p>middleware.json</p>
  
  <pre><code>"files": {
      "loopback#static": [
        {
          "name": "publicPath",
        "paths": ["/"],
        "params": "$!../client"
        },
        {
          "name": "reactRouter",
        "paths": ["*"],
        "params": "$!../client/index.html",
        "optional":true
        }
      ]
    },
  </code></pre>
  
  <p>I have also changed named of root.js to root_something.js . In documentation, its written, no need of root.js</p>