How to Convert Website into an App for free with Ionic 4

Hello, today I will be sharing with you how to take any website and convert it into an android app that you can install on your phone. To do this, we will be making use of Ionic 4 which is a mobile framework that allows persons like you and myself to create hybrid mobile apps with HTML, CSS, and JavaScript.

So without any ado, let’s get started … 😉

Prerequisites:

• Website URL: This is the URL of the website we are going to convert into an app. For this tutorial, I am going to use my blog — www.camertechtrends.com
• Node: Official site here
• Ionic CLI: If you do not have this installed, just run the command below.

$ npm install -g ionic

With those all setup, we are good to go. Be sure to navigate to your workspace folder before starting the steps explained below. In my case, I will navigate to my Ionic folder.

$ cd D:\Projects\AppStore\app\Ionic

Step 1: Create a new Ionic project

The Ionic CLI makes creating a new project really. By running the command

$ ionic start web2app blank

This creates a new blank ionic project which we are going to use as a starting point for our app.

The next thing we are going to do is install some plugins we are going to use in our app. Precisely, we are going to install just one which is the Cordova In App Browser Plugin. What this does is that it provides a web browser view that we are going to use to display our site inside our android app.

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install @ionic-native/in-app-browser

NB: If you encounter any issues 😱 it should be probably because you don’t have Cordova installed. A simple install should fix that.

$ npm i -g cordova

Once this is done, move into the newly created web2app folder and run the “serve” command which instructs the Ionic CLI to spin up a local server for you.

$ cd D:\Projects\AppStore\app\Ionic\web2app
$ ionic serve

Now we are ready to convert our website into an app. Your browser should open up once the local server is up and running.

Blank Project Running

Step 2: Writing Code 👨‍💻

Next, we are going to write some code. So quickly pull up your code editing software.

This is going to be a very simple app and we are not going to write a lot of code to get our website into an android app. The first thing we are going to do is to import the Cordova In-App Browser Plugin we installed into our src/app/app.module.ts file in just 2 lines as follows;

Edited lines 13 and 24

What we just did, is declare our plugin as a provided service for our app. We can make use of it in our src/app/home/home.page.ts file.

In this file, we are simply going to tell our app to launch our website whenever our app is launched. To achieve this we use the plugin we installed in association with an Ionic page event.

That’s really all you have to do. If you are interested in adding even more options to customize your app even further, feel free to check out the official plugin documentation here.

I took the liberty of adding some additional some HTML and functionality to exit the app when an exit button is tapped using the ionViewDidEnter and ionViewWillLeave Ionic page events. You can read more on that here in the Ionic 4 docs.

Just add this to your src/app/home/home.page.html file

And some styling to make it look good as well.

Modify your src/app/home/home.page.scss file like this.

Finally, since our app is accessing an external URL from within itself, we will have to permit that in our config.xml file by adding the code on line 14.

NB: It is better to specify the precise URL of your website instead of using the wildcard but for the sake of this tutorial we will go with this.

Step 3: Compile App

And that’s it, just compile our app with ;

$ ionic cordova build android

Here is what I get … 👏 👏 👏

Cool, and we there we have it. Hope this convert website into an app for free with Ionic 4 tutorial was useful. You can find all the code below, Thanks 😎

Github Repo: Web2App

Thanks for reading, feel free to share and connect with me on LinkedIn.