A progressive Web application with Vue JS, Webpack & Material Design [Part 1]
By: Charles Bochet
Tags: JavaScript, Data Visualization, Vuejs, Development, Pwa

[Updated 11/27/2017]

Read the original article on Sicara’s blog here.

Progressive web applications are the future. And more and more big companies are starting playing with them (such as Twitter: https://mobile.twitter.com/).

Imagine a Web Application that you can browse in the subway, that keeps engaging its user through notifications, up-to-date data and that offers app-like navigation, and you get an overview of PWAs capabilities.

A Progressive Web Application (PWA) is a web application that offers an app-like user experience. PWAs benefit from the modern Web technological innovations (Service Workers, Native APIs, JS frameworks) and raise web application quality standard.

If you want to learn more about PWAs, please visit this great Google developer page.

Look at the following PWA ! It looks like a native app, doesn’t it?

Twitter progressive web application

From the developer point of view, PWAs have huge plus on native applications. It’s basically a website, so:

you can write them with any framework you want;

one code to rule them all: it is cross-platform and cross-devices (the code is executed by user’s browser);

easy to ship: no need to download it through a Store.

However, in early 2017, PWAs still face some restrictions:

Safari does not support some basic PWAs features, such as Service workers, but Apple seems to be working on it;

some native functions are still not supported: for more information, see this page What web can do.

Tutorial objective

This tutorial aims to create a basic but complete progressive web application with VueJS and Webpack, from scratch. Our application will meet all the requirements announced in introduction: progressive, responsive, connectivity independant, etc. I want to give you an overview of what can be achieved with PWAs: fluid native-like application, offline behaviors, native features interface, push notifications.

To keep things challenging, we are going to build a cat picture messaging app: CropChat! Cropchat users will be able to read a main flow of cat pictures, open them to view details and post new cat pictures (first from internet, then from device drive or camera).

The tutorial will be split in several parts, that will be published successively:

Basic components of our PWA

Our Progressive Web Application is based on modern components you are going to like!

Let’s start with part 1!

[PART 1] Create a Single Page Application with VueJS, Webpack and Material Design Lite

If you are not familiar with VueJS 2, I strongly recommend that you take a look at the official tutorial

Build the VueJS App base

We are going to use Vue-cli to scaffold our application:

npm install -g vue-cli

Vue-cli comes along with a few templates. We will choose pwa template. Vue-cli is going to create a dummy VueJS application with Webpack, vue-loader (hot reload!), a proper manifest file and basic offline support through service workers.

Vue pwa template is built on top of Vue webpack template. Webpack is a modern and powerful module bundler for Javascript application that will process and build our assets.

vue init pwa cropchat

You will be asked a few questions. Here is the configuration I used:



? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) cropchat

? Project description A cat pictures messaging application

? Author Charles BOCHET <

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? No ? Project name cropchat? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) cropchat? Project description A cat pictures messaging application? Author Charles BOCHET < charlesb@theodo.fr ? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? No vue-cli · Generated "cropchat".

This process creates a project folder with following subfolders:

build: contains webpack and vue-loader configuration files

config: contains our app config (environments, parameters…)

src: source code of our application

static: images, css and other public assets

test: unit test files propelled by Karma & Mocha

Then run:

cd cropchat

npm install

npm run dev