The Web Tub
Published in

The Web Tub

Transpile projects with Monaca CLI

Monaca CLI is a command-line tool which makes local development of Monaca apps easier. Recently, a new function called “transpile” has been added to Monaca CLI. It can be used to transpile code for React/Angular 2 apps.

We will explain in details about the transpile option.

Installation of Monaca CLI

To use Monaca CLI, Node.js is required. After installing Node.js, use npm (or yarn) in the command prompt to install Monaca as follows:

$ npm install monaca -g


Transpilation is used to convert languages like JSX (React) or Typescript (Angular 2) into something that can be executed by the browser. If you want to create a project with React, select the category ‘Onsen UI and React’ and then choose the desired template as following:

A directory called src has been created. The React app source code has been stored in this directory.

It is written as JSX as above. This could not be used as Monaca app without transpiling into ES5. Therefore, transpile is applied below.

How to transpile

Running the following monaca command will transpile the code.

  • monaca upload
  • monaca preview
  • monaca debug
  • monaca remote build

Transpilation is performed automatically in Monaca CLI. To execute transpile alone, use the command below. Fonts, JS and stylesheet will be minified.

If the command is successfully executed, these files will be placed in the www directory. This means files are being generated to be used as a Monaca app. The only exception is monaca preview, which keeps the result in memory (instead of www directory) in order to speed up the development process.

Next, all you need to do is to create React or Angular2 App.

Gulp could also be used to transpile; however, it consumes a lot of time. In this case, we recommend using Monaca to create the hybrid app easily.

Monaca CLI command — Monaca Docs




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

Recommended from Medium

Render Props and Custom Hooks

How I developed an application to convert images to pdf, join pdf files and compress several pdf’s…

compress with javascript

Angular: highlight search text

Decoding the code

Frontend development with Web Component standards

Creating a web server with the Node.js HTTP module

Serverlessly Hosted Static Site with Gatsby and AWS

Constructors and garbage collection — Java

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onsen UI & Monaca Team

Onsen UI & Monaca Team

Team of developers from Onsen UI and Monaca

More from Medium

Mosaic.Net: A Simple C# Solution for Creating Mosaic Images

Creating an offline request queue with Capacitor & TSyringe

How to create and deploy your fist firebase cloud function using cli.

Ultimate Local Development Setup with Angular, Firebase & Stripe