2017 / 10 / 22 comments

Making work the Vue.js webpack template with cordova

Making work the Vue.js webpack template with cordova

There are already frameworks like ionic or quasar that makes easy to build cross-platform web based apps. The thing is that they usually take a lot of decissions for you like css styles or frontend frameworks.

So here is a tutorial for making the official Vue Webpack template work with cordova.

Why to do this? It gives you a codebase that works with browsers, ios and android with exactly the same code.

So now you can use all your dev tools for web development. The thing I most like about this approach is coding on my browser, with the webpack hot reload, so I can test the changes without waiting my ios or android app to compile.

Also it should be easy to adapt this steps to any other webpack config.

So lets start! First we install the webpack template

npm install -g vue-cli
vue init webpack vue-webpack-cordova
cd webpack vue-webpack-cordova
npm install
npm run dev

At this point you will have the default dev environment running.

Here you have the github repo that contains the code of this tutorial.

Tip: If you just want the final template just follow the Readme.md of the repo.

Building the project for cordova with webpack

If you run the command npm run build you will get a folder called dist/, this folder contains the code inside src/ compiled. The following steps are for creating a similar folder called www/ prepared for cordova.

The template inside config has some env.js files that contains custom ENV variables, create one called mobile.env.js inside there with the following content

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  PLATFORM: '"mobile"',
}

Also add this to config/prod.env.js

PLATFORM: '"web"',

And add this to config/dev.env.js

PLATFORM: '"dev"',

Edit /config/index.js by adding this object inside the module.exports

mobile: {
	env: require('./mobile.env'),
	index: path.resolve(__dirname, '../www/index.html'),
	assetsRoot: path.resolve(__dirname, '../www'),
	assetsSubDirectory: 'static',
	assetsPublicPath: './',
	productionSourceMap: false,
	productionGzip: false,
	productionGzipExtensions: ['js', 'css'],
	bundleAnalyzerReport: process.env.npm_config_report,
},

Now duplicate and rename build/webpack.base.conf.js

cp build/webpack.base.conf.js build/webpack.base-mobile.conf.js

And inside webpack.prod-mobile.conf.js replace “config.build” with “config.mobile”.


Duplicate and rename build/webpack.prod.conf.js

cp build/webpack.prod.conf.js build/webpack.prod-mobile.conf.js

And inside webpack.prod-mobile.conf.js replace:

  • “config.build” with “config.mobile”.
  • and
// replace this line
const baseWebpackConfig = require('./webpack.base.conf')

// for this one
const baseWebpackConfig = require('./webpack.base-mobile.conf')

Duplicate and rename /build/build.js

cp build/build.js build/build-mobile.js

And inside build-mobile.js replace:

  • “config.build” with “config.mobile”.
  • and
// replace this line
const webpackConfig = require('./webpack.prod.conf')

// for this one
const webpackConfig = require('./webpack.prod-mobile.conf')

Add this line to package.json inside the scripts object. This file is in the root of the project.

"build-mobile": "node build/build-mobile.js"

Finally we are ready to compile the code for cordova having two separate environment, one for web and other for mobile.

npm run build-mobile

Installing Cordova

Now we have to install the cordova dependencies

npm install -g cordova

The ios dependencies (if you need to build an ios app) [only mac]

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
npm install -g ios-sim ios-deploy

brew install cocoapods
pod setup

And the android dependencies. Here I’m using cask as package manager to install them, if you are not in mac use your favorite one.

brew tap caskroom/cask
brew cask install caskroom/versions/java8

touch ~/.android/repositories.cfg

brew cask install android-sdk
brew install gradle

Edit ~/.bash_profile and add the following line

export ANDROID_SDK_ROOT=/usr/local/share/android-sdk

After sdkmanager is installed we can install the dependencies

sdkmanager "platforms;android-26"
sdkmanager "extras;google;m2repository"
sdkmanager "extras;google;google_play_services"

Okay, we are ready to make this work with cordova. We only need two things, a www folder that contains all the compiled code and a config.xml. Here you have the full documentation but I will explaing the basic setup.

Don’t forget to edit .gitignore and add the following lines for ignoring cordova files that shouldn’t be tracked. This file is in the root of the project to

platforms/
plugins/
www/

Now add a basic config.xml in the root of the project like this one

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
		<name>HelloWorld</name>
		<description>
				A sample Apache Cordova application that responds to the deviceready event.
		</description>
		<author email="[email protected]" href="http://cordova.io">
				Apache Cordova Team
		</author>
		<content src="index.html" />
		<plugin name="cordova-plugin-whitelist" spec="1" />
		<access origin="*" />
		<allow-intent href="http://*/*" />
		<allow-intent href="https://*/*" />
		<allow-intent href="tel:*" />
		<allow-intent href="sms:*" />
		<allow-intent href="mailto:*" />
		<allow-intent href="geo:*" />
		<platform name="android">
				<allow-intent href="market:*" />
		</platform>
		<platform name="ios">
				<allow-intent href="itms:*" />
				<allow-intent href="itms-apps:*" />
		</platform>
</widget>

Building the final app

Add the mobile platforms that you need

cordova platform add ios
# or / and
cordova platform add android

Check that everything is okay

cordova requirements

Run the app

cordova run ios
# or / and
cordova run android

And voila!

A custom cross-platform web solution without boilerplate.

Optional

If you are going to use custom cordova plugins you need to load them.

First duplicate and rename index.html to index_mobile.html

cp index.html index_mobile.html

Now edit index_mobile.html and add this line inside the <head></head> tags.

<script src='cordova.js'></script>

And for finishing up edit config/webpack.prod-mobile.conf.js and replace “index.html” for “index_mobile.html”.