David Alvarez
Jun 1, 2018 · 4 min read

Hello developers! As you may know, we’ve recently released the brand new Monaca Cloud IDE. Today, we are going to show you what is great about and how you can make the most out of it!

The new Monaca Cloud IDE

We have worked for months on this to offer a better development experience. The most important improvements are the followings:

  1. Integrated Terminal: the embedded terminal with transpiling & hot-reloading support
  2. Flexible Golden Layout: personalize IDE’s interface as you like
  3. Multiple Previewers: speed up testing
  4. Monaco Editor: new and improved code editor

1. Integrated Terminal

We are very excited to to release this new addition to Monaca Cloud IDE. With Integrated Terminal, Monaca Cloud IDE now supports the highly coveted transpiling feature. In addition, Hot Reloading and File Watch are also available.

Integrated terminal in the New IDE

Transpiling support

Integrated Terminal makes it possible to to create, manage and develop transpilable projects (such as React, VueJS, Angular, and more) right within Monaca Cloud IDE.

Prior to this release, transpiling projects could only be run with Monaca CLI or Localkit.

Transpiling projects

Hot reloading for transpilable projects

Every time you made a change and saved it in the old IDE, the Previewer refreshed the whole application showing the index page. Unlike the old IDE, the Previewer only refreshes the current page in the new IDE. This feature is called Hot Reloading. It allows you to see the instant update of the current page you are working on without having to start from the beginning every time you make changes.

Note: This feature is only available with transpilable projects.

Modifying a view (without refreshing the whole app)

File Watch

In the old IDE, whenever you made changes to project files such as adding a new HTML file, uploading new images and so on, the Previewer was not able to detect these changes automatically. You needed to manually refresh the Previewer. However, with the new IDE, such changes are detected and the Previewer will be updated automatically. This feature is called File Watch.

Here is a quick and simple example to demonstrate this feature:

Updating a picture (same name but different content)

Server setting

Preview Log tab shows the output from the Preview server for each project. Previewer will connect to the Preview server once it accepts HTTP request. By default, monaca preview command and port 8080are used in the Preview server. However, you can change to your own Preview server by clicking the gear icon.

Preview Log

In the Settings dialog, serving command and port number can be configured.

Server Settings

2. Golden Layout

Golden Layout is a multi-window javascript layout framework manager for web apps, providing you with a flexible layout IDE. Unlike the old IDE, all panels can be moved wherever you want and be maximized/minimized; letting you adapt the interface to your likings.

Golden Layout

3. Multiple Previewer

With this new feature, not only can we create however many previewers we want in the IDE, but also, thanks to the integrated terminal, we can support transpiling projects previsualization (see Integrated Terminal section).

With the concurrent multiple preview panels, you can now easily test your applications on various OS and device models at the same time in the IDE, reducing the testing time, as well the development time.

Multiple Previewers

4. Monaco Editor

We have replaced the code editor from Ace editor to Monaco in the new IDE. The main reasons are:

  • Auto-completion in many languages such as TypeScript, HTML, CSS or Onsen UI
  • Basic syntax highlighting
  • Better IntelliSense and validation

To sum up, the new IDE enables you to develop transpilable projects (e.g. VueJS, React, Angular2, etc) right in the Monaca Cloud IDE, without a need for Monaca CLI or Localkit. On top of that, the Integrated Terminal provides you with additional functionalities such us the File Watch and Hot Reloading. Furthermore, a new flexible layout, multiple previewers and efficient code editor will give you a productivity boost during your development.

We hope that the new Monaca Cloud IDE is making your life easier! Please let us know what you think. And don’t forget to give us a clap if you like this post ;-)

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Khemry Khourn and Yuki Sekiguchi

David Alvarez

Written by

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade