Prerequisites

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

Section

  • 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
Fig 1: Simple Folder Structure

Create a simple native app using expo

expo init [your-expo-app]
cd [your-expo-app] eg: expo-app (Fig 1)
rm -rf .git
  • We are going to share the codes from the web app to the native app (not the…

Prerequisites [Understanding]

Content

  • First Step [Setting up the files]
  • Second Step [Preparing for the development]
  • Third Step [Preparing for the production]
  • Add an api [service]
  • Create an app usings commands below
npx create-vtecx-app [your-app-name]
cd [your-app-name]
npm run install
  • 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
Fig: Service…


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

Added a simple button using a bootstrap classes.

<button class="alert alert-success banner">
<strong>Install PWA App</strong>
</button>
<script src="add-to-your-home-screen.js"></script>
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 2;
display: none;
}
.banner.active {
display: block;
}
  • 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…


Prerequisites

What should you expect ?

  • Add offline support for the app
  • Support for push notification (not covered)
  • Many more
  • 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