Firebase server attempts to resolve http://localhost:5000/view/-B3eiIwcYV to a physical file and issues a 404 error

[Theo]

So, I'm hosting a react project on firebase (issuing firebase serve or on firebaseapp.com), and have a specified react route as follows:

    import React from 'react';

    import { Router, Route, IndexRoute } from 'react-router'

    ....

    render(

      <Provider store={store}>

        { /* Tell the Router to use our enhanced history */ }

        <Router history={history}>

          <Route path="/" component={App}>

            <IndexRoute component={PhotoGrid} />

            <Route path="/view/:postId" component={Single}></Route>

          </Route>

        </Router>

      </Provider>,

      document.getElementById('root')

    );

which if 'Single' is reloaded (browser reload) causes firebase to attempt to locate the physical location for http://{localhost or firebaseapp.com}/view/-B3eiIwcYV, which of course doesn't exist.

When I initialised my project with firebase, I specified the following option:

    Configure as a single-page app (rewrite all urls to /index.html)? -> No

The generated error is as follows:

    -B3eiIwcYV Failed to load resource: the server responded with a status of 404 (Not Found)

How do I resolve this?

[Jacob Wenger]

Hey Theo,

For React Router, you did in fact want to say Yes to "Configure as a single-page app." You can manually do this by following the instructions and code sample in the Rewrites section of the Firebase Hosting docs.

Cheers,

Jacob

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-talk+unsubscribe@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/78ba3f2d-f001-4374-a106-0c1182a7ff9d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Theo]

Hi Jacob,

I forgot to include the error message generated, in my previous reply to you, which is:

127.0.0.1 - - [22/Feb/2017:15:28:39 +0000] "GET /view/bundle.js HTTP/1.1" 304 - "http://localhost:5000/view/-B3
eiIwcYV" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safar
i/537.36 OPR/43.0.2442.806"                                                                                    
Error: Can't remove headers after they are sent                                                                
    at ServerResponse.OutgoingMessage.removeHeader (_http_outgoing.js:380:11)                                  
    at Responder.handleNotModified (C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules
\superstatic\lib\responder.js:133:12)                                                                          
    at C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\superstatic\lib\responder.js
:96:19                                                                                                        
    at tryCatch (C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\rsvp\dist\rsvp.js:
538:12)                                                                                                        
    at invokeCallback (C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\rsvp\dist\rs
vp.js:553:13)                                                                                                  
    at publish (C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\rsvp\dist\rsvp.js:5
21:7)                                                                                                          
    at flush (C:\Users\d0475\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\rsvp\dist\rsvp.js:237
3:5)                                                                                                          
    at _combinedTickCallback (internal/process/next_tick.js:67:7)                                              
    at process._tickCallback (internal/process/next_tick.js:98:9)  

 

Many thanks in advance,

Theo                                          

To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

[Theo]

Hi Jacob,

Once I incorporate the rewrite rule as follows:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

I now receive the following error message when doing a page reload on the following url format http://localhost:5000/view/-B3eiIwcYV:

Uncaught SyntaxError: Unexpected token <

which is pointing to line 1 (<!DOCTYPE html>) of my index.html, which is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flamingo City</title>
    <link rel="shortcut icon" type="image/png" href="http://wes.io/ehRe/my-favourite-icon.png"/>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

How do I resolve this?

Many thanks in advance,

Theo

On Tuesday, 21 February 2017 19:35:52 UTC, Jacob Wenger wrote:

To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

[Theo]

Hi,

Actually the issue turns out not to be a problem with <!DOCTYPE html> but the fact that <script type="text/javascript" src="bundle.js"></script>, specified in the same index.html, could not be found. Changing the src to "/bundle.js" resolved the issue.

So the question is, shouldn't the generated error message be more specific, as in 'file not found'?

[Michael Bleigh]

The problem here is that by rerouting all URLs to /index.html the site will serve up that HTML for any page with a 200. Chrome tries to load that HTML as JS and you get the parsing error. One way to mitigate this is by scoping your JavaScript/CSS into directories and altering your rewrite rule to exclude them:

{

  "hosting": {

    "rewrites": [{"source": "!{/js,/css}/**", "destination": "/index.html"}]

  }

}

That way anything in the /js or /css subdirectories will serve 404 pages if there's no exact file match.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/befe7fad-37a8-4ca7-aff1-3a593091a3f5%40googlegroups.com.