Skip to content

Home

Jump to bottom
Justin Willis edited this page Mar 10, 2022 · 21 revisions

Welcome to the PWABuilder pwa starter Documentation!

Build a PWA with the pwa-starter youtube video

The PWABuilder pwa-starter is our opinionated, best practices, production tested starter that we use to build all our PWAs, including PWABuilder itself. The pwa-starter is a starter codebase, just like create-react-app or the Angular CLI can generate, that uses the PWABuilder team's preferred front-end tech stack:

  • lit: Our framework of choice. Lit gives us a way to write code that feels remarkably familiar to popular frameworks like React but that compiles down to browser native Web Components with a tiny runtime that provides things such as performant asynchronous rendering. Put plainly, Lit provides that great developer experience that we may be used too but without any sacrifice in either load-time performance or runtime performance.
  • @fluent/web-components: The Fluent Web Components are a set of UI components, just like Ionic, or the Material Design Web Components. These components help your app achieve the Fluent look and feel, ensuring your PWA feels native on Windows!
  • Vite: Vite handles bundling our code, generating our Service Worker, and can be configured to do even more if needed!
  • Vaadin Router: For routing, we use the Vaadin router. It is built with web components; has a tiny package size and all the features you expect from modern routers.
  • TypeScript: TypeScript gives us features such as auto complete in our editors that helps make the development process easier, along with being perfect for working in a team because you can provide types for your APIs, making your code almost self-documenting.

This documentation contains all the info you need for working with the starter, and can be navigated using the table of contents to the right ➡️➡️➡️

First Steps with the pwa-starter

First, we will need a Github account, which we can create at GitHub. Once we have a Github account we can then generate a new app.

Choose the local option:



A screenshot that shows the Local button on the pwa-starter Github repo

and then click the copy button:



A screenshot that shows the copy button on the pwa-starter Github repo

After we have our URL copied, open a terminal (Windows Terminal comes by default in Windows 11, but Powershell or any other terminal on your operating system of choice will work) and type git clone followed by the URL we just copied. This will clone a copy of the pwa-starter to our device!



A screenshot that shows the git clone command

We can then type cd insert name of the directory created above and then npm install to install our dependencies. We are now ready to start building!

Check Getting Started to learn more about developing your new app!

Clone this wiki locally