Deploy ionic app as a website

ionic-v1
21

You will end up using $ionicPlatform.ready() in many places, especially if you use ngCordova. for the example above, just use

angular.module('myApp')
.controller('MyCtrl', ['deviceReady,function (deviceReady) {
  deviceReady.waitP().then(function(){
     console.log(deviceReady.device());
  });
});
1 Like
22

shocker. any idea why that data you linked is so completely different to this: http://www.w3schools.com/browsers/browsers_stats.asp

bafflledā€¦

23

Hey Janson,

I would like to do the exact thing and could not see how to PM you. I have made an Ionic app before and I just successfully made my first website with Angular JS. I am looking to create an adaptor that lets me create the app for it. Look forward to hearing from you :slight_smile:

Thanks,

24

Sorry for the late reply @shahkaran94, I was pretty bussy last week.

I solved the situation by calling the app ā€œapplicationā€ and to include ā€œplatformā€. The platform.js is specific to the platform (web or ionic). The controllers are the same for both platforms and the templates are specific too.

Its working like a charme!

3 Likes
25

Hi Janson,

i just finished a small ionic project and it is working fine with iOS & Android and working great with ionic serve in local development machine. Client was very happy but he asked to host the work in normal website, i tried to upload the www stuff as it is and it is working as HTML & CSS but seems some routing and other stuff not really working, is there any tips how can i make my ionic project run as normal website?

thanks.

26

You should never publish an ionic project as normal web page. Ionic is specially designed to work in mobile browsers on android and ios devices.

Your have to build your own platform arround it. Itā€™s pretty easy to use your existing application as part of a normal angularJS web page.

1 Like
27

Actually itā€™s totally possible to publish an ionic/cordova application as a web application. We have a VS 2015 Cordova application that runs on Surface, iPad and Android tablets as a web application (as well as native hybrid apps, obviously). And, yes, ionic works very well in a tablet form factor (side menu with 2 columns in the main application set to 30% and 70% that requires no ionic CSS changes). Both the native and .NET based IIS web versions use the exact same code base.

To accomplish this we simply modify the MVC-based web applicationā€™s project files to copy the cordova projectā€™s files/content/js to a Content directory in the MVC application. Then we simply have this in the root pathā€™s handler:

public ActionResult Index()
{
return Redirect(Url.Content("~/Content/www/index.html"));
}
Obviously, you could also do this with a simple node server.js fileā€¦

Works great. Works both in tablet and phone factors with some enquire.js code to make the 2 columns stacked rather than side-by-side:

    enquire.register("screen and (max-width: 640px)", {
        match: function () {
            // stack input labels
            runStacked = true;
        },
        unmatch: function () {
            // unstack input labels
            runStacked = false;
            $(".item-stacked-label").removeClass("item-stacked-label");
        }

    });

Where controllers modify to stack the labels above input fields for phone form-factors:
if (runStacked) {
$(".someIdentifyingClass .item-input").addClass(ā€œitem-stacked-labelā€);
};

Then simply set a global in deviceready() to detect if youā€™re on a phone or not (so you donā€™t display plug-in stuff like barcode scanners).

1 Like
28

Thats really bad practice. This topic has been discuessed many times. This is a pretty bad idea if you wanna keep a high quality expierience for your customers and users.

29

Actually, our customers love it. The ā€œuser experienceā€ as you put it works virtually identically to our hybrid application. And our users get the benefit of running on tablets, surface pros, toughbooks, etc. We get the benefit of one code base serving differing needs of users. Note, this is vertical application where we get to dictate what browser is used. Total win for us - I have no interest in writing another (slow) jQuery mobile app that does the same thing as the icon appā€¦

30

I canā€™t see why jQuery has to be involved here. Maybe your customers are a specific group of people.

Especially if internet explorer < 10 is involved you willhave a relly big problem.

31

Hi Janson

Thanks for your great feedback. I need to make a decision now and I was hoping you could help me to decide as it seems you have so much experience of this.

We are about to build a small project 15 screens internally and our business requirement is the following.

  • We need to build first a responsive website that works across desktop browsers as well as tablet and mobile
  • Eventually we will need to support native IOS / Android apps as we will need to use camera / geo location etc.
  • We have the REST APIs already

I was hoping to use IONIC until I realized that there is no way we can use a ā€œdesktopā€ build target for obvious reasons.

You mentioned you wrote an adapter. I was wondering if you could tell us how difficult it was to write the adapter so that you can share the code between hybrid app and desktop version ?

Also to speed things up do you think we can start building the app using AngularJS + Boostrap ( or something else ) and later convert that somehow into a hybrid app?

I would like to know what is your opinion. How would you approach this if you were to do this from scratch and we are under time pressure to have a responsive website app as soon as possible?

Thanks

1 Like
32

@istvano sorry, but I wonā€™t be able to show you our codes because the company that I work for is denying it. Its absolutely possible, we worked with bootstrap as well, there is an AngularJS Bootstrap library available. You have to find a way on your own. You have to adapt the ionic functions with your own ones to get the ionic code running on a webpage. I developed our applications for ionic first and ported them to our ā€œownā€ library that is using bootstrap.

33

Hi Janson,

Thanks for your answer. Of course I did not expect you to give me code. I was just wondering if you can give some pointers.

