76

Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?

2ooom
  • 1,760
  • 1
  • 23
  • 37
xivo
  • 2,054
  • 3
  • 22
  • 37
  • I'm curious too. I agree that this should be possible (about to go try), but wondering why there are no Ionic mobile websites. Perhaps because it only supports webkit and devs are worried it won't work with Firefox for Android? – Kyle Cureau Sep 19 '14 at 19:12
  • Their direction of Ionic is only made for Hybrid Web Apps that are going into the App store. There are issues that will not be resolved for a pure web solution. – xivo Sep 20 '14 at 00:04
  • @xivo Do you already know such issues? We had an idea that ionic`s components will look same in mobile browser (comparing to "wrapped" mode). – the_ghost Jan 28 '15 at 15:28
  • @the_ghost we had our issues with them because translate was not supported or worked improperly for many cases in mobile browsers and Ionic uses that quite often and caused issues. I don't know if this the case anymore. – xivo Jan 28 '15 at 20:20
  • One problem I have found is mouse wheel support in Firefox. It works fine other browsers. But it lets you drag the screen like a touch+drag. – Bon Feb 19 '15 at 18:12
  • It's a bit closer to reality. [Serve Rails API and Ionic mobile website together](http://stackoverflow.com/questions/36074227/serve-rails-api-and-ionic-mobile-website-together) – builder Mar 22 '16 at 03:08
  • 1
    It looks like the newer versions of Ionic are aiming to work with true web browsers in addition to webview containers. "Ionic 2 is focused on building both native/hybrid apps though Cordova, as well as adding the ability for **Progressive Web Apps** and Electron ." [source](http://ionicframework.com/docs/overview/#browser-support) – giraffe.guru Sep 29 '16 at 21:29

6 Answers6

29

This is possible if you include the components of www/lib/ - This folder contains the core of ionic(the ionic framework + angularjs) and you can proceed from there.

However it's important to note that ionic was built on top of angularjs, specifically with mobile in mind. To get better results for web app development, you should consider using core angularjs(for functionality) and bootstrap3 (for UI).

Orane
  • 2,223
  • 1
  • 20
  • 33
  • Unfortunately support for Bootstrap 3 and AngularJS 1.3 is not optimal currently (Dec-2014). There are at least 2 projects wrapping Bootstrap for AngularJS: [Bootstrap UI](http://angular-ui.github.io/bootstrap/) has no official support for AngularJS 1.3 and [AngularStrap](http://mgcrea.github.io/angular-strap/) seams to have less "official" support from Angular team. I wouldn't know which of both I should choose. Of course most of Bootstrap can be used without JavaScript so it's a big gain to use this awesome CSS framework. – hgoebl Dec 26 '14 at 21:35
  • 1
    Though there is no official support, Anguar is used for logic while bootstrap is used for design. I have used both in several projects. There is no need to serve bootstrap js through angulars dependency injection. Keep bootstrap files in a separate "media" folder and load them once in a base.html template (which extends all templates) and there will be absolutely no issues. – Orane Dec 28 '14 at 20:15
  • I use angular-bootstrap which is quite compatible and performs well. http://angular-ui.github.io/bootstrap/ – Sándor Tóth Jan 21 '15 at 08:48
  • 1
    For AngularJS and bootstrap simply use the bootstrap.css and then angular UI - it works seamlessly - For clarity sake DO NOT use bootstrap.js with angular – Mrk Fldig Jul 20 '15 at 23:29
  • is is possible to keep the business login in common (like in common Angular services) and user Ionic on mobile but Bootstrap for web? – Balazs Nemeth Feb 22 '16 at 00:43
14

V2

Ionic now supports PWA(web apps) and support for desktop is coming too soon

Ionic build browser

V1

Ionic can be used for regular web development. If all you need is web dev stop here. But if you want your app & web to serve from the same codebase read further

Step 1

Create a copy of index.html inside merges/browser/ (merges is at the root level i.e myApp) include 

<script>
    var is_browser = true
</script>

&

<body ng-app="myApp" class="platform-website">

Step 2

Remove unnecessary js files like cordova.js from index.html

Step 3

add in app.js

var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
              && ionic.Platform.isWebView());

Now use css hide/show or angular hide/show using these

aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
6

While I don't believe there is much support for anything but hybrid web apps in Ionic, you can check out Mobile Angular UI for a very similar alternative with support for the mobile web.

user456584
  • 86,427
  • 15
  • 75
  • 107
4

Orane is right.

When You "node app.js" your app runs a server. We need to provide this server with all files we want. With Ionic Application it's basically www folder. In following example i put all contents of www folder to my public folder.

My root folder has app.js file and public folder. That's how app.js looks like:

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.get('/', function (request, response) {
    response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));

In public folder i have all frontend css and js. We included the whole folder public in code above. Now in index.html of public You should include files with public/, like this:

<script src="public/lalala.js"></script>

All the best, anybody, feel free to ask anything about Node.js+Ionic Framework

Mark Okhman
  • 564
  • 6
  • 13
1

Depending on the complexity of the app it is absolutely possible to use the Ionic Framework for regular web applications!

When you create your app there is a /www folder that contains all your HTML, JS, and CSS. That's the front end for your web app.

Most web apps are simple interfaces that access data with only a little bit of logic in between. In most cases you can put that logic in your JS and let the clients handle the workload.

Data can be handled by a Backend-as-a-Service (BaaS) solution like Firebase or Parse. I like Firebase because it ties in nicely with Angular and Ionic.

If you need to connect to services that require secrecy, like credit card payments, you can hook in to a service like Zapier.

For hosting there are a number of static app hosters that have popped up specifically for serverless apps. I prefer divshot even though they don't seem to be actively pushing out new features anymore.

The solutions I've outlined here will help you maintain the consistency across platforms that makes Ionic great!

leetheguy
  • 872
  • 10
  • 29
0

Our choice for hybrid mobile apps is the ionic framework, however for the web applications front-end part is not in the ionic framework.

For example, we do web application part in pure Angular or Kendo UI for Angular AngularJS UI.

It is more efficient when the same team can be productive on both platforms (mobile and web).

Hope it helps.

ivan
  • 13
  • 3