title: How To Build a web.config for a react app using azure + IISNode + express
body: <p>I built my react app after following this tutorial
  <a href="https://daveceddia.com/create-react-app-express-backend/" rel="nofollow noreferrer">https://daveceddia.com/create-react-app-express-backend/</a>
  and <a href="https://daveceddia.com/deploy-react-express-app-heroku/" rel="nofollow noreferrer">https://daveceddia.com/deploy-react-express-app-heroku/</a>. I know i'm not publishing to Heroku because I'm using an azure web app service, but due to the structure of my project I use a proxy to have the backend and front end hosted at the same time. When I run my app on localhost everything works fine and my react routing works so I know it's not an issue with my code. I have checked my logs and my requests hit the correct endpoints, however, none of my front end renders due to 403's, 500's and 404's. I have pin pointed it to my web.config file and I have no clue what it should look like. Some information about which file's I'm trying to render are here</p>
  
  <p>heres the github repo as well incase this can help
  <a href="https://github.com/ecoulson/OverlakeASB" rel="nofollow noreferrer">https://github.com/ecoulson/OverlakeASB</a></p>
  
  <p>path to index.html: /client/public/index.html</p>
  
  <p>path to frontend: /client</p>
  
  <p>Here's my package.json</p>
  
  <pre><code>{
    "name": "overlakeasb",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node server.js 3001",
      "heroku-postbuild": "cd client &amp;&amp; npm install &amp;&amp; npm run build",
      "postinstall": "cd client &amp;&amp; npm install &amp;&amp; npm run build"
    },
    "engines": {
      "node": "8.11.1",
      "npm": "5.6.0"
    },
    "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
      "@fortawesome/free-brands-svg-icons": "^5.1.0-11",
      "@fortawesome/free-regular-svg-icons": "^5.1.0-11",
      "@fortawesome/free-solid-svg-icons": "^5.2.0",
      "@fortawesome/react-fontawesome": "0.1.0-11",
      "azure-keyvault": "^3.0.4",
      "cookie-parser": "~1.4.3",
      "debug": "~2.6.9",
      "easy-rbac": "^3.1.0",
      "easy-session": "^2.0.1",
      "express": "~4.16.0",
      "express-session": "^1.15.6",
      "http-errors": "~1.6.2",
      "i": "^0.3.6",
      "jade": "~1.11.0",
      "jquery": "^3.3.1",
      "moment": "^2.22.2",
      "morgan": "~1.9.0",
      "mssql-connection-string": "^0.1.0",
      "mysql": "github:mysqljs/mysql",
      "node-fetch": "^2.2.0",
      "npm": "^6.2.0",
      "q": "^1.5.1",
      "rc-dropdown": "^2.2.0",
      "rc-menu": "^7.2.6",
      "react": "^16.4.2",
      "react-addons-css-transition-group": "^15.6.2",
      "react-animate-height": "^2.0.3",
      "react-contextmenu": "^2.9.3",
      "react-dom": "^16.4.2",
      "react-router": "^4.3.1",
      "react-router-dom": "^4.3.1",
      "react-router-transition": "^1.2.1",
      "react-select": "^2.0.0",
      "react-tooltip": "^3.6.1",
      "tedious": "^2.6.3",
      "tedious-connection-pool": "^1.0.5"
    }
  }
  </code></pre>
  
  <p>This is my web.config as of now</p>
  
  <pre><code>&lt;configuration&gt;
      &lt;system.webServer&gt;
          &lt;webSocket enabled="false" /&gt;
          &lt;handlers&gt;
              &lt;!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module --&gt;
              &lt;add name="iisnode" path="server.js" verb="*" modules="iisnode"/&gt;
          &lt;/handlers&gt;
          &lt;defaultDocument enabled="true"&gt;
              &lt;files&gt;
                  &lt;add value="/client/public/index.html" /&gt;
              &lt;/files&gt;
          &lt;/defaultDocument&gt;
          &lt;rewrite&gt;
              &lt;rules&gt;
                  &lt;rule name="React Routes" stopProcessing="true"&gt;
                      &lt;match url=".*" /&gt;
                      &lt;conditions logicalGrouping="MatchAll"&gt;
                          &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
                          &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
                          &lt;add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /&gt;
                      &lt;/conditions&gt;
                      &lt;action type="Rewrite" url="/client/public/index.html" /&gt;
                  &lt;/rule&gt;
              &lt;/rules&gt;
          &lt;/rewrite&gt;
          &lt;tracing&gt; 
              &lt;traceFailedRequests&gt; 
                  &lt;add path="*"&gt; 
                      &lt;traceAreas&gt; 
                          &lt;add provider="WWW Server" areas="Security" verbosity="Verbose" /&gt; 
                      &lt;/traceAreas&gt; 
                      &lt;failureDefinitions statusCodes="404.2" /&gt; 
                  &lt;/add&gt; 
              &lt;/traceFailedRequests&gt; 
          &lt;/tracing&gt; 
      &lt;/system.webServer&gt;
      &lt;system.applicationHost&gt;
          &lt;traceFailedRequestsLogging  enabled="true" /&gt; 
      &lt;/system.applicationHost&gt;
  &lt;/configuration&gt;
  </code></pre>