Here is our set up:
- MS Visual Studio Community 2017
- Sample application (Ionic Conference) to start with.
- Development Machine: Windows 10
- Web Server: IIS (Windows Internet Information Services)
- 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:
- Open VS 2017. Click File->New->Project From Existing Code. You will see this screen.
- 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.
- Here is your project in Visual studio 2017.
- 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.
- Web Essentials VS 2017
- 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
- The first step is to build the project and get the website’s deploy-able code.
- Simply open the command prompt from your already open visual studio project (Right click anywhere inside Solution Explorer Pane->Open Command Line->Default.
npm run ionic:build --prod
- Wait for the build process to complete (Last line is Lint finished)
- Once done, you will have the complete website code in www folder inside your project’s solution explorer folder.
- 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.
- Open inetmgr in your machine. Go to windows search pane near start menu. Type inetmgr. Select the app that comes up.
- 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.
- 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:
- 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
- A browser windows opens and you can see your Ionic app running as a website.
That’s it. You have an Ionic PWA app running as a website.