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 <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 <head>...</head> 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.

Clone this wiki locally