How to serve robots.txt and sitemap.xml in firebase hosted create-react-app with react-router

Question

I am trying to serve robots.txt and sitemap.xml at the root of my site like www.fakedomain.com/robots.txt. My setup described below seems to work at localhost, but not at hosted production. Hosted production returns a blank page.

Using firebase hosting, create-react-app, and react-router for url handling

Current setup mimics: How can I serve robots.txt on an SPA using React with Firebase hosting?

Folder Structure: public/robots.txt public/sitemap.xml

TopApp.js

import React, { Component } from 'react';
import {
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

import App from './App';

class TopApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };

  }

  render() {

    return (
      <Switch>
        <Route exact path="/" render={() => (<Redirect to={"/app"}/>)}/>
        <Route path={"/app"} component={() => <App />} />
      </Switch>
    )

  }

}

export default (TopApp);

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
} from 'react-router-dom';
import TopApp from './components/TopApp';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <BrowserRouter>
        <TopApp/>
    </BrowserRouter>,
    document.getElementById('root')
);

registerServiceWorker();

Answer 1

It looks like your Firebase public directory, doesn't point to the react-create-app production /build directory.

You can try to change the Firebase public configuration to:

"hosting": {
  "public": "build"
}

Or you can try start the process from scratch, but following my explanations and key steps of building and deploying react-create-app in Firebase:

1. Firstly, in order to have a public asset (robots.txt, sitemap.xml and etc.) in react-create-app you have to put the asset in your /public directory.

   Here's what react-create-app' docs says:

   If you put a file into the public folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched.

2. In order to build the app for production, you will execute npm run build or yarn build. This will build the app to the /build folder along with your robots.txt and sitemap.xml files.

3. Next step is to initialize Firebase with firebase init and to select Firebase Hosting setup.

4. Here's the most significant part and where I think the problem is. By default, the Firebase public directory is /public. But in our react-create-app case, our production files are located in /build. So you have to change it manually to /build.

5. Later Firebase will ask you if you want the app to be configured as a single-page app.

   1. Type y and press enter. Accepting this option, later on you'll be able to use react-router-dom to navigate through your application.
   2. It will say File build/index.html already exists. Overwrite? Press N - because we already have it from react-create-app.

6. The last step is to deploy the project with firebase deploy.

---

Credits to the author of How to deploy create react app to firebase.