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

The Plan for React 18…..

First Post

Var, Let, Const — No More Confusion

How To Turn Your Ionic 4 Web App Into a Chrome Extension

Manipulating Arrays in JavaScript

How to Use TypeScript for AWS Lambda in 3 Steps

How to work with WebSockets and unit-test them by OkHttp and Mockito

Basic JavaScript concepts

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

Typescript — Partial ,Parameter and Keyof Keyword

Querying Location Collection and Calculating Midpoint — Multiple Markers on Google Maps with Wix…

Timezones on discord.js

Setting up Tailwind 3 in Electron-React-Boilerplate (Updated Jun 2022