title: In Blazor WebAssembly solution, how to host the Blazor WASM client app on a different port to the server API
body: <p>I have a Blazor WebAssembly solution with a client project, server project and shared project, based on the default solution template from Microsoft. I'm editing and debugging in Visual Studio 2019 preview with Google Chrome.</p>
  
  <p>Out-of-the-box, the solution has a single start-up project, which is the server application. That server application has a project reference to the client application. You can set it to use HTTPS by checking "Enable SSL" in the server project properties and I have done that.</p>
  
  <p>When you click on debug it works perfectly.</p>
  
  <p>Now I want to change it so that all my Blazor WASM pages are served from <a href="https://localhost:44331" rel="nofollow noreferrer">https://localhost:44331</a> and the API Controller endpoints of the server application are served from <a href="https://localhost:44331/api" rel="nofollow noreferrer">https://localhost:44331/api</a></p>
  
  <p>I want to use this extra "/api" portion of the URL to keep the requests to the API separate from just navigating around the Blazor client app. So if I request "<a href="https://localhost:44331/api/something" rel="nofollow noreferrer">https://localhost:44331/api/something</a>" I know I'm going to hit a point in my web API but if I request "<a href="https://localhost:44331/something" rel="nofollow noreferrer">https://localhost:44331/something</a>" I know I'm going to hit a particular page in the Blazor client app. I think it will also be closer to how a normal setup would be in production.</p>
  
  <p>I hope it's clear what I'm trying to do.</p>
  
  <p>The obvious place to start seemed to be changing the "App URL" setting in the "Debug" portion of the Properties of the server app to "<a href="http://localhost:52708/api" rel="nofollow noreferrer">http://localhost:52708/api</a>". The project assigns a secure URL of "<a href="https://localhost:44331/api" rel="nofollow noreferrer">https://localhost:44331/api</a>". I left the setting the same in the client app, so in the client app, the "App URL" setting in the "Debug" portion of the Properties of the client app is still "<a href="http://localhost:52708" rel="nofollow noreferrer">http://localhost:52708</a>", with the project assigning a secure URL of "<a href="https://localhost:44331" rel="nofollow noreferrer">https://localhost:44331</a>".</p>
  
  <p>That breaks everything.</p>
  
  <p>Now "<a href="https://localhost:44331/" rel="nofollow noreferrer">https://localhost:44331/</a>" takes me to a 404 Not Found error and "<a href="https://localhost:44331/api" rel="nofollow noreferrer">https://localhost:44331/api</a>" takes me to a page that says:</p>
  
  <blockquote>
    <p>Loading...<br>
    An unhandled error has occurred. Reload </p>
  </blockquote>
  
  <p>That would have been too easy! Does anybody know the correct way to get the environment how I want please?</p>