2

I am using VS2017/2019 and .NET Core 2.1 as to create Angular or React applications. Angular-CLI or create-react-app is used for setting everything up. All the following has to do with development stage:

When we build our .NET project, an IIS express server is launched as to accommodate our application, let's name it localhost:19500.

At the same time when the front-end part is being launched (either Angular or React) a Webpack Dev server is launched as well, that accommodates the front-end compiled code in bundles created by Webpack; we can see that by examining (via Chrome Dev Tools) index.html which includes these bundles. As to fully understand that, these bundles are not physically located anywhere; they are loaded in memory and are accessible via Webpack Dev Server. If we run the front-end app independently, we can access this Dev server by localhost:4200 (Angular) or localhost:3000 (React). So, my question is:

Is my above analysis correct? If we launch IIS server, is there any Webpack Dev Server which serves the front-end or the former one serves the front-end bundles?

If there is a Webpack Dev server, then we have two servers and we should solve CORS issues. If there is not, how IIS takes care of issues like Hot Module Replacement(HMR)? What's the exact role of middleware UseAngularCliServer?

Improve this question

1 Answer 1

Reset to default
2

According to your comment under my answer here, I guess you misunderstood the CORS concept. Quoted from MDN :

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

CORS is used to control the behavior of Browser(or Browser-like client , e.g Electron ).

In this scenario, the browser didn't know anything about the Webpack Dev server, so there will be NO CORS problems at all:

+-------+          +------+               +--------+
|       |          |      |               |        |
|       |          |      |               |        |
|       +---------->      |               |        |
|       |  Request |      +--------------->        |
|       |          |      |               | Kestrel|
|Browser|          | IIS  | Reverse Proxy |        |
|       |Response  |      |               |        |
|       <----------+      <---------------+        |
|       |          |      |               |                   +-------------+
|       |          |      |               |  For Spa Requests:|             |
|       |          |      |               |  -----------------> Webpack Dev |
|       |          |      |               |        |  Proxy   |  Server     |
|       |          |      |               |        <----------+             |
+-------+          -------+               +--------+          +-------------+
  1. The browser only talks to IIS. And then IIS proxies the requests to your ASP.NET Core Kestrel server(since you're using ASP.NET Core 2.1, I assume it's running in out-of-process mode).
  2. Be aware it is your Kestrel server who sends the requests to Webpack Dev Server. Your Kestrel acts as a proxy and forwards related requests to Webpack Dev Server when in Development environment.

As you can see, the browser sends all its traffic to IIS and also gets all the responses from IIS. The browser knows only one server , i.e. IIS .

Also, IIS has no idea about the HMR. When developer accesses this SPA page, there's a WebSocket connection set up between your browser and IIS. IIS just forwards it to Kestrel. And then Kestrel forwards it to your Webpack Dev Server. When developer changes the source code of SPA, the file watcher will notify the browser to reload dynamically.

[Edit] : To answer your answer question

Is it possible to find the port on which Webpack Dev Server is launched? localhost:xxxx

This port is computed dynamically at run-time. ASP.NET Core doesn't expose an API for developer to access it. But as a walkaround to know the port number, you can find it in your log information.

For example, I'm using VS Code to debug the App:

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for your answer. Is it possible to find the port on which Webpack Dev Server is launched? localhost:xxxx
@Unknowndeveloper I've updated my answer to show how to find the port in the log. Please check.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.