Ionic App as Website using Visual Studio 2017


Run Ionic app as website on IIS web server using Visual Studio. Same code base for Android, IOS and website. Ionic 2 PWA app can be run anywhere.


Ionic Framework and Angular is a combination of technology that can be used to create a single application that can work as an Android app, IOS app and a website (or a web app).

Here is our set up:

  1. MS Visual Studio Community 2017
  2. Sample application (Ionic Conference) to start with.
  3. Development Machine: Windows 10
  4. Web Server: IIS (Windows Internet Information Services)
  5. The latest Ionic version is 3 at the time of writing this article. I am sure this set up works with Ionic 2 to deploy on web as a website.

I simply downloaded the sample application as a zip file from the github link given above. Then, unzipped the project and opened it in visual studio with these steps:

  1. Open VS 2017. Click File->New->Project From Existing Code. You will see this screen.
  2. Visual Studio 2017 New Ionic project from existing code

    Visual Studio 2017 New Ionic project from existing code

  3. Click Next. This screen will ask you for the project files and their location. Choose the folder where you unzipped the saple Ionic project’s files. Then, click Finish.
  4. Here is your project in Visual studio 2017.
  5. VA 2017 Ionic sample project

    VA 2017 Ionic sample project

     

  6. You may or may not already have the VS 2017 web essentials pack and NPM (Node Package Manager) installed on your windows machine. If you do not have it already, then I recommend installing both. These will make your life easier later.
    1. Web Essentials VS 2017¬
    2. Follow this link for installing NPM and how to use command line tool in Visual studio.

Run this Ionic project as a website in IIS

  1. The first step is to build the project and get the website’s deploy-able code.
  2. Simply open the command prompt from your already open visual studio project (Right click anywhere inside Solution Explorer Pane->Open Command Line->Default.
  3. npm run ionic:build --prod
  4. VS Command Line Ionic website build

    VS Command Line Ionic website build

  5. Wait for the build process to complete (Last line is Lint finished)
  6. Once done, you will have the complete website code in www folder inside your project’s solution explorer folder.
  7. Visual Studio Ionic app as website in www folder

    Visual Studio Ionic app as website in www folder

     

     

  8. Now, we have the code that can be deployed on any web server and run as a website. We are going to use IIS as the web server here.
  9. Open inetmgr in your machine. Go to windows search pane near start menu. Type inetmgr. Select the app that comes up.
  10. Right click on ‘Sites->Add new website‘ in left pane. Give it any name that you like. We have named it ‘test‘. Give the port as 8080 when it prompts for it.
  11. Choose the folder location of www as the website location in the ‘new website’ wizard. Here are the settings once you are done creating the website:
  12. Run Ionic app as website on IIS

    Run Ionic app as website on IIS

     

  13. Now, simple right click on ‘test‘ (or your new website name) ->Manage Website->Browse. OR you can directly go to this address in your chrome (or any) browser:¬ http://localhost:8080
  14. A browser windows opens and you can see your Ionic app running as a website.
  15. Ionic app as website running on IIS as webserver

    Ionic app as website running on IIS as webserver

     

    That’s it. You have an Ionic PWA app running as a website.

 


 Updated

 Tagged In


© Copyright   AM22 Tech
Follow Us
     


This story was originally published at AM22 Tech. This printer-friendly version is made available for your personal and non-commercial use only.
  
© Copyright 2017   AM22 Tech