Getting Started

Prefer a video to reading? Check out our video tutorial here.

Set up our device

First, we will need to install Git and a NodeJS environment on our device. For Windows, we can follow these docs: Set up NodeJS on native Windows | Microsoft Docs.

Create our new app

Once we have Git and Node installed, we are now ready to grab a copy of the starter! First, we will need a Github account, which we can create at GitHub. Once we have a Github account we can then visit the code repository for the PWABuilder pwa-starter here.

Now, choose the local option:

and then click the copy button:

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!

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!

Developing our PWA

The PWABuilder pwa-starter supports two different developer workflows:

In a browser tab

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.

App-First workflow

Our app-first development workflow enables you to build your PWA while its running in its own app window, just like if a user has installed that app to their Windows device.

• With your app open in VSCode, run npm run dev as we did above.
• This will run the development build and will open your PWA in the browser.
• Now, click F5 or Run and Start debugging at the top of VSCode.
• Your PWA will now be running in its own PWA window and you can debug your app directly in VSCode.
• You can then start developing how your normally would, live reloads will simply reload the app in its own window.