https://github.com/pwa-builder/pwa-starter-vanilla
https://github.com/pwa-builder/pwa-starter-vanilla
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pwa-builder/pwa-starter-vanilla
- Owner: pwa-builder
- Created: 2020-03-31T17:07:53.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-19T23:14:33.000Z (over 1 year ago)
- Last Synced: 2024-04-14T13:54:22.582Z (about 1 year ago)
- Language: JavaScript
- Size: 475 KB
- Stars: 10
- Watchers: 6
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pwa-starter-vanilla
Welcome to the plain JavaScript edition of the [PWABuilder](https://www.pwabuilder.com/) pwa-starter! Are you a beginner to web development and looking to build a new [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)? This is what you are looking for! The pwa-starter-vanilla includes everything you need to start building your first PWA.
## Getting Started
### Prequisites
You will need the following things properly installed on your computer.
* [Node.js](http://nodejs.org/) (with NPM)
* [NPM](https://www.npmjs.com/get-npm)
### Recommended Development setup
We recommend the following tools for your dev setup:
* Editor: [VSCode](https://code.visualstudio.com/)
* Terminal: [Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab) or [hyper](https://hyper.is/)
* VSCode extension: [PWABuilder VSCode extension](https://marketplace.visualstudio.com/items?itemName=PWABuilder.pwabuilder-extension)
### Development
Run `npm install` and then run `npm run dev`, the starter should open in your default browser. From here you can start developing, your changes will be rebuilt and reloaded in the browser as you develop.
## Deployment and Packaging
### Deployment
Once your PWA is ready to deploy we recommend [Azure static site hosting](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website-how-to?tabs=azure-portal) for deploying your PWA.
### Packaging
Many app stores, including the Microsoft Store and the Google Play Store support PWAs. To package your PWA for deployment to these app stores head back to https://pwabuilder.com/, put in your URL and hit `Build My PWA`.
## Folder Structure
```
pwa-starter-vanilla
│ README.md (docs)
| pwabuilder-sw.js (Service Worker https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
| package.json (https://docs.npmjs.com/creating-a-package-json-file)
| package-lock.json (https://docs.npmjs.com/files/package-lock.json)
| manifest.json (web manifest https://developer.mozilla.org/en-US/docs/Web/Manifest)
| index.prod.html (index.html file used for production builds)
| index.html (index.html for dev builds)
| *note*: The index.prod.html registers a service worker which caches assets, so index.html is used for dev builds
| .gitignore (git config file https://git-scm.com/docs/gitignore)
│
└───src (most of your development will happen here)
│ │ global.css (used for global CSS styles and CSS variables)
│ │
│ └───script
│ │
│ |
| └───components
| | header.ts (header component)
| |
| |
| └───pages
| | app-index.ts (app-index component)
| | app-home.ts (app-home component)
| | app-about.ts (app-about component)
```