How to use Ionic Framework for Web App Development?

Solution 1:

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:

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:

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:

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