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.

Image for post

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

The Web Tub

Pushing the web current through hybrid mobile and PWA…

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

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