title: React Router + AWS Backend, how to SEO
body: <p>I am using React and React Router in my single page web application. Since I'm doing client side rendering, I'd like to serve all of my static files (HTML, CSS, JS) with a CDN. I'm using Amazon S3 to host the files and Amazon CloudFront as the CDN.</p>
  
  <p>When the user requests /css/styles.css, the file exists so S3 serves it.
  When the user requests /foo/bar, this is a dynamic URL so S3 adds a hashbang: /#!/foo/bar. This will serve index.html. On my client side I remove the hashbang so my URLs are pretty.</p>
  
  <p>This all works great for 100% of my users.</p>
  
  <ul>
  <li>All static files are served through a CDN</li>
  <li>A dynamic URL will be routed to /#!/{...} which serves index.html (my single page application)</li>
  <li>My client side removes the hashbang so the URLs are pretty again</li>
  </ul>
  
  <p><strong>The problem</strong></p>
  
  <p>The problem is that Google won't crawl my website. Here's why:</p>
  
  <ul>
  <li>Google requests /</li>
  <li>They see a bunch of links, e.g. to /foo/bar</li>
  <li>Google requests /foo/bar</li>
  <li>They get redirected to /#!/foo/bar (302 Found)</li>
  <li>They remove the hashbang and request /</li>
  </ul>
  
  <p>Why is the hashbang being removed? My app works great for 100% of my users so why do I need to redesign it in such a way just to get Google to crawl it properly? It's 2016, just follow the hashbang...</p>
  
  <p><strong>&lt;/rant&gt;</strong></p>
  
  <p>Am I doing something wrong? Is there a better way to get S3 to serve index.html when it doesn't recognize the path?</p>
  
  <p>Setting up a node server to handle these paths isn't the correct solution because that defeats the entire purpose of having a CDN.</p>
  
  <p><a href="https://github.com/reactjs/react-router/issues/601" rel="noreferrer">In this thread</a> Michael Jackson, top contributor to React Router, says "Thankfully hashbang is no longer in widespread use." How would you change my set up to not use the hashbang?</p>