The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

We just added a new feature to the Ionic CLI tool that we’re calling Ionic Lab. Ionic Lab makes it much easier to test your apps on multiple screen sizes and platform types:

Image

We want Ionic to be both a great SDK and a toolchain that gives hybrid developers a leg up on native, and this is one of our first big steps in that direction.

To get started with Ionic Lab, make sure to update to the latest version of Ionic in NPM:

$ npm install -g ionic

We’ve extended the serve command to open the new Lab UI:

$ ionic serve --lab

If you’ve used the serve command before, you’ll feel right at home with this one. Just like serve, it opens
your app in a browser, but now it shows you what your app will look like on a phone, with both iOS and Android
side by side.

And of course, it supports Live Reload and all the other goodies we’ve added over the last couple of months.

We hope you enjoy this new feature. Expect a lot more from Ionic Lab in the near future!

  • http://simplyspiritdesign.com Jasdeep Khalsa

    Do you need the iOS and/or Android SDKs installed on your computer to take advantage of this feature? In my case I don’t use a Mac so developing for iOS is a real problem since XCode doesn’t run on Linux or Windows

    • Anirudh

      You wouldn’t need it for this feature specifically. This just opens your project’s www folder in the browser basically. So you can experience the UI and look and stuff, but of course you wouldn’t be getting any device hardware functionality like GPS or Bluetooth that your app may have.

  • http://nicholls.azurewebsites.net/ Juan David Nicholls

    How do they may have different styles for each UI? Android, iOS, Win Phone… ๐Ÿ™‚
    PD: What do you recommend to use Google Material Design?

  • Ronan Connolly

    Can’t wait until this feature gets built out with keyboard, geolocation and orientation support ๐Ÿ™‚

  • Heywood

    How about tablet sizing?

  • http://sampathloku.blogspot.com/ Sampath Lokuge

    Here you have said like this “Ionic Lab makes it much easier to test your apps on multiple screen sizes and platform types:”.So how can I test it with the multiple screen sizes ? It’s having only one screen size right ? ๐Ÿ™

    • Tony Curwen

      Would be a great feature – in the interim try patching the #iphone-frame CSS definition for the various screen sizes, works fine for me (though a kludge for sure).

  • Daniels Ugheghe

    android platform is not installing in my ionic lab

  • Anderson Faria Silva

    Is it possible to get current position for google maps in ionic lab? If so how can I do this?

  • Wagner Doering

    Is it possible to access the console log of each little browser at Ionic Lab??

  • Mukesh

    is there any way to preview application on browser in landscape mode

  • Jesus Gomes

    amigos tengo un problema en windows al ejecutar el comando ionic serve
    en la imagen esta el error pero en resumen dice

    “este archivo no tiene ningun programa asociado para realizar esta accion”
    ayuda

  • NooNoo

    This is awesome!

  • kamal

    How can I start ionic on red hat linux ? I downloaded ionic lab for linux but couldn’t start it.Can you please help here ?

  • Shubham Jain

    i m trying to open another application file in browser to test but ionic serve command for that file open a previous file

  • Jaideep Ghosh

    Hello,
    Am beginner in Ionic Lab, and facing an error: ERROR INSTALLING ANDROID PLATFORM.
    Please help me. Am using Ionic Lab on windows 8.1 and android studio is installed.