Post-Conversion

WebMAP: WebForms to Web is a tool designed to convert ASP.NET web applications based on C# and Web Forms to a modern web architecture. Post-Conversion documentation for WebMAP WebForms.

With a brand new WebMAP: WebForms to Web converted application, let's dive into the necessary steps to have your application up and running.

Compile and Run the Converted Application

This section explains in detail the following topics:

1. System Requirements?

2. How to Build the UI Code?

3. How to Build the Business Logic Code?

4. How to run the application?

System Requirements

After converting your application, you will need the following applications before you run it for the first time:

• Node.js LTS(latest) or 16.20.2(if you have issues with latest version)

• Visual Studio 2022, Build Tools for Visual Studio 2022. Your installation of Visual Studio, must include the following settings:

  • Go to Workloads tab and turn on ASP.Net and web development, see the following example:

Visual Studio needed Workloads

Step 1: How to Build the UI Code

Install Angular, if you haven't already. Please open a Command Line or PowerShell as an administrator and type the following command.

npm install -g @angular/[email protected]

Update the npm configuration's registry key. This is required to resolve Mobilize's packages and should be done only once. Please follow the next setup guide:

Setup NPM package registry in the workspace

Go to the converted application's folder, then go to the folder of the main project and then to the folder with angular in the name. Open the CommandLine pointing to this location. It should look as in the case of HelloWorldDemo.

C:\ConvertedHelloWorld\helloworld\helloworld-angular>_

Run the following command to install all the packages and their dependencies to run the UI. This step should only be done once.

npm install

The last command will build the UI and should be run after any change done to a component inside the angular folder.

npm run build

Now the user interface is ready!

Step 2: How to Build the Business Logic Code

1. Open the solution of the app using Visual Studio 2019.

2. Once you opened your project, go to the solution explorer (Can be opened through the "View" tab).

3. Right Click on your solution.

4. Click "Build Solution"

How to build your Application

Step 3: How to Run the Application

1. Open your project solution.

2. Right click on the web project.

3. Select "Set as a Startup Project".

4. Click the Run button.

Startup Project configuration

If you followed all these steps you should have your application up and running!

Output folders contents

For this example we will be using the HelloWorld project, once it is converted it will contain the following structure:

• helloworld folder: The main project folder.

  • Project Pages: We will have all the pages of the project here, for more information about the structure of WebForms pages you can go to our Designer class documentation.

  • wwwroot: Is a Virtual Directory of IIS server.

  • helloworld-angular folder: Contains all the code related to the UI, for more information visit Workspace and project file structure.

    • src folder.

      • app folder.

        • components folder: Contains all the angular components generated from the converted UI.

        • app.component.css: It is the stylesheet used by the app.component

        • app.component.html: It is the HTML associated with the app.component

        • app.component.ts: This is the startup angular component of every migrated application

        • app.module.ts: This module includes all the sub-modules of all the application. e.g. You have two projects (csproj): project1.csproj and project2.csproj. This will yield two sub-modules: project1.module.ts and project2.module.ts

        • hello-world.module.ts: This module includes all the components of the hello-world csproj.

      • assets folder: Contains all the images of the application.

      • index.html: It is the page that launches the angular startup component: app.component <app-root></app-root>

      • package.json: This is a json file that contains the list of javascript packages required by the application.

• Logs folder: You will find the logs related to the conversion and any error that might have occurred, for more information visit Error and Troubleshooting.

• Stubs folder: Any element that was not converted will be generated as a stub, for more information of what a stub is visit Error and Troubleshooting.

• HelloWorld.sln: Projects Solution.

• Lib folder: Several nuget dlls.

• nuget.config: Contains the package sources for the app.