Debugging ASP-NET Web Apps Over LAN In 4 Easy Steps With IIS Express

So, things were going well so far in the development process of your app. Until you needed to test your web app into another device connected to the same network of the computer being used to develop your application. However, you don’t know how to make IIS Express accept connections that are not from the localhost. Well, fear not! This is a common problem many developers face when they are developing web applications and want to test it across many different environments and devices.

Below, I will be teaching you how to properly configure your Visual Studio Projects to accept connections coming from your LAN. By the end of this tutorial, you will be able to easily configure your dev machine and IIS Express to accept incoming connections from other machines, which in turn will allow you to test your app on other devices connected to your local network.

Warning: This tutorial was made with Visual Studio 2019  and Windows 10 in mind. So, in case you are developing your web app using another OS, IDE, text editor or debugging tool you may have to take additional steps, tweaks or worse, the steps described in here may not help you at all. Nevertheless, if you are reading this, chances are that you’ve stumbled across this common problem while developing an app on Visual Studio 2019. Having said that its time to get our hands dirty!

Why Would I Want To Debug My ASP-NET Web App Over LAN Or The Internet? Debugging On My PC Seems Good Enough To Me!

Accessing your web app on the computer you’re developing it on may see good enough until you need to test things like multiple users using your web app at the same time, how it looks, how it performs in mobile devices(IOS and Android), how it behaves in low-end/mid-end/high-end hardware, stress testing your app and so on.

Getting these kinds of errors when trying to connect remotely to your app running through IIS Express, regardless if you typed the right port and IP address of the host machine? Well, do not worry. By the end of this tutorial, you will be able to easily set up IIS Express and VS Studio to accept any incoming connection from your local network.

In short, being able to test your app on other devices besides the host machine will not only help you in finding bugs that may not occur in the development environment. But it will also help you make sure your app consistently behaves the same way in all kinds of hardware, environments, and configurations.

 

What is IIS Express?

Originally developed during academic research at the University of Scotland in Edinburg. IIS Stands for Internet Information Services. It is a program developed by Microsoft to run web servers on Windows machines. In its current iteration IIS supports FTPFTPSSMTP, NNTP, HTTPHTTP/2, and HTTPS.

Nowadays, IIS Express(the lightweight, portable version of the original IIS was created with developers in mind) is the go-to of many developers wanting to test their ASP-NET Web apps or websites with the backend based on PHP.

1. Creating Your Project On Visual Studio 2019

You can skip to the part 2 of this tutorial if you already have a solution on VS 2019 using IIS Express that you want to configure to accept incoming connections from other devices on your LAN. Otherwise, in case you are still interested in knowing how to properly create a Web App Project on VS, you can follow-on reading this part.

1.1 First Off, Launch Visual Studio 2019 as Administrator, Then Click On Create A New Project

VS Studio Prompt Menu

As soon as you open VS Studio 2019 you will be prompted with a screen similar to the one shown above. For now, on the “Get Started” section we will be clicking on Create a new Project.

1,2. Now, We Will Be Selecting What Type Of Project We Will Develop On VS.

The create a new project wizard will take you to a menu similar to the one above. In here, we will be selecting ASP.NET Core Web Application as a template for our project, then we will be clicking on Next as shown above.

1,3. Naming your Application And Then Finally Creating it!

After picking a name for your Web Application and selecting the location you want to store it in your Hard Drive you will be clicking again on the Create button as shown above.

1,4. Picking A Template For Your ASP-NET Core Project And Then Finally Creating It

Now, in this next part, you will be given the option to select if you want to begin your project with a template to start off your ASP.NET Core solution. Since I’m creating this Web App for the purpose of teaching you how to let other devices on your LAN to connect to it we will be selecting Web Application as highlighted above. And lastly, you will be clicking again on the Create button, which can be found in the right bottom of VS Studio as shown in the image above. Afterward, Visual Studio will finally open your newly created solution.

If you did everything correctly as soon as you click on the create button you will be welcomed by a project template similar to the one above.

 

2. Configuring The VS Config File Of Your Solution To Accept Other Incoming Connections Besides Localhost

In this step, we will be modifying the VS Configure File of our project to accept other connections besides the localhost.

