Deploy ionic app as a website


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,


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?


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


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 and the share / preview link works great inside a web browser.

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:


@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 and

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


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";  
      name: 'myapp.config'

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.


Thanks @csepic for sharing those code samples - really helpful.

Maybe not a big deal in some applications but to avoid making source code available (e.g. through View Source), we’re planning to add a Gulp Uglify routine to minify and make the JS source code unreadable. More details on how to minify Angular code at


@Mixofia, i was wondering if you will be able to help create a web version of our ionic app like you did for yours for a small fee? Thanks


hey @linjeffmn are you handling, or has anyone handled JWT authentication on web with Ionic?


There is no reason to not have browsers support. We want to write once. My clients want the same interface of mobile apps in the browsers, the same components, directives, views and modals. The same animations…
Please, think about that…


I managed to deploy our app code as mobile website just to find out that the address bar won’t hide (both on Safari and Chrome) when scrolling down as it supposed to. Did anyone managed to resolve this issue?


i found something interesting


It looks like V2 will be expected to work for desktop browsers. See this issue:

We see “Material Design” as the preferred desktop web UI. By default, use the md mode for all desktop browsers. It’s debatable if desktop Windows browsers should get Windows platform or not, but while Windows users are browsing the web, they are using the web platform. On any desktop browser, we want the “web” platform to have a common UI. However, when an Ionic app is placed inside of a shell that runs specifically on windows, it should then get the windows platform.


If this works fine, I don’t understand why it’s a bad idea. I will decide whether or not the experience is good enough for my customers. As a mobile optimized web site, it’s pretty good. I don’t want to force everyone to download an app.


Any news? Support for desktop?


sorry, I never read my notifications. I hope you got things working ok


So in short summary i can design an mobile app and still deploy it as a website instead of building website again??


We deployed ionic app as a website( ) using firebase hosting and it works fine on a chrome browser. However, it’s a bit wonky on IE.


Minification of your app is great for performance and obfuscating the code. It does not however avoid making the source available as there are many high quality reverse engineering tools out there that can make uglified/minified code very readable. If you have proprietary code it needs to be kept on the back end.


Take a look at the options in a webapp.manifest file. It’s part of PWAs and will give you some options for address bar display.