How to use Ionic Framework for Web App Development?
MobileWeb ApplicationsIonic FrameworkHybrid Mobile-AppMobile Problem Overview
Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
Mobile Solutions
Solution 1 - Mobile
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).
Solution 2 - Mobile
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
Solution 3 - Mobile
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.
Solution 4 - Mobile
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
Solution 5 - Mobile
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!
Solution 6 - Mobile
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.