# Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development) **1. Create proxy file and setup Front-end angular project.** When a legacy application is migrated to WebMap a new directory is generated with Front-end and Back-end files in the previous output path configured in WebMap migration tool. The name of the generated directory must have the structure **nameofproject+website**, this directory contains source code files related to application. In addition, inside this directory migrator will be created another directory with the structure **nameofproject + “website-angular”**, this folder contains all Angular source code related with Front-end. In most of the cases we recommend you to open this folder with Visual Studio Code to build files before you can run application from Back-end through Visual Studio. ![](/files/wZePDsS4kM57HHhHkubj) The first step to setup the Front-end is to create a proxy file in Angular Front-end directory in the same path where **package.json** is located. This file must have **json** file extension and could be named **proxy.** The idea of this file is to redirect APIs calls to the specified port (or server) which contains Back-end. ![](/files/c4tRG5IziPzSwosvCtbU) Along with the proxy file is necessary to setup Angular to include the created proxy file on requests application. For that go to **angular.json** file located in the same path than previous file and look up for the text **"serve"** section **“options”.** In this section you must include the reference to the new file adding a new key “**proxyConfig”** with the name of the created proxy file in the last step ![](/files/Ylpsrm1eyaSMbBS0XDRU) **2. Setup Back-end project.** As It was mentioned in the first part migrated app generate folder with all Front-end and Back-end source code. Until this step we have already setup Front-end. In this step we are going to continue with Back-end project. For doing this, we must go to folder **nameofproject+website** and double click in the file with the extension **csproj** to load the project in Visual Studio (before performing these steps please be sure to have last Visual Studio 2019 and .NETFramework installed). ![](/files/WEucSucxny3CPJaY0gFU) In Visual Studio go to solution Explorer panel and right click in the Project Web Site (folder nameofproject Website). When clicked, a configuration window will appear, go to Debug Section and unckeck the default option Launch browser. If this option is unchecked default browser won’t open when run Back-end. In addition, below in Web Server Settings section in App URL field you will be able to setup the local port which Back-end will be enable and listening when run in development environment. Feel free to setup the port you want the only thing to consider is about URL establish in this section must be the same setup in proxy file. ![](/files/vSvLOeUkbj1ZuWTp8sbq) **3. Run separate environments.** With Back-end setting up click in run button to run Back-end. Then in Front-end project from Visual Code or from a console in the front end root location (path where project **package.json** file is located) type command **ng serve** and enter key to launch Front-end side. If all steps were performed correctly application will run from local computer with angular default port 4200 and requests from Front-end application will be done to Back-end port configured. --- # Agent Instructions: 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: ``` GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/setup-migrated-webmap-applications-to-run-front-end-and-back-end-in-separates-sites-only-development.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.