{"id":576,"date":"2015-08-11T22:27:30","date_gmt":"2015-08-11T22:27:30","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=576"},"modified":"2016-03-09T19:01:17","modified_gmt":"2016-03-09T19:01:17","slug":"announcing-ionic-lab-mix-it-up-with-our-new-gui-tool","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-lab-mix-it-up-with-our-new-gui-tool","title":{"rendered":"Announcing Ionic Lab: Mix it up with our new GUI tool"},"content":{"rendered":"

\"ionic-lab-img\"

Today, we are releasing the public beta for Ionic Lab<\/a>!<\/p>\n

Ionic Lab is the result of our first experiment with the Ionic Lab concept<\/a>, combined with the Ionic CLI, which gives developers an easy way to start, build, run, and emulate Ionic apps – as well as integrate them with the Ionic Platform (more on that later).
\n<\/p>\n

The CLI itself has been incredibly popular with Ionic devs, specifically those who prefer a terminal-based workflow. Every month, the Ionic CLI is installed over 130,000 times<\/strong>!<\/p>\n

But we want Ionic\u2019s toolchain to be a great experience for those who don\u2019t typically use command line tools, too, so we\u2019ve combined the CLI\u2019s functionality into an easy-to-use interface that we think you\u2019re really going to love.<\/p>\n

\"lab-preview\"

Like the Ionic CLI, Ionic Lab makes it super easy for developers to get up and running with an Ionic project and all the aspects of the development cycle that follow: starting, building, emulating, uploading, and viewing apps; running apps on physical devices; and sharing apps with other users.<\/p>\n

And, as usual, we invested heavily in the web platform to create Ionic Lab.<\/p>\n

\"electron-ionic\"

Using the same technology that runs Atom text editor, Electron<\/a>, we created the entire application by dogfooding the Ionic SDK itself with a few node modules to assist. Go ahead and take a peek under the hood; you\u2019ll see Ionic controllers, services, and state managing the application!<\/p>\n

Getting Started with Ionic Lab<\/h3>\n

To get started with Ionic Lab, download the Mac app<\/a> (Windows coming soon!), and move it to your Applications folder:<\/p>\n

\"lab-installer\"

Start the app, and you\u2019ll be greeted by the welcome screen. You can then drag and drop your existing Ionic applications into Ionic Lab or start a brand new project.<\/p>\n

\"welcome-to-lab\"

Once you select your Ionic app from the left app sidebar, you\u2019ll see options in the middle pane that let you serve, emulate, run, build, upload, or share your application.<\/p>\n

To view your Ionic app in Ionic Lab, hit the \u2018serve\u2019<\/strong> button. You\u2019ll see a preview of your app on the right. Above the app are two tabs, \u2018iOS\u2019<\/strong> and \u2018Android\u2019<\/strong>. You can toggle between the platforms to see how your app will look on an iOS or Android device.<\/p>\n

You can also access logs for your app at any time from the icon in the upper right of the application. This really comes in handy, especially when you need to see what went wrong.<\/p>\n

Next Steps<\/h3>\n

We\u2019re really excited about the evolution of Lab and what\u2019s in store for it going forward. In the immediate future, our focus will be on stabilizing Ionic Lab for all Mac OSX and Windows users. We also plan to allow users to customize settings for Ionic apps (serve port, live reload port, watching locations).<\/p>\n

Eventually, we\u2019ll be including a one-click system setup (Android, Xcode, etc.), integrated Cordova plugin searching and validation, additional preview options (resizing app size, side-by-side views, and orientation), and the ability to customize platform settings (Crosswalk for Android, WKWebView for iOS).<\/p>\n

Our other future plans include:<\/p>\n