Welcome to the my Hacktoberfest WebSite pwa-starter!
Help me build on this start to create a beautiful website for hacktoberfest.
It's a Progressive Web App built in the simplest possible form using lit. Lit gives you all of the developer experience of React with all the benefits of Web Components such as smaller bundles, simplicity and faster load times.
You will need the following things properly installed on your computer.
You should also be familiar with TypeScript which we use for this project. This helps give you more guidance as you code from intellisense when using VSCode.
We recommend the following tools for your dev setup:
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.
Run npm run build
, the dist/
folder will contain your built PWA. The production build will also generate a pre-caching service worker using Workbox.
Once your PWA is ready to deploy we recommend Azure static website hosting for deploying your PWA.
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
.
The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components and helpers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.
For Authentication you can use the PWABuilder pwa-auth web component. This component lets your users sign-in/sign-up using their Microsoft, Google, or Facebook account. Your app receives their email address, name, and profile picture. Built with β€ by the PWABuilder team.
π Bonus: It's super lightweight, pulling in the authentication libraries only when the user tries to sign-in with one.
ππ Double bonus: It uses the new Credential Management APIs to speed through sign-ins without bulky pop-ups or redirects.
pwa-starter
β README.md (docs)
β rollup.config.js (bundler config https://rollupjs.org/)
| tsconfig.json (TypeScript config https://www.typescriptlang.org/)
| 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)
The rules: