Cordova and Beyond – 2) Using Webpack and Yarn/Gulp in a pure-Cordova project

Taking the best of two worlds

In the previous post we described a pure-Cordova app that we want to move into the exciting world of React.

All the changes we need to put in place

  1. move the Cordova source code from www/ to src/
  2. restructure source code into ES6 modules
  3. remove Handlebars templates embedded in HTML and re-create them using literal strings
  4. bring in lots of new web-dependencies inside package.json: Babel, Gulp, Webpack and all their stuff (submodules, plugins, etc.)
  5. prepare a webpack.config.js file with the following capabilities:
    • discriminate between development and production environments
    • hot reload and sourcemaps in dev
    • uglification in prod
    • html-,json-,style-,css-,url-, file- loaders
    • all aliases needed, in order to allow ES6 module loading without relative paths
  6. prepare a Gulpfile with the following tasks:
    • webpack task to package the ES6 code into the www/ directory
    • webpack-server task to package, server and hot-reload the ES6 code
    • cordova build and cordova run for each platform (in our case platforms are browser and android) for reading the code in www/ and put the Cordova deliverables in platform/<PLATFORM>

Codebase changes in detail

From ES5 files to ES6 modules

See as example how this service becomes an exported module.

Upgrading Handlebars templates

See as example how this snippet embedded in the main HTML page becomes a string literal strictly tied to its view.

Things that we keep as they are

The original Cordova app relies heavily on jQuery. We keep importing it everywhere, using the jQuery module from npm.

The original app uses some custom javaScript to slide from one page’s markup into the other. We keep it for the time being. In the future we will implement some CSS3 transitions.

The original app uses some custom JavaScript to command page routing. Actually we like it, and we will try to keep it also when React will be introduced (I really despise React Router…).

The original app has a collection of icon images. We keep it as it is, but in the future we will transform them in SVG’s using the relevant Webpack loader.

Bringing in Webpack and Yarn/Gulp

Webpack

Webpack has many features that support an ES6/React build workflow. Used as it is inside create-react-app is kind of a straitjacket, but we can use it stand-alone and configure it ourselves to do many services tailored to the Cordova app that we want to upgrade:

  • capability of managing different environments
  • output everything to www/, so to keep the Cordova flavour intact
  • build all the ES6 modules into a single JS bundle with sourcemaps in development and uglification in production
  • copy of all needed HTML, CSS files, images through the right loaders
  • aliases for importing Handlebars and environment constants

A comprehensive view of how webpack operates with the code can be seen in the import section of the main app.js file (which you can compare with its previous, Cordova-based version)

Yarn/Gulp

Yarn is not a must here, but virtually every React developer has it installed globally, so be it welcome. Actually, the whole act is configured and played with Gulp:

  • task prepare-cordova is to be run each time some major change take place in Cordova (one more platform, new plugins, etc)
  • task clean-www wipes away the Cordova working dir each time before any Webpack run
  • task webpack-single is basically a prep stage for any Cordova platform build; its automatic version is webpack-watch
  • task webpack-dev-server  is the faithful helper that assists during new developments, which are displayed and hot-reloaded in the browser
  • for each Cordova platform we have then one Gulp task that invokes the Cordova CLI to build and one to build+start the app:
    • for example, build android invokes a straight cordova build android
    • obviously, all these tasks require a run of webpack-single to prepare in www/ all the needed ES5 code, static assets, etc.

Please note that the official browser release requires a run of task build browser.

What I always import inside my gulpfile is the yargs utility, which does a very neat trick with command-line arguments passed to the gulp task.

Some automation during development

Now that Gulp is in place we can arrange a watcher task that rebuilds the Cordova browser platform when files are changed:

gulp.task('watch', () => { 
  gulp.watch('src/**/**.js', ['build-browser']);
})

After this, I start an http-server in directory platforms/browser/www/. Ok, I still have to reload the browser page myself, but it is fast enough for now. I am unaware of any Cordova solution for automatic build+reload.

When my app will have been moved to React, I will use react-hot-loader to raise further my development speed.

First step accomplished

The first introduction of Webpack is a done thing. We are avoiding create-react-app, but we are still inserting most of its features in the build process.

Next step is to use React to render the original Cordova app. This can be found here.

 

One thought on “Cordova and Beyond – 2) Using Webpack and Yarn/Gulp in a pure-Cordova project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s