Getting the Most out of the New Monaca Cloud IDE with the integrated terminal
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!
We have worked for months on this to offer a better development experience. The most important improvements are the followings:
- Integrated Terminal: the embedded terminal with transpiling & hot-reloading support
- Flexible Golden Layout: personalize IDE’s interface as you like
- Multiple Previewers: speed up testing
- 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.
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.
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.
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:
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.
In the Settings dialog, serving command and port number can be configured.
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.
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.
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 ;-)
