expo-to-pwa
v1.0.6
Published
Convert An Expo App To A PWA With Just One Command
Downloads
3
Maintainers
Readme
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
toMainApp.js
- Creates A New
App.js
File Which Calls theMainApp.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 TheMainApp.js
WithApp.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
Licenses
This Has Been Licensed By Muhammad Shaheer Turab, Under The MIT Liscence.