Skip to content

Home

Jump to bottom
Osama Najjar edited this page Aug 13, 2018 · 14 revisions

Mendix PWA Logo

Bizzo Mendix PWAs Generator

Convert Mendix Apps to Progressive Web Apps PWAs

Getting Started

These instructions will walk with you step by step through the process of creating/converting Mendix Apps to Progressive Web Apps.

Prerequisites

This Generator requires node & gulp-cli to be installed on your machine.

  1. you can check if you already have node installed by opening your command line tool and typing :
$ node --version
>> v8.9.4 // output your installed node version number

If you don't have node on your machine, you can download it from its official website Nodejs.org

  1. After making sure that you have node installed, let's check if you have gulp-cli installed, you can do that by typing in your command line tool:
$ gulp -v
>> CLI version 1.3.0 // output your installed node version number

If you don't have gulp-cli installed on your machine, you can install it by typing the following command in your command line tool:

$ npm install gulp-cli -g

After having node & gulp-cli installed we are now ready to go! 👍

Usage :

  1. Download Bizzo PWA Package

  2. Extract the content of the downloaded bizzo-pwa.zip into your Mendix Application root folder.

your root folder now should have a structure like this :

YOUR-MENDIX-APP-NAME
├── deployment
├── javasource
├── pwa_assets
│   ├── pwa_icons
│   ├── _bizzo-scripts
│   └── _bizzo-tags 
│   └── bizzo-connectivity-listener.js 
│   └── bizzo-sw-register.js 
│   └── manifest.json
├── resources
├── theme
│   ├── styles
│   ├── index.html
│   └── ...
├── userlib
├── widgets
├── .classpath
├── .project
├── bizzo.config.json
├── gulpfile.js
├── package.json
├── YOUR_APP_NAME.mpr
└── ...
  1. Open your command line and run npm install Make sure that all the requirements are set and installed on your machine

IMPORTANT NOTE: after running npm install DO NOT forget to add node_modules folder to your svn ignore list

  1. Now, in your index.html add the following comments:
  • Before the closing tag <head>...</head> add :
    <head>
        ....... meta tags
        ........ link tags
        ......... etc
        .........
        <!-- bizzo-tags -->
        <!-- bizzo-tags-end -->
    </head>

the generator will use this comment/hook to inject the required meta tags into your index.html file.

  • Before the closing tag <body>...</body> add :
    <body>
        ....... html tags
        ........ 
        ......... script tags
        ......... etc
        <!-- bizzo-scripts -->
        <!-- bizzo-scripts-end -->
    </body>

the generator will use this comment/hook to inject the required scripts into your index.html file.

  1. From your Mendix app root folder, open your command line tool and run the following command :
npm run bizzo-pwa
  1. We're done! re-run your Mendix App which became now a progressive web app. 😎🥇

What does `npm run bizzo-pwa' do ?

It will read the config file bizzo.config.json in your root folder ( read how to set configuration ) and generate/inject/add the required files/tags for your mendix project.

⚙ Configuration: bizzo.config.json

This file contains the configuration for your Mendix PWA project,and is the only place that you need to work with while you're using this generator. Below we will explore all properties in this file :

{
    "appShortName":"Bizzo MX-PWA",
    "appName" :"Bizzo MX-PWA Boilerplate",
    "deploymentFolderPath": "./deployment/web",
    "extentionsToBeCached":["html","js","css","svg","png","jpg"],
    "sourceFolderPath":"./theme",
    "themeColor" : "#000000",
    "backgroundColor":"#ffffff",
    "appIcons":[
        {"img_512":"https://raw.githubusercontent.com/bizzomate/Bizzo-PWA/master/static/lab_512.png"},
        {"img_192":"https://raw.githubusercontent.com/bizzomate/Bizzo-PWA/master/static/lab_192.png"},
        {"img_128":"https://raw.githubusercontent.com/bizzomate/Bizzo-PWA/master/static/lab_128.png"}
    ],
    "offlineEnabled" : false
}

The contnten above is the default configuration

  • appShortName (Type : String)

Progressive Web Apps are installable therefore this property will be used to provide a short human-readable name for the application. This is intended for when there is insufficient space to display the full name of the web application, like device (desktop / mobile) homescreens.

  • appName (Type : String)

The name that will be displayed in the app splash screen after installing the app.

  • deploymentFolderPath (Type : String, Default : ./deployment/web)

The directory from which your web app is being served 99.99% you won't change this property

  • extentionsToBeCached (Type : Array Of String)

Array of file formats that your app contains and you'd like these files to be cached.

Clone this wiki locally