title: Routing problems /w node.js vue app on Azure
body: <p>I've successfully deployed a node js ap with a Vue frontend on azure but whenever you visit a URL which is not the root, it shows a white screen with the message 'CANNOT GET /products' for example.</p>
  
  <p>In the root of the web server, I have a index.js which will among other things load the content of the dist folder where the compiled vue frontend code is placed:
  <code>app.use(express.static(__dirname + "/dist"));</code></p>
  
  <p>I have tried changing my web.config file but if I change <code>&lt;action type="Rewrite" url="index.js"/&gt;</code> to <code>/dist/index.html</code>, my api endpoints stop working and it's basically only a frontend. This is my web config file:</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="index.js" verb="*" modules="iisnode"/&gt;
  &lt;/handlers&gt;
  &lt;rewrite&gt;
    &lt;rules&gt;
      &lt;!-- Do not interfere with requests for node-inspector debugging --&gt;
      &lt;rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"&gt;
        &lt;match url="^index.js\/debug[\/]?" /&gt;
      &lt;/rule&gt;
  
      &lt;!-- First we consider whether the incoming URL matches a physical file in the /public folder --&gt;
      &lt;rule name="StaticContent"&gt;
        &lt;action type="Rewrite" url="public{REQUEST_URI}"/&gt;
      &lt;/rule&gt;
  
      &lt;!-- All other URLs are mapped to the node.js site entry point --&gt;
      &lt;rule name="DynamicContent"&gt;
        &lt;conditions&gt;
          &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/&gt;
        &lt;/conditions&gt;
        &lt;action type="Rewrite" url="index.js"/&gt;
      &lt;/rule&gt;
    &lt;/rules&gt;
  &lt;/rewrite&gt;
  &lt;security&gt;
    &lt;requestFiltering&gt;
      &lt;hiddenSegments&gt;
        &lt;remove segment="bin"/&gt;
      &lt;/hiddenSegments&gt;
    &lt;/requestFiltering&gt;
   &lt;/security&gt;
  &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>Edit - more details on project setup</p>
  
  <p><strong>Folder structure:</strong></p>
  
  <p>Root:</p>
  
  <p><a href="https://i.stack.imgur.com/4EnbY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4EnbY.png" alt="enter image description here"></a></p>
  
  <p>/dist:</p>
  
  <p><a href="https://i.stack.imgur.com/TF5vI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TF5vI.png" alt="enter image description here"></a></p>
  
  <p><strong>Index.js:</strong></p>
  
  <pre><code>const contentRoutes = require("./api/content"); 
  const userRoutes = require("./api/users");
  const gymRoutes = require("./api/gyms");
  ...
  app.use("/api/content", contentRoutes);
  app.use("/api/users", userRoutes);
  app.use("/api/gyms", gymRoutes);
  ...
  app.use(express.static(__dirname + "/dist"));
  
  app.listen(port, () =&gt; {
    console.log("Server is live");
  });
  </code></pre>
  
  <p><strong>Router.js in Vue project:</strong></p>
  
  <pre><code>Vue.use(Router);
  
  export default new Router({
   routes: [
    {
     path: "/",
     name: "index",
     component: index
     },
    {
     path: "/gyms/new",
     component: gymNew
     },
    {
      path: "/gyms/:id",
      component: gym
     },
     ...
    ],
    mode: "history"
  </code></pre>
  
  <p>Any idea what I'm doing wrong?</p>