Deploy ionic app as a website

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

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. https://www.npmjs.com/package/gulp-uglify. More details on how to minify Angular code at https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917#.rs9u2dbcw

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

3 Likes

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

1 Like

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.

1 Like

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??

1 Like

We deployed ionic app as a website( https://strappd.org ) 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.

The Ionic website now states:

Ionic uses Cordova or Phonegap to deploy natively, or runs in the browser as a Progressive Web App. Develop once, deploy everywhere.

Is it safe to assume browser support isn’t a problem anymore? Or is that just for Ionic 2?
The examples in this thread seem to work fine. Does anyone have problems with an Ionic app as web app?

I’d like to know this too. I really like Ionic 2 and would enjoy writing websites in it immensely. If we could add “web” as a deployment platform I could make Ionic my main dev platform.

I’m using one of the Ionic Themes, they are a great starting point for an app. We would like to use that as the basis of a web app, but we want to include more functionality. Has anyone tried this? I know that that means we need to have custom components for the web site, but i’m curious about peoples learning from this experience.

So Ionic everywhere is my goal as well.

Anybody know where we can get resources for developing PWA’s and browser apps using Ionic? There needs to be documentation on how to implement split views, routes, route guards, etc.

Hmm – we have the same question. Ionic 2 team has indicated on their blog and this forum that PWAs are supported but we can’t find any documentation specific for web applications. @Ionic team – help please!