Host the "ionic serve --lab" view on a website

ionic-v1
1

Hi there
I’m currently working on an iOS / Android app and have to show the current status to a client. Sadly the client doesn’t want me using an external service (like “Ionic View App”) to show the app to him. Is it possible to host the view of the app as I see it while developing with the command “ionic serve --lab”?
Note: I can’t install ionic on the server…

2

I think my reply is a little bit late but if still helps you or someone ele. If you want to show the app in the browser to someone else while developing, you can use a tunnel such as ngrok. There are other alternatives but is the one I like the most.

Once you install it, run:

ionic serve --lab

Then copy the port of the page opene, probably 8100, and run:

ngrok -subdomain=myapp 8100

Then access it trough myapp.ngrok.com. The subdomain part is not necessary but if you don’t use it you will get a random subdomain.

3

Thanks for your reply. I’m looking for a way that doesn’t need my computer running for someone else to look at the app online. I can put the www folder up on my webserver, but the ionic serve --lab view looks much better.

4

Hey @blanktree, I’m just curious as to why your client won’t let you use Ionic View?

Cheers.

5

Hey @cameronbourke a number of reasons:

  • heavy app (over 1 GB)
  • the customer uses android (no ionic view for android yet)
  • there is a lot of video content in the app, but currently just a “rough cut”. not the final footage. so the customer specifically asked not to use third party services. For this project I even set up gitlab on my server…
6

Your best bet is to just build the APK and send it to him.

1 Like
7

Hey,

I know its an old question but i just had the same case as you, i want to host my app on a webserver and wanted the view to be similar to the one we get when using “ionic serve --lab” .
so as a work around, start by “ionic serve --lab” once lunch copy the source of the displayed page – (right-click view source) – and basically this page is a simple html page with some styles and a couple of iframes pointing to the content of your real app.
change the iframe src and you will have the same view up and running …

Cheers

8

Also, to host it forever, we can copy the whole ionic-cli project inside the project that we are working. Then, open projectBasePath/ionic-cli/bin/ionic, hard code the process.argv, for example:

#!/usr/bin/env node
'use strict';
process.title = 'ionic';
process.argv = [ 'node', 'projectBasePath/ionic-cli/bin/ionic', 'serve', '-bcs', '--port', '3000' ];
var IonicCli = require('../lib/cli');
IonicCli.run(process.argv);

Finally, install forever and run forever start ./ionic-cli/bin/ionic

9

I’ve been trying to get this same kind of functionality and I’ve got it up running as labs.html and I see 2 iframes and each showing the app, but they are both iOS… the path

/?ionicplatform=android

doesn’t seem to do anything different from ?ionicplatform=ios.

If I look at the actual app index.html and change the device in Google Chrome DevTools to an android device, it shows the android layout. Change to an iPhone and it shows the iPhone layout.

Any ideas how I can get the iOS iframe to show the iOS layout and the Android iframe to show the Android layout?

In case it might help other people looking for a solution, here’s how I got to this point:

  1. I’ve just copied the contents of my ionic-app-name/www/ into a
    separate folder
  2. added a labs.html file with the contents from
    looking at the source of the actual ionic serve --lab page
  3. altered the angular.min.js link to point to lib/angular/angular.min.js
  4. run python -m SimpleHTTPServer 8000 to serve the web pages
  5. browsed to http://localhost:8000/labs.html

Once I get this working, I plan on copying the whole folder to my web server and pointing to serve labs.html.

10

I figured it out and it turned out to be pretty simple…

I just had to change the iframe src to include the index.html, so the two iframe lines become:

<iframe id="iphone-frame" src="index.html?ionicplatform=ios" class="frame"></iframe>       
<iframe id="android-frame" src="index.html?ionicplatform=android" class="frame"></iframe>

once I put it up on my server, I renamed labs.html to index.html (so it would be served by default) and renamed index.html to app.html and updated the links/iframe src lines to reflect that. and it works!

if you want to see a demo, checkout http://ionic-ecommerce.herokuapp.com/app/

2 Likes