PWA – Code organization: basics

This article is a part of the series of articles about ionic4 and Angular8.

We will only be talking about the src/ folder today.

My file structure is :

src/
    app/
    	services/
        shared/
        guards/
        ...
    assets/
    	icons/
        ...
    environments/
    theme/

Projectchunk : Ionic4/Angular8/PWA – Kickstart project

This article is a part of the series of articles about ionic4 and Angular8.

To kickstart the project :

npm install -g ionic

ionic start y.projectchunk blank --type=ionic-angular
ionic cordova platform add android    ionic build

Go to the Firebase console and start a new project

https://console.firebase.google.com

project name : y.projectchunk

add a web application because we’ll want to publish the app as an PWA

application name : y.projectchunk.web

I am setting up my app to be a PWA and an android app currently so I wanted to to debug on my real Android device.

It turned out to be extremely easy !

This command is the command you are looking for :

ionic cordova run android --device --livereload --debug

The options are :

–device : [cordova/native-run] Deploy build to a
device

–livereload : Spin up dev server to live-reload www files

–debug : [cordova] Mark as a debug build

Simply use Chrome or Chromium

Go to the dev tools (either F12, Ctrl+alt+i or Cmd+option+i).

The following tab will appear :

You can now access the full debug mode as if the app was running on your chrome browser ! Including the console as you can see