title: React won't load page "You need to enable JavaScript to run this app."
body: <p>I'm going through this tutorial <a href="https://docs.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api</a></p>
  <p>It works until I get to this step:
  Add a proxy by opening up package.json and the following entry:</p>
  <pre><code>&quot;proxy&quot;: &quot;http://localhost:5000&quot;   
  </code></pre>
  <p>Now when I rerun <code>yarn start</code> the same page doesn't render on http://localhost:5000, but if I remove that proxy line from the package.json it still renders on http://localhost:3000.</p>
  <p>I see these errors in the console:</p>
  <pre><code>manifest.json:1          GET http://localhost:5000/%PUBLIC_URL%/manifest.json 404 (Not Found)
  manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
  The attempt to bind &quot;/%PUBLIC_URL%/manifest.json&quot; in the workspace failed as this URI is malformed.
  </code></pre>
  <p>And in the html I see:</p>
  <pre><code>&lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
  &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>When I remove the proxy entry in the package.json I also get this in html after:</p>
  <pre><code>&lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
  &lt;div id=&quot;root&quot;&gt;
    &lt;div class=&quot;App&quot;&gt;
      &lt;div&gt;No pizzas&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;pizza-web&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;proxy&quot;: &quot;http://localhost:5000&quot;,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.3&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.4&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;react&quot;: &quot;^18.0.0&quot;,
      &quot;react-dom&quot;: &quot;^18.0.0&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;styled-components&quot;: &quot;^5.3.5&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;resolutions&quot;: {
      &quot;styled-components&quot;: &quot;^5&quot;
    }
  }
  </code></pre>
  <p>And my Main.js:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  const PizzaFrame = styled.div`
      border: solid 1px gray;
      padding: 10px;
      margin: 15px 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px grey;
      font-family: Arial;
  `;
  
  const Input = styled.input`
      border: solid 1px black;
      padding: 5px;
      border-radius: 3px;
  `;
  
  const Title = styled(Input)`
      text-transform: uppercase;
  `;
  
  const Save = styled.button`
     width: 100px;
     margin: 10px;
     background: green;
     color: white;
     font-size: 16px;
     padding: 10px;
     border-radius: 5px;
  `;
  
  const Pizza = ({ pizza }) =&gt; {
     const [data, setData] = useState(pizza);
     const [dirty, setDirty] = useState(false);
  
     function update(value, fieldName, obj) {
     setData({ ...obj, [fieldName] : value });
     setDirty(true);
     }
  
     function onSave() {
     setDirty(false);
     // make REST call
     }
  
     return (&lt;React.Fragment&gt;
       &lt;PizzaFrame&gt;
       &lt;h3&gt;
         &lt;Title onChange={(evt) =&gt; update(evt.target.value, 'name', data)} value={data.name} /&gt; 
       &lt;/h3&gt;
       &lt;div&gt;
         &lt;Input onChange={(evt) =&gt; update(evt.target.value, 'description', data)} value={data.description} /&gt;
       &lt;/div&gt;
       {dirty ? 
        &lt;div&gt;&lt;Save onClick={onSave}&gt;Save&lt;/Save&gt;&lt;/div&gt; : null
       }
      &lt;/PizzaFrame&gt;
      &lt;/React.Fragment&gt;)
  }
  
  const Main = () =&gt; {
    const [pizzas, setPizzas] = useState([]);
    useEffect(() =&gt; {
      fetchData();
    }, [])
  
    function fetchData() {
      fetch(&quot;/api/pizza&quot;)
        .then(response =&gt; response.json())
        .then(data =&gt; setPizzas(data))
    }
  
    const data = pizzas.map(pizza =&gt; &lt;Pizza pizza={pizza} /&gt;)
  
    return (&lt;React.Fragment&gt;
      {pizzas.length === 0 ?
      &lt;div&gt;No pizzas&lt;/div&gt; :
      &lt;div&gt;{data}&lt;/div&gt;
      }
    &lt;/React.Fragment&gt;)
  }
  
  export default Main;
  </code></pre>