2,1. Making Sure Windows Explorer Can View Hidden Files And Folders

 

First off, before we continue any further we need to make sure that your Windows Explorer is configured to be able to see hidden files and folders otherwise you won’t be able to find the config file, which is located in the folder your solution is, at all.

Open your file explorer, then click on “View”, which is located at its top Navigation bar, as shown in the screenshot above. As soon as you do it the navigation bar will show you some new options.

All you have to do now is make sure the option “Hidden Items” is marked just like in the screenshot above. Now, we have to make sure that we can see hidden files after enabling this option. In order to do so, we can go to our project folder as shown in the screenshot below.

If you can see the .vs file, as shown above, congratulations! You successfully configured your Windows Explorer to show hidden files. Notice how folders or other files that are supposed to be hidden will be shown with a transparent icon, thus differing from standard files and folders which don’t have any transparency effects on their respective icons at all.

2.2 Editing applicationhost.config To Enable Other Addresses For Our Web App Besides Localhost

Go to the root folder of your Web App Project. Mine is called WebApplication3. So, I went there.

Now that you are inside your project’s root folder click on the .vs folder. If you can’t find it. You probably skipped part 2.1 of this tutorial or you didn’t configure your Windows Explorer to properly show hidden files. If that’s the case, I recommend you to scroll up and read it.

In the .vs folder, you will find inside it a folder with the same name as your project, which in my case is “WebApplication3“. Click on it!

Inside this folder, you will probably find three folders: config, DesignTimeBuild, and v16. For now, we will only need to open the config folder as shown in the screenshot above.

Inside it, you will find a file called the applicationhost.config that’s our file! Double click on it with your left mouse if you want to edit it with your default XML Configuration Editor or right-click on it once with your right mouse button and then go to “Open With”  in case you want to edit it with another program. For this tutorial, I will be using the Visual Studio Code to edit this file. But it doesn’t matter what you pick to edit it. As long as it is a text editor capable of reading XML Configuration files it will do the job.

Whatever the editor you picked as soon as it opens the file press CTRL + F to open a search option on it. Now, type “localhost” on its search bar and then press enter.

Ports used by our web app

The code we are looking for should look similarly to this:

<site name=”Name_of_your_Project” id=”X”>
        <application path=”/” applicationPool=”WebApplication3 AppPool”>
          <virtualDirectory path=”/” physicalPath=”E:\Git\WebApplication3\WebApplication3″ />
        </application>
        <bindings>
          <binding protocol=”http” bindingInformation=”*:port_used:localhost” />
          <binding protocol=”https” bindingInformation=”*:port_used:localhost” />
        </bindings>
      </site>

In order to enable other incoming connections besides the localhost, we will have to alter a few lines of code in the code shown above. For now, IIS Express configuration file is only letting incoming connections from localhost for ports 52119 and 44317. In order to change this, we will have to add 2 lines of code since my website is simultaneously using two ports. As shown in the image above.

Ports used by our Web App on IIS Express

The pattern will always be something like this <binding protocol=”http” bindingInformation”*:port_used_by_your_app:*”>. As you can see all we have to do is replace the word localhost with an asterisk symbol in order to enable incoming connections from other devices. After making those changes all you have to do now is save our configuration file.

3. Configuring Windows Firewall To Allow Your Web App Ports To Receive Incoming Connections From Your LAN

Now that you have successfully set up your IIS Express configuration file to enable other incoming clients besides localhost it’s time to configure Windows Firewall to not block incoming TCP connections to ports used by your Web App.

Foremost, go to your Windows Start Menu and type firewall

Now, all you’ve got to do is click on Windows Defender Firewall to open its window.

Now that we are on Windows Defender Firewall Windows click Advanced Settings, which can be found in the middle of its left edge as shown in the image above.

As soon as it opens go to Inbound Rules.

Select New Rule.

Select Port, then click on next.

Now, select TCP and click on specific local ports. Then type the port your web app is currently using and after that hit next.

Now, as shown in the screenshot above select allow connection then hit the next button.

Now, apply this rule to everything and click on next.

 

Lastly, pick a name for our Inbound rule and hit the finish button.

