Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have an SPA built using create-react-app and wish to have a robots.txt like this:

http://example.com/robots.txt

I see on this page that:

You need to make sure your server is configured to catch any URL after it's configured to serve from a directory.

But for firebase hosting, I'm not sure what to do.

like image 442
WilliamKF Avatar asked May 08 '18 18:05

WilliamKF


2 Answers

In my /public directory, I created a robots.txt.

In my /src directory, I did the following:

I created /src/index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import {TopApp} from './TopApp'
import registerServiceWorker from './registerServiceWorker'

import {BrowserRouter} from 'react-router-dom'

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

registerServiceWorker()

I created /src/TopApp.js:

import React from 'react'

import {
  Switch,
  Route
} from 'react-router-dom'

import {ComingSoon} from './ComingSoon'
import {App} from './App'

export class TopApp extends React.Component {
  render() {
    return (
      <div className="TopApp">
        <Switch>
          <Route path='/MyStuff' component={App}/>
          <Route exact path='/' component={ComingSoon}/>
        </Switch>
      </div>
    )
  }
}

Because path /robots.txt is not covered by the router paths provided, it took it from my public directory and robots file was published as desired.

The same could be done for sitemap.xml.

like image 95
WilliamKF Avatar answered Oct 06 '22 20:10

WilliamKF


Just add the following rules to the "rewrites" section in firebase.json

"rewrites": [
      {
        "source": "/robots.txt",
        "destination": "/robots.txt"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
]
like image 40
Lukas Kirner Avatar answered Oct 06 '22 20:10

Lukas Kirner