title: Hosting Angular application in Kestrel does not work with Docker
body: <p>I have a <code>angular 6</code> application that is hosted inside a <code>.NET Core</code> Server.The application works ,i can acess the pages/routes etc.<br>However when i put this <code>.NET</code>application inside docker and run it i get the following error:</p>
  
  <pre><code>GET http://localhost:8400/styles.3bb2a9d4949b7dc120a9.css net::ERR_ABORTED 404 (Not Found)
  GET http://localhost:8400/runtime.ec2944dd8b20ec099bf3.js net::ERR_ABORTED 404 (Not Found)
  </code></pre>
  
  <p>In my <code>docker</code> image i put the <code>Release</code> folder of the <code>.NET App</code> ,and in this folder i add :</p>
  
  <pre><code>-DockerImage
     -Release folder
       - Dockerfile
       - Config `json` file (i am using `Microsoft.Extensions.Configuration`)
       - `dist` folder (angular compiled application)
  </code></pre>
  
  <p><strong>Dockerfile</strong></p>
  
  <pre><code>FROM microsoft/dotnet:2.1-aspnetcore-runtime
  WORKDIR /app
  ADD . /app
  ENTRYPOINT [ "dotnet","Deploy.dll"]
  </code></pre>
  
  <p>The <code>.</code> root path in this case is the <code>Release</code> folder that has the items i mentioned in the upper section. </p>
  
  <p>What is intriguing is that the <code>NET Core</code> depends on some files of the <code>dist</code> folder otherwise it would crash.And it doesn't ,it works just fine.</p>
  
  <p><strong>Startup.cs</strong><br></p>
  
  <pre><code>  public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
                  if (env.IsDevelopment()) {
                      app.UseDeveloperExceptionPage();
                  } else
                      app.UseHsts();
                  Config config = this.Configuration.GetSection("Config").Get&lt;Config&gt;();
                  Config.Frontend frontend = this.Configuration.GetSection("Config:Frontend").Get&lt;Config.Frontend&gt;();
  
                  string jsroot = Path.Combine(Directory.GetCurrentDirectory(), frontend.PhysicalRoot);
                  PhysicalFileProvider provider = new PhysicalFileProvider(jsroot);
  
                  DefaultFilesOptions options = new DefaultFilesOptions() {
                      DefaultFileNames = new List&lt;string&gt; { frontend.DefaultFileName },
                      FileProvider = provider,
                      RequestPath = frontend.RequestPath
                  };
                  app.UseDefaultFiles(options);
  
                  app.UseStaticFiles();
                  app.UseStaticFiles(new StaticFileOptions() {
                      RequestPath = frontend.RequestPath,
                      FileProvider = provider
                  });
              }
  </code></pre>
  
  <p><strong>Index.html</strong> (from the <code>dist</code> folder )</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Frontend&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;link rel="stylesheet" href="treeview/styles.3bb2a9d4949b7dc120a9.css"&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;script type="text/javascript" src="treeview/runtime.ec2944dd8b20ec099bf3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="treeview/polyfills.c6871e56cb80756a5498.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="treeview/main.a4ddb95d782e95e34c4a.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Config file</strong></p>
  
  <pre><code>{
    "Config": {
      "Frontend": {
        "PhysicalRoot": "./js",
        "RequestPath": "/treeview",
        "DefaultFileName": "index.html"
      },
      "Environment": {
        "ProdEnv": {
          "OwnAddress": {
            "Hostname": "0.0.0.0",
            "Port": 8400
          }
        },
        "DevEnv": {
          "OwnAddress": {
            "Hostname": "0.0.0.0",
            "Port": 8401
          }
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>P.S</strong> The <code>Config</code> type in the <code>.NET Core App</code> is just a <code>POCO</code> for the <code>Config</code> section of the config file.</p>
  
  <p>The container is started with a <code>bash</code> script that starts a <code>docker-compose</code></p>
  
  <p><strong>Docker compoe</strong></p>
  
  <pre><code>version: '3.3'
  services:
  
      front:
        image: ft
        container_name: front0
        build: ./front/publish
        networks:
          - redis-net
        ports:
          - 8400:8400
  </code></pre>
  
  <p><strong>Script.sh</strong></p>
  
  <pre><code>    dotnet build -c Release ../${hostServerSrc} &gt;&gt;out.txt  //building the release for the `.NET Server that hosts the angular app`
      dotnet publish -c Release ../${hostServerSrc} --output $(pwd)/${hostServerDest} &gt;&gt;out.txt  //publshing it to the folder that will be injected in the image
      cp  ./Configs/hostConfig.json ./front/publish  //copying the config file for the `.NET App`
      cp  -r ../${ngSrc}  ./front/publish/js //copying the angular compiled app
  
      docker-compose up --build  -d &gt;&gt;out.txt
  </code></pre>
  
  <p><strong>P.S 2</strong>
  It seems it can not find any file in the <code>js</code> folder.The <code>Request URL</code> is:
  <code>http://localhost:8400/runtime.js</code>.</p>
  
  <p>In the docker container i have all the files inside the <code>js</code> folder.
  It might be because being in docker there is no more <code>localhost</code> ?</p>