Expo-to-pwa NPM

Expo PWA Enabler

This Package Allows You To Use A Single Command To Enable PWA Building In Your Expo Project

How To Use

Using This Package Is As Easy As Running A Single Command

    #First cd Into Your Expo Project
    cd my_expo_project

    #Next run Command To Build And Serve!
    npx expo-to-pwa -s

Available Switches	Effect
NONE	The Script Only Makes Necessary Changes To The File Structure New Dev-Dependencies Are *NOT* Installed You Will Have To Run `$yarn` Yourself

-y	The Script Runs `$yarn` (Installs Dev-Dependencies) As Well Along With Making Necessary Changes No `$expo build:web` Is Run, i.e The Project is Not Converted To Static Assets, You Will Have To run It Yourself

-b	The Script Makes Necessary Changes And Builds The Web Assets By Running `$expo build:web`. No Server Is Started.

-s	The Scripts Installs The Dev-Dependencies Needed, Builds Static Resources AND Serves The App On localhost:5000 via `$npx serve web-build`. Recommended Since It Is An All In One Solution For Testing Your App

How Does The Script Work Under The Hood

The Scrips Brings The Following Changes To Your App:

Renames App.js to MainApp.js
Creates A New App.js File Which Calls the MainApp.js (Meaning Overall, Your App Will Not Have Any Changes In The Way It Works) AND Registers A Service Worker
Creates A Directory Called src
Adds A Service Worker And A Service Worker Registerer To The src Directory
Adds Dev-Dependencies (Not Installed If No Command Issued) To Your package.json

Optional Workings From 1st Switch

Runs $yarn To Install The Dev-Dependencies Added To The package.json SWITCH: -y
Runs $yarn And $expo build:web SWITCH: -b
Runs \$yarn, \$expo build:web, And Then $npx serve web-build Which Allows You To Visit localhost:5000 To View Your App SWITCH: -s

Optional Second Switch

In Case You Get The Error 11, Which Occours When You Run The Script Twice You Can Use The -re Flag, Which Replaces The MainApp.js With App.js.

Other Ways Of Using The Script

The Preffered Way Of Using Is Via NPX Which Should Come PreInstalled With Node And NPM.

The Reason Why NPX Is Preffered Over Other Methods Is Because You Do Not Have To Install It Either Globally Or Locally

The Following Is An Example Of Using It With NPX

    #Navigate To The Project Library
    cd my_app

    #Run The Script
    npx expo-to-pwa -s 

    #Or Use The -b or -y flag as per need

    #Second Time
    npx expo-to-pwa -s -re

By Installing Globally (NOT RECCOMENDED)

First Install Globally Using NPM

    npm i -g expo-to-pwa

Then Use In Project

    #Navigate To Project Then:
    expo-to-pwa -s
    #Any Or No FLag As Per Your Need

By Installing As A Dev-Dependency

First Install

    npm i -D expo-to-pwa

Then Update package.json

    scripts:{
        //... Other Scripts
        "build-pwa":"expo-to-pwa -s"
        //name the script any thing you want
        //replace -s with any switch you want
    }

Then Run The Script

    #npm
    npm run build-pwa           #or whatever you named the script
    #yarn
    yarn build-pwa              #or whatever you named the script

Warnings

In Case your App Contains A "MainApplication.js" File, Please Rename It And Update Imports Failing To Do So Might Result In Your File Being Overwritten

In Case your App Contains A "src" Folder, Please Rename It And Update Imports Failing To Do So Might Result In Your Folder Being Overwritten

How To Use The `-re` Flag Without Using The 1st Flags Available

In Case You Do Not Want To Add The -y, -b, or -s Flags, For Any Reason (Which Should Not Be The Case In Most Instances), Just Add A - To In As The 1st Flag

Known Issues

This Package Works Only With Plain JS Projects, It Cannot Work With TS Projects, How Ever You May Rename The App.js to App.ts And MainApp.js To MainApp.ts