S. J. Lewis 365 Solutions

Hello Angular World (page 5 of 7)

Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Hosting with Local IIS

My preference it to develop web applications using my Local IIS server opposed to the IIS Express server that ships with Visual Studio. I have several reasons for this, two of which are:

  • You have more control over how your application is served, for instance domain names and port numbers
  • You can test your web applications even if Visual Studio is not running

Hosting node.js applications in IIS on Windows

  1. Prerequisites
  2. Install “iisnode”
    • Download iisnode from tjanczuk/iisnode GitHub
    • https://github.com/tjanczuk/iisnode
    • Once installed, navigate to: C:\Program Files\iisnode (for x64 version)
    • Open a Command Prompt window using Run as Administrator
    • Optional: To set up the sample node app:
      1. Right-click setupsamples.bat and click Run as Administrator
      2. Follow the instructions if required…
      3. Once installed open a browser and navigate to: http://localhost/node
  3. Restart IIS
    • Open a Command Prompt window using Run as Administrator
    • Type iisreset /noforce and press Enter
C:\Windows\system32>iisreset /noforce

Attempting stop...
Internet services successfully stopped
Attempting start...
Internet services successfully restarted

C:\Windows\system32>

Add an IIS Application (Website)

You will need to have already turned on Internet Information Services as a Windows Feature.

  1. Open Internet Information Services (IIS)
  2. Expend your local server node
  3. Right-click on the Sites folder
  4. Click Add Website…
  5. Enter the following:
    • Site name: Angular.World
    • Physical path: (navigate to the Hello.Angular.World project folder)
    • Port: 12345
  6. Click OK

Config Visual Studio Web Application

  1. Select Angular.World and right-click
  2. Click Properties or Alt+Enter
  3. Click on Web
  4. Change the Servers type to Local IIS
  5. Change the Project Url, for example: http://localhost:12345
  6. Press Ctrl+S

Restore “package.json”

  1. Open/expand the Angular.World
  2. Right-click json
  3. Click Restore Packages

Note: You can use Visual Studio’s Output window to monitor the progress of the packages being restored.

Test Your Local IIS Application

  1. Open your favourite browser (e.g. Chrome)
  2. Enter the full path to the _index.hml page, for example: http://localhost:12345/_index.html
HTML Page Local IIS

Note: If the Application fails, then open the Developer tools (for Chrome press F12) and review the output in the Console window

Pages: 1, 2, 3, 4, 5, 6, 7

Siôn Lewis

, , , ,
, , , , , , , , , , ,