Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
Note: first step applies just for projects with backend developed in Visual Studio
Generate all compiled files to publish over IIS.
Before publishing and separating Front-End and Back-End WebMap apps, we must generate all necessary files to publish in Front-End and Back-End IIS sites. In case of Front-End you will need to generate compiled files with ng build --prod command. When command finishes to execute, files will be generated in wwwroot folder in same place than angular frontend project folder.
With Front-End files generated we will proceed to generate Back-End and Front-End files to publish in IIS. Go to Back-End migrated project in Visual Studio and in Solution Explorer right click over web project and click over Publish option for selecting the place where files will be generated.
In published folder we will find all Back-End and Front-End necessaries files to create both sites on IIS. Now we need to identify which files we will use for Front-End website and Back-End website.
Inside the generated folder appears again a wwwroot folder. these files will be used to Front-End website and the other ones which are not in that folder will be used to Back-End website.
2. Setup Front-End and Back-End sites in IIS.
With all necessary files compiled, we must create two separate folders to store Back-End and Front-End files (folders can be named whatever you want, and the location can be also in any place you want).
Front-End folder will store the content in wwwroot mentioned in past step and Back-End will store all files not included in wwwroot.
Once folders required has been created, go to IIS Manager and create 2 sites with different ports in Sites List. The first one will have as a path directory the location of frontend folder created and the second one must have as a path directory the location of backend folder.
3. Setup IIS / URL Write.
At this moment we have separated Front-End and Back-End sites but if you try to run Front-End it will load only local files in the site (so you will see a blank page). It is because all Back-End requests are failing, Webserver is trying to solve them in the same location of Front-End files and as we have separated Back-End files in other site, Server won’t be able to resolved files.
For resolving Back-End files from Front-End website we will need to rewrite initial URL requests to Back-End URL website and we will do that with URL Rewrite extension for IIS. You can download extension from next URL (https://www.iis.net/downloads/microsoft/url-rewrite).
With URL Rewrite installed we will be able to setup rules over some requests in Front-End to. Select Front-End website and double click in URL Rewrite icon that appears in Feature View section.
When double click in URL Rewrite is done a new section will appear to add rules for overwrite request URLs over the current site. Select Add Rule(s)… and select Reverse Proxy rule and OK button to add new Rule.
In next screen type the name of the server or IP (with port) where request will be redirected and then click in OK button to add rule.
New rule will appear in URL Rewrite section. However, if we keep created rule with default values all requests will redirect to typed backend server name but we only need rewrite original requests only for Back-End requests. Other Front-End requests for loading local files should work without rules. So we are going to setup Back-End request rules. Click over the rule and a new section will appear with more details about rule. In Conditions section click in Add button to Add new Condition.
For this scenario we have identified in all cases all request with request method “POST” always must be solved by Back-End. For that reason, in condition input we must type {REQUEST_METHOD} and in pattern include type POST.
If you try to browse Front-End page, it must be loading some information in most cases. However, if you see application requests in developer console you will see some request failing (the ones in red color). so we must focus in create rules for fixing requests failing
In case of the first request failing, It is failing because is using GET request method for that reason first rule (Post request method) doesn’t fit with that parameter, so we must to find the correct pattern to enable that requests to backend. We could setup a new rule with {REQUEST_METHOD} GET but if we apply a general rule for those cases there are some local requests that are necessary to do with original Front-End URL in those cases requests won’t be able to be performed. Then we need to evaluate URLs requests failing to determinate pattern to apply in each scenario and add new rules.
For this scenario we have a GET request method with Requets URL http://localhost:9091/api/DropDownList/GetItems/5b12c265-6c1e-401f-b02d-b04cd1185480 so we have detected all URLs with api route must be solved by backend server for that reason pattern for the new rule must be api word.
Then we apply the same steps applied for first rule (new Rule type server name and OK and edit rule). After editing we must apply a pattern over URL so in pattern field we must include the key word (api) for the pattern followed by next characters /(*), at the end we will get next pattern api/(*).
For validate pattern click in Test pattern and include URL to validate in input data to test field then click in Test button. If the pattern fit with the content of URL to validate a green icon will appear showing that used pattern is correct otherwise it shows a red icon it means that in this case rule don’t apply and de URL will be solved by frontend server.
Finally reload page and you will see rule applied is working correctly.
You will need to follow same steps about creating new rules in order to cover all backend requests.
Last updated
