• React
  • React Native
  • Expo/Expo Cli
  • Async and Promises
  • Node
  • Typescript
  • vtecx


  • Creating a simple web app using vtecx
  • Creating a native app using expo
  • Sharing codes from web app to native app

Create a simple web app using vtecx

  • At the root of the app
npm install create-vtecx-app [your-web-app] eg: web-app (Fig 1)
cd [your-web-app]
npm install
npm run login

Create a simple native app using expo

expo init [your-expo-app]
cd [your-expo-app] eg: expo-app (Fig 1)
rm -rf .git
  • Simply delete .git folder inside the expo app if your app already includes a .git at the root
  • We are going to share the codes from the web app to the native app (not the…

Prerequisites [Understanding]

  • Webpack

Github Link:


  • Initial Steps
  • First Step [Setting up the files]
  • Second Step [Preparing for the development]
  • Third Step [Preparing for the production]

Initial Steps

  • Create an account in [sign up]
  • Add an api [service]
  • Create an app usings commands below
npx create-vtecx-app [your-app-name]
cd [your-app-name]
npm run install

First Step [Setting up the files]

  • Go to [your-app-name]’s src folder
  • Create a pwa folder and manifest.json, sw.js inside it
  • I prefer to keep the serviceWorker.tsx inside pwa folder but you can keep it anywhere
  • Import the service worker register function inside the components/index.tsx

Prerequisites [If you want build the PWA from scratch] (optional)

Github Link:

Added a simple button using a bootstrap classes.

<button class="alert alert-success banner">
<strong>Install PWA App</strong>
<script src="add-to-your-home-screen.js"></script>
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 2;
display: none;
} {
display: block;
  • The banner will show only when the banner has a active class
  • Be default banner has a active class if the localstorage BANNER_ID do not have a string ‘not-needed’
  • We will listen to ‘beforeinstallprompt’ save the promise response to a variable
  • The response will have a…


GitHub Link:

What should you expect ?

  • We will be going through an example using http://localhost:4000/

Why should we use Progressive web app at all ?

  • To give an native app experience for tablets and mobile
  • Add offline support for the app
  • Support for push notification (not covered)
  • Many more

Progressive Web App Checklist

  • The website needs to be served over https (use if you want to mimic https for development)
  • The website can also be served using localhost
  • Service worker will not work in http

Shabuktagin Photon Khan

I have passion for UI/UX, animations and love to create websites to run across multiple devices with dynamic user experiences

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store