Apr 8, 2014 2 min read

Ionic Framework and web apps

I've known about the Ionic Framework for quite some time and while I found the idea and the examples amazing, the fact that it was meant for hybrid mobile development was a turn-off for me.

But where there's a will, there's a way and it turns out you can also use it to power web apps, even though it's not officially supported. After all, it is something built on top of Angular, and Angular is most certainly meant for the web.

In order to get started with Ionic as a web framework, you need to have nodejs. After that, the only thing you need to install is the ionic package, since cordova is not required.

npm install -g ionic

It's worth mentioning that you might also need to throw a sudo in front of that, as I did on Mac OS.

In order to start a project, you can do something like this:

ionic start myApp blank

This will create a folder named "myApp" inside the current directory, using the blank app template. You can also use the tabs or sidemenu templates, but there's more on that on their site.

Inside myApp you can ignore everything else and focus on the www directory, which contains the actual app. Put them on a server and you're ready to go.

Out of those files, for some basic tests, everything you need is included in this stripped down html file. Pit ionic.css, ionic.bundle.js and app.js in your desired folder, and you're ready to go.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content class="has-header">
      </ion-content>
    </ion-pane>

  </body>
</html>

I can't say I did much testing, but so far the things I tried worked flawlessly on Chrome.

All things considered, Ionic is not a very good choice if you want to do something universal, for both desktop and mobile. But if you want to create a web app accessible online and targeted for the mobile medium, it's definitely worth a shot.

Popular tags