E.g. building it first in IONIC.

  • can I build a new platform perhaps for it ?
  • can I use a different set of templates in angular depending on Platform?
  • what is the best way to deploy for desktops ? Deploy it to nginx or something

Any suggestions which route. I just want to save some time not having to go through scenarios which are deadends.

thanks

34

Hi Janson. Like @istvano, I would love to know the general approach (and not the actual source code, of course) you would recommend. Here is my use case

  • I assume my website/webapp will mostly be looked at from a mobile device.
  • The website needs are just for introducing the mobile app, providing TOS, privacy policy, and may be signing up and managing oneā€™s email notificaiton policy (daily, weekly, never etc).
  • There is no fancy UI - nothing basic ionic can not do.
  • I expect to reuse a lot between the website and the mobile app
    • Simple static info like TOS and privacy policy.
    • Account management - login, password reminder etc
    • Graphic theme, logo, colors
  • I would love to keep the backend simple. Having all the data as an API moves the burden to the client - and I am fine with that.

Given all this, what would you recommend ?

  • staying with ionic
  • moving away from ionic but staying with Angular?
  • moving away from client side frameworks rendering everything on the server as HTML? This would surely help SEO.

Thanks a lot

35

Hi Michael,

One of my key requirement is to build the web page first instead of the hybrid app first. At the moment after loads of research I think I will have to go with onsenUI which seems to be fast enough and also uses AngularJS which is helpful as we have loads of experience with it.

I think Ionic is great and I love the completeness e.g. great fast ui + cli etc.

Perhaps it is also something you might consider.

I am looking forward to other feedback from the ionic users to see what they recommend.

Kind Regards,

36

Hi Janson, Iā€™d like to touch base about a project Iā€™m working on that requires a similar setup (1 code base, multiple platform access - web, mobile web, native ios/android). Where can I email you?

37

We launched a couple sites/iOS/Android. Definitely heed the advice that Ionic is intended for hybrid native apps, but we managed to get a mobile web version out as well.

American Society of Hematology

National Marrow Donor Program

3 Likes
38

Hi @linjeffmn - thatā€™s really great work. Did you create an adaptor to make it work as a website? Iā€™ve been drafting up our app in creator.ionic.io and the share / preview link works great inside a web browser. https://creator.ionic.io/share/html/7ba8deb181a6?ionicplatform=ios#/side-menu21/page1

I need to make a website prototype first, then release the real apps later and would love to use a single codebase, if possible (maybe Iā€™m dreaming). If I could get my prototype working like yours (or like my creator.ionic link), connected to a backend of some sort my life will seem less overwhelming. Any tips as to how you rendered your web version? :slightly_smiling:

1 Like
39

@linjeffmn Impressive examples! Based on the Ionic blog it sounds like mobile web will get more support in the future.

Iā€™m planning a web version of an existing 1.X app and thinking we need to do the below steps, similar to any Angular app deployment. Iā€™m curious if weā€™re missing any key steps and in any case hopefully this helps someone else:

  • Build a web-ready version of the Ionic app as a downloadable set of files (launched with index.html) that can be hosted on our server (e.g. Node.js). Iā€™m assuming itā€™s best to generate the web package through Gulp or Webpack.
  • As part of packaging for the web, weā€™ll uglify the Javascript files (this is a best practice for app stores anyway, as it wouldnā€™t take much to open an Android app).
  • For any Cordova plugins, either test/verify the browser version of the plugin or come up with workaround logic (e.g. email alerts instead of push alerts).
  • Decide on and implement any alternate desktop layouts with different templates and/or CSS media queries
  • Weā€™ll test the app on Firefox and IE but probably set up an auto-detect feature to catch those browsers and recommend Chrome or Safari.
  • Decide which version of Ionic to use. Sounds like 1.2+ has some support for mobile web and that 2 will have even more, possibly with support for split-view layouts similar to iOS settings or mail on iPad.

Thereā€™s a cool example of a web-based Ionic 2 app at http://coenraets.org/blog/2015/10/ionic2-salesforce-oauth-rest/ and https://github.com/ccoenraets/ionic2-salesforce-sample.

Are there any other major steps or factors to watch out for? Thanks in advance for any tips.

2 Likes
40

Iā€™m a developer on one of the apps @linjeffmn mentioned above. Weā€™re hosting our web version on Heroku. I used the following Node.js buildpack:

The main challenge was figuring out how to set up environment specific variables that I could use in the app. In package.json I have the following entry:

"scripts": {
  "postinstall": "./node_modules/.bin/gulp config"
}

And in gulpfile.js:

gulp.task('config', function () {
  var env = sh.env['NODE_ENV'];
  var src = "envs/" + env + "/config.json";  
  gulp.src(src)
    .pipe(ngConstant({
      name: 'myapp.config'
    }))
    .pipe(gulp.dest('www/js'));
});

I then have /envs/[environment name] folders each with a config.json that contains any environment-specific config vars:

{
    "MY_VAR": "something"
}

At the top of app.js, I can then require it so those variables are injectable:

angular.module('myapp', ['ionic', 'myapp.config'])

I also hid certain functionality in the web version that obviously didnā€™t make sense, like notifications. Pretty straightforward:

$scope.isWeb = (typeof window.plugin === "undefined");

Again this is not exactly recommended, but worked for our needs.

3 Likes