title: Hosting multiple SPA web apps on S3 + Cloudfront under same URL
body: <p>I have two static web apps (create-react-apps) that are currently in two separate S3 buckets. Both buckets are configured for public read + static web hosting, and visiting their S3 hosted URLs correctly display the sites. </p>
  
  <pre><code>Bucket 1 - First App:
     index.html
     static/js/main.js
  
  Bucket 2 - Second App:
     /secondapp/
         index.html
         static/js/main.js
  </code></pre>
  
  <p>I have setup a single Cloudfront for this - The default cloudfront origin loads <code>FirstApp</code> correctly, such that www.mywebsite.com loads the index.html by default.</p>
  
  <p>For the <code>SecondApp</code>, I have set up a Cache Behavior so that the path pattern <code>secondapp/*</code> points to the SecondApp bucket URL. </p>
  
  <p>In my browser, when I visit <code>www.mywebsite.com/secondapp/</code> it correctly displays the second web app. </p>
  
  <p>If I omit the trailing slash however, I instead see the First App, which is undesired.
  If I visit <code>www.mywebsite.com/secondapp/something</code>, I am also shown the First App, which is also undesired. (I want it to load the .html of <code>secondapp</code>)</p>
  
  <p>Both apps are configured to use html5 push state via react-router-dom.</p>
  
  <p>My desired behavior is that visiting the following displays the correct site/bucket:</p>
  
  <p><code>www.mywebsite.com</code> - Currently working</p>
  
  <p><code>www.mywebsite.com/secondapp/</code> - Currently working</p>
  
  <p><code>www.mywebsite.com/secondapp</code> - (Without trailing slash) Not working, shows First App</p>
  
  <p><code>www.mywebsite.com/secondapp/something_else</code> - Not working, show First App</p>
  
  <p>How can I achieved the desired behavior?</p>
  
  <p>Thanks!</p>