Menu

Subscribe

Building a mobile app with VueJS, Cordova, Webpack and Framework 7

on vuejs, webpack, mobile, framework7, cordova, hybrid apps

Choosing a framework

The Vue component eco-system is evolving at an incredible rate. As such, it's hard to pick a favorite when evaluating the right component library for your project. On top of that, it's entirely likely that a new version, or a completely new component library emerges while you're working on your project and it's better. So, even though I've chosen Framework7 for this tutorial, it is entirely possible that a new and better library has surfaced by the time you read this! This is also why I've included some of the strong libraries worth considering in this evaluation.

  • vux
  • mint-ui
  • onsen
  • weex
  • f7

Creating the Framework7 boilerplate

The simplest way to get started with Framework7 would be to download the provided boilerplate template. However, we're going to set this up manually. You'll see the reason for this a little later on.

We start by creating a typical VueJS WebPack project:

vue init webpack mymobileapp
cd mymobileapp
npm install
npm run dev

We'll need to install framework7 and framework7-vue:

npm install --save framework7
npm install --save framework7-vue

Create a routes.js file in the same directory as App.vue, and then edit main.js, App.vue, routes.js and ../index.html to correspond to the gist at the end of this post ("Framework7 initial setup")

You can now run your app and you should see something like this:

alt text

So far so good! We've got the full power of the VueJS webpack template (hot reloading, eslint and unit+e2e tests setup, and we've scaffolded the Framework7 component library and it's all up and running.

The only thing not working on the demo above is the Navigation section. Let's set that up quickly:

Navigation with Framework7:

First, let's make a pages directory inside our components, create the required files/directories so that now the contents of src/components looks like this:

src/components
  |_ pages
     |_ About.vue

And then edit About.vue to look like this:


<template>
  <f7-page>
    <f7-navbar title="About" back-link="Back" sliding></f7-navbar>
    <f7-block inner>
      <p>Here is the About page!</p>
      <p>You can go <f7-link back>back</f7-link>.</p>
      <p>A first paragraph of text.</p>
      <p>A second paragraph of text.</p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {}
</script>

Now, add it to routes.js:


export default [
  {
    path: '/about/',
    component: require('./components/pages/about.vue')
  }
]

Now, when you click the about link, it should happily navigate to your about page. Yay.

Configure your build for Cordova

So: Framework7 gives us the mobile look and feel. But now we also want to be able to build our Vue project into hybrid app so we can distribute it via the relevant app stores. This is where Cordova comes in.

Add cordova to your project like so:

If you haven't already: install cordova:

npm install -g cordova

Now, cause we already have contents in this folder, we're going to cheat a little bit on how we go about setting up cordova.

Init a cordova project:

cordova create cordova create temp

This will scaffold a cordova app inside the temp folder. Now, simply copy the contents of that folder into your top level folder.

At the end, the top-level directory of your project should look something like this:

README.md
build
config
config.xml
help
hooks
index.html
node_modules
package.json
platforms
plugins
src
static
test
www

Now, add your desired platforms:

cordova platform add browser
cordova platform add ios
cordova platform add android

Now, Cordova expects our app to be deployed to www. So we need to update our webpack config to build to www instead of dist.

Open config/index.js and make the following changes:

  • find: ../dist and replace with ../www
  • update: build.assetsPublicPath from / to ./

Now let's build our project:

npm run build

This will build our project into the www folder.

We can now test this in cordova. From the top level directory, run:

cordova run browser

If you want to run it in an emulator, try: cordova run ios.

But running two seperate commands is so 2016. So, let's just add some commands to make out lives a little easier. Open: package.json, and add the following to the scripts section:


...
scripts: {
    "dev": "node build/dev-server.js",
    ...
    "cordova-build": "npm run build && cordova build",
    "cordova-run": "npm run build && cordova run browser",
    "cordova-run-ios": "npm run build && cordova run ios",
    "cordova-run-android": "npm run build && cordova run android"
}

Now, if we want to build the cordova project and run it in the ios emulator, we can just run: cordova-run-android.

So that's cool. Now we have a decent looking app (thanks to Framework7), and we can build the required executables to run it on iOS or Android! That's pretty cool!

For more tips and tricks for working with Cordova mobile apps (testing, debugging etc), see: testing and debugging Cordova mobile apps (coming soon)

Note: Typically, I find that i do most coding using the normal npm run dev lifecycle. The cordova build stuff that we have done here is more so that you can test your apps on the mobile target devices. You'll need this when you start using native plugins etc.

Distribute your boilerplate as a vue-cli template

So that's cool. But we probably don't want to have to do all of this stuff each time we start a mobile web project. So, I've setup a webpack template which will scaffold everything we need to get up and running right away. All you need to do is:

vue init AppointmentGuru/webpack-mobile-f7 my-project

For more info, check out the repo:
https://github.com/AppointmentGuru/webpack-mobile-f7

Resources

Tutorials and documentation

Framework7 initial setup