> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/guides/setup-webmap-applications-to-run-front-end-and-back-end-in-separates-sites/setup-webmap-applications-to-run-front-end-and-back-end-in-separates-sites-in-production-iis.md).

# Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)

<mark style="color:red;">Note: first step applies just for projects with backend developed in Visual Studio</mark>

1. **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 <mark style="color:red;">ng build  --prod</mark> command. When command finishes to execute, files will be generated in wwwroot folder in same place than angular frontend project folder.

​

![
](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FjT1UMs3vX2M26fEOe35p%2Fimage.png?alt=media\&token=92f18552-c0ae-45ac-b399-11ac0228ee65)

![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2FcpVEti3wcqmqgeFMvf6h%2Fimage.png?alt=media\&token=1423232e-515d-46e9-ada7-ce9f16b90e4a)

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.

![](/files/521Zga2yMl8ZWjlAxWGs)

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.

&#x20;

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.

![FrontEnd Files](/files/MHsBv3CJyfwzNUNfGBU6)

![BackEnd Files](/files/620tlnm32hHsqDL0VQfm)

**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 wwwroo&#x74;**.**&#x20;

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.

![](/files/kVsAV8Stfj60uTEi3oVD)

![FrontEnd WebSite](/files/oUvKm2vmgLmEup5n6cKy)

![BackEnd WebSite](/files/93fhKeB9uYprBm67INb9)

**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.

![](/files/soyobp8WBxIpAh4UPzwB)

![](/files/bZtb4wsmVXv8EoyRVHoF)

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 ([<mark style="color:red;">https://www.iis.net/downloads/microsoft/url-rewrite</mark>](https://www.iis.net/downloads/microsoft/url-rewrite)).

&#x20;

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.

![](/files/p59alwbhviHJQX73dgM4)

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 <mark style="color:red;">Add Rule(s)…</mark> and select <mark style="color:red;">Reverse Proxy</mark> rule and OK button to add new Rule.

![](/files/fQhEhJRoV99YlfIjtjzx)

&#x20;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.

![](/files/Cl3xQEbz50Xsp88ghOGS)

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.

![](/files/UZzoeQwg6cd4ZWPvz0iR)

![](/files/Vzk9k74CeUiWfltzVmPH)

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 <mark style="color:red;">{REQUEST\_METHOD}</mark> and in pattern include type <mark style="color:red;">POST</mark>.

![](/files/SemwZyWY1zitEuoI9Ukb)

![](/files/yh6ryLa3803UWRKmzUO1)

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 &#x20;

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.

![](/files/ypoOKJxIVD6ts60MJrlz)

For this scenario we have a GET request method with Requets URL <mark style="color:red;"><http://localhost:9091/api/DropDownList/GetItems/5b12c265-6c1e-401f-b02d-b04cd1185480></mark> 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.

&#x20;

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 <mark style="color:red;">(api)</mark> for the pattern followed by next characters <mark style="color:red;">/(\*)</mark>, at the end we will get next pattern <mark style="color:red;">api/(\*)</mark>.

![](/files/1shf7nNQ7UnNFvZwOb85)

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.

![](/files/HgKXxqcwMRDkdtaAVRbn)

Finally reload page and you will see rule applied is working correctly.

![](/files/R7KflwOS57Yba0OmTmsa)

You will need to follow same steps about creating new rules in order to cover all backend requests.

![](/files/UNKyr7gCKTVMKYWT8PwQ)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/setup-webmap-applications-to-run-front-end-and-back-end-in-separates-sites/setup-webmap-applications-to-run-front-end-and-back-end-in-separates-sites-in-production-iis.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
