title: How to properly serve the create-react-app index from the server?
body: <p>I'm developing an application with create-react-app and all is going well, except for the fact that I would like to initially serve the <code>index.html</code> from the backend, and am running into trouble doing so.</p>
  
  <p>The reason that I want to do this is so that I can inject some user-specific Javascript into the <code>index.html</code> page and also run various other queries when the user initially hits the page (<a href="https://github.com/facebook/create-react-app/pull/1588#issuecomment-283305703" rel="nofollow noreferrer">similar to this person</a>)</p>
  
  <p>So, instead of connecting to <code>localhost:3000</code> to view the app, I would instead connect to <code>localhost:8080</code> and have the server serve this <code>index.html</code> file. (all other assets (js, css, images) would still be on <code>localhost:3000</code>)</p>
  
  <p>One issue with doing this seems to be that the script tags are not included in the <code>index.html</code> file by default, and are instead generated by create-react-app. That is, say this is my <code>index.html</code> file:</p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I run <code>npm start</code>, and then inspect the source, it will instead be this (due to CRA runtime injections I presume):</p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;link rel="shortcut icon" href="/favicon.ico"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;script src="/static/js/bundle.js"&gt;&lt;/script&gt;&lt;script src="/static/js/0.chunk.js"&gt;&lt;/script&gt;&lt;script src="/static/js/main.chunk.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As a result, on the server, I'm currently trying something like this:</p>
  
  <pre><code>#[get("/")]
  fn handle_index() {
      let scripts = r#"&lt;script src="https://localhost:3000/static/js/bundle.js"&gt;&lt;/script&gt;
                       &lt;script src="https://localhost:3000/static/js/0.chunk.js"&gt;&lt;/script&gt;
                       &lt;script src="https://localhost:3000/static/js/main.chunk.js"&gt;&lt;/script&gt;"#;
  
      let index_html = include_str!("../frontend/public/index.html");
  
      let document = format!(r#"&lt;script type="application/javascript"&gt;
                                   window.APP_GLOBALS = { user_id: 5, color: "red" };
                                &lt;/script&gt; {}{}"#, data, index_html, scripts);
  
      return document;
  }
  </code></pre>
  
  <p>Because I'm not sure of any other way to inject those script tags. It looks like create-react-app only does it for my <code>localhost:3000</code> page, and not the <code>localhost:8080</code> page.</p>
  
  <p>This seems to <em>somewhat</em> work. That is, the page loads, but there are two issues.</p>
  
  <ol>
  <li><p>Many of the asset URLs are now wrong. They are instead pointing to <code>localhost:8080</code> instead of <code>localhost:3000</code>, and <code>%PUBLIC_URL%</code> URL likewise doesn't work (I suppose this is another process that is no longer occurring)</p></li>
  <li><p>The websocket autoreload dev server no longer works. It works when I navigate to <code>localhost:3000</code>, but not <code>localhost:8080</code>. When I edit a file and save, the page just turns white with no errors in the console.</p></li>
  </ol>
  
  <p>I think all of these issues are due to the same cause: <code>create-react-app</code> normally preprocesses the <code>index.html</code> file in some way (converting <code>%PUBLIC_URL%</code>, adding those script tags, handling reload), but it is no longer doing this when the file is instead returned from the server.</p>
  
  <p>What I'm wondering is how I can restore this functionality. Basically, have these script tags and <code>%PUBLIC_URL%</code> processes occur without my backend server having to attempt to do so.</p>