Scroll Top

Build Process for Universal (web+mobile) Application in AngularJS 2

build-process-for-universal-web-mobile-application-in-angularjs-2

Overview

In Getting Started with Universal (Web + Mobile) Application in Angular 2  article we saw how to create a Universal application in Angular 2. However, the build process was manual where we renamed files for mobile and web development build process. Also, we talked about automating the build process to avoid manual steps. 

In this article, we will automate our Universal application build process to build the platform (web/mobile) specific code.

Pre-Requisites

  • Node JS
  • Gulp – Gulp is a JavaScript task runner that lets you automate tasks such as – Bundling and minifying libraries and style sheets.

Getting Ready

Step 1: Clone Universal app codebase from Github.

Step 2: Run the following command to verify that the application is running and you see the following browser output:

web-login-page

Excluding web/mobile specific code from build

Ionic internally uses gulp task to build & minify HTML/JS/Fonts and SCSS files and gulp has different tasks to minify HTML/JS/Fonts and SCSS.

Open the gulp.js file and follow these steps:

Step 1: Adding a parameter in build command.

Before we exclude web/mobile specific code from build process, we need to identify either we are building the app for mobile or web.

Let us pass a parameter to watch/build mobile-specific code by running the following command:

Read the above mobile parameter value in the gulp.js file with the help of process.argv:

Step 2: Excluding Web/Mobile Specific TypeScript/JavaScript files from the build.

gulp-browserify-typescript module is responsible to provide TypeScript/JavaScript build options. You can find it under node_module/ gulp-browserify-typescript.

  • Include the dependency of gulp-browserify-typescript:

You may refer to NPM page for the complete list of dependencies.

  • Override default options and function for gulp-browserify-typescript and  set default app.ts file for web/mobile:

defaultOptions src config, by default, takes the app.ts file in the build process. We will use app.mobile.ts in the case of mobile build, as shown below:

The only change that we had to make is the src config value. We don’t have to touch other configs and their values.

  • buildBrowserify function override:

The only change that we had to make is to use defaultOptions to construct the final set of options. Rest of the code is from the standard buildBrowserify method definition.

Step 3: Excluding HTML files from the build.

copyHTML module is responsible to provide HTML build options. It comes with node module dependency. It has src config for the HTML files and the build output config. We can find it under node_modules/ionic-gulp-html-copy.

Open gulp.js file and add the following code to override copyHTML function:

We have excluded web/mobile folder based on –mobile build parameter.

Running Build Commands

  • Run the following command to build web-specific code:

  • Verify build folder under www/build and you will not see the mobile specific code, as shown below:

web-build

  • Run the following command to build mobile-specific code:

  • Verify build folder under www/build and you will not see the web-specific code, as shown below:

mobile-build

 

So, now we have our build customized for Universal Angular 2 application and based on the Web or Mobile options, we can create a corresponding deployable package. In this article the default option (i.e. if you don’t mention anything) is for the Web.

How to get the code

You can download ng2_universal_app demo application from GitHub this contains the updated gulp.js.

Summary

In this article, we learned how to build Universal Application (Web+Mobile) in Angular 2 using Ionic 2/NodeJS and Gulp. Hope you found this helpful!

At WalkingTree we build hybrid applications using Ext JS and Angular.js and native application using Xamarin. We will be happy to respond to your queries and help you in taking advantage of great work done by the respective framework teams.

References

Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.