Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)

This entry explains how to setup migrated WebMap applications to run Front-end and Back-end each one in separates sites. Note: Steps bellow work ONLY for development environments

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.

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.

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

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

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.

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.