If when you were doing step 2,2 you found out while we were poking around the “applicationhost.config” file that your Web App uses more than one port like mine. Then you may have to repeat this step until you’ve allowed all the ports needed by your App to accept remote connections coming from other devices in your LAN.

 

4. Getting Your Local IP Address And Testing If Other Devices On The Same Network Can Connect Remotely To Your Web App

Now that we’ve successfully configured IIS Express and our firewall to accept incoming connections we need to find out the host machine’s local IP Address and run our app on it to test if we can connect remotely to it through other devices.

4,5. Running the App

This is probably the most obvious and simple step of all. But I thought it was still worth mentioning in order to avoid any confusion or problems for people currently reading this tutorial. I try to make my tutorials as easy as possible to digest and understand by giving detailed step-by-step instructions on how to do things.

First off, we have to launch Visual Studio 2019 with administrator privileges, otherwise IIS Express won’t be able to use your local IP and port of the app as the address of our host machine, which we will be trying to connect remotely with other devices on our LAN.

Right-click on your VS Studio 2019 and then select run as administrator.

Now, after you have loaded our solution go to VS Studio 2019’s navigation bar and then click on the green button to start debugging our web app on IIS Express.

If you do everything correctly VS Studio will build your app and start running it without any problems at all. VS Studio 2019 bottom will switch to an orange color instead of blue while the app is running. If you didn’t get any errors in this part you can go to part 4,8 of this tutorial.

Warning: If you don’t launch Visual Studio as an admin before trying to run your web app you will be unable to connect to it later on and you will get the following error message:

This is due to the fact that VS Studio needs admin privileges to let IIS Express register URL for your local IP.

 

4,8. Getting Your Local IP Address

Now we have to run the Command Prompt in the machine, you are currently using to develop and run your app. You can easily access it by pressing the following keys simultaneously on your keyboard: the Windows logo and R key. As soon as you do this the open run dialog box will be opened as shown in the screenshot below.

Configuring Windows Firewall to accept incoming connections to our web app

In the dialog box, just like the one above, type cmd and then press enter. At once your Command Prompt shall be opened.

Now that we have our Command Prompt running type “ipconfig” on it, then press enter as shown in the screenshot above.

As soon as you hit enter the command prompt will show you a bunch of information regarding your network and internet adapter. For now, what we are looking for is the IPv4 address of the host machine running the app. As shown in the picture above I found out that my host machine Ipv4 address is 192.168.0.169. Whatever yours is type or write it somewhere else as we will need it, later on, to connect to our web app.

 

 

4,9. Connecting To Your Web App Through An Internet Browser

After getting your local IP address and finding out which port your VS Solution uses in order to connect to it you will always have to type them in the following order without any spaces: Local_IP_Address:port_used_by_yourapp.

Example: in my case, I found out that my local IP address was 192.168.0.169  and one of the ports used by my app was 44317 so, I will try to remotely connect my android phone to my web app currently running on my host machine by typing in my android browser’s address bar 192.168.0.169:44317 and then hit enter. As shown below.

 

If as soon as you hit enter on your browser’s address bar you are welcomed by a web page with the content of your app it means that the connection worked as intended! As you can see in the screenshot above I used an android phone connected to the same LAN of the machine that is hosting my web app. But you don’t have to do that. You are free to use another computer, browser, smartphone or OS to test if the connection to your app is working correctly. However, in case you get a screen, like the one below don’t worry!

Select Advanced and then click on Proceed to LOCAL_IP_ADDRESS (unsafe).

As soon as you hit the proceed button your Web App’s main page will show up. This warning message happens because we haven’t set up yet a local https certificate for our Web App. In a future tutorial, I will be teaching you how to add a local https certificate to your web apps in case you need to test features that only work on https connections.

Congratulations! If you were able to connect remotely to your web app from a mobile device or a computer besides the dev machine. You’ve correctly configured your host machine to accept incoming connections from your local network. You can now access your app on other machines besides the host machine as long as they are connected to the same network of the machine running our web app!

 

Warning: Don’t forget to later-on remove these ports from your firewall’s whitelist when you no longer need them to test your app. After all, leaving these ports open forever may bring security risks.

 

Leave a Reply

avatar
  Subscribe  
Notify of