#15 - Tools: Getting Started / Building New PWA
Tags: pwa, pwabuilder, webdev, beginners
Published: 2022-02-28 22:37:57

---
title: #15 - Tools: Getting Started / Building New PWA
published: true
description: Let's continue our #30DaysOfPWA journey by learning how to build a PWA using PWA Studio and other tools! https://aka.ms/learn-pwa/30days-blog
tags: pwa, pwabuilder, webdev, beginners
canonical_url: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/01
series: Learn Progressive Web Apps with 30DaysOfPWA
cover_image: https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-01.jpg
---


Welcome to Day 15 of #30DaysOfPWA! New to the series? Three things you can do to catch up:

 * Read the kickoff post below for context.
 * Watch the [GitHub Repository](https://github.com/microsoft/win-student-devs) for updates.
 * Bookmark [#30DaysOfPWA Blog](https://aka.ms/learn-pwa/30Days-blog) for resources.

{% link https://dev.to/azure/welcome-to-30daysofpwa-2e54 %}

This is a shortened version of [this canonical post](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/01) for the #30DaysOfPWA. 

---

## About The Author

Today's post is authored by _Justin Willis_ - a member of the PWABuilder team at Microsoft. Follow Justin at [@justinwillis96](https://twitter.com/justinwillis96) or here on dev.to.

{% user lilpwa %}

---

Welcome to day **week 3 day 1**  of the [30 Days of PWA](https://aka.ms/learn-pwa/30Days-blog) series! Today's blog post will introduce new tools from the [PWABuilder](https://pwabuilder.com) project - including PWA Studio and PWA Starter. We'll use these tools to create a new PWA with just a few clicks, then dive into some of the tools behind this process.

---

## Introduction

Hello! For today’s post on the [30 Days of PWA](https://aka.ms/learn-pwa/30Days-blog) series, we will be getting started with some new tooling from the [PWABuilder Project](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/PWABuilder)! The PWABuilder team has been working on tools for developers at any step of the building process, from starting a brand new PWA to packaging your existing PWA for the app stores. 

In this article, we will focus on [PWA Studio](https://aka.ms/learn-PWA/30Days-3.1/pwa-studio), a new VSCode Extension from the PWABuilder project, and [the PWA Starter](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/pwa-starter), also from the PWABuilder team, a codebase template to help you get started with building new PWAs.

---

## Getting Started + Demo

Let's start building a new Progressive Web App using PWA Studio! PWA Studio's `Start a new App` feature creates your app using [the PWA Starter](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/pwa-starter).

 * [1] Install PWA Studio from the [VSCode Marketplace](https://aka.ms/learn-PWA/30Days-3.1/pwa-studio).
 * [2] Once installed, click the PWABuilder Icon on the left side of VSCode

![The PWABuilder icon on the left side of VSCode](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/icon-on-left.png)

 * [3] You should now see a `Start new PWA` button in the bottom bar of VSCode. Click this button to start generating a PWA.

![The start new pwa button can be found in the bottom left](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/start-new-pwa.png)

 * [4] Enter your repository name when prompted, this is normally the name of your app.
 * [5] Your PWA will be generated using the Starter and all of your dependencies will be installed!
 * [6] At this point, you are now ready to start coding! Click `F5` or Click `Run` and `Start Debugging` at the top of VSCode. Your new PWA will now open in dev mode, with auto-reload, in its own App window. Enabling you to build your PWA in an app-first manner.

![Your new app will open in its own app window!](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/new-app.png)

---

## Under the Hood

### PWA Starter

![The PWA Starter Github homepage](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/pwa-starter.png)

[The PWA Starter](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/pwa-starter) is a code template, similar to what tools like create-react-app or the Angular CLI can generate.

With the PWA Starter, you get an app that:
- Has no build system to set up and no boilerplate code to add. Everything is included out of the box.
- Has a Service Worker system using [Workbox](https://aka.ms/learn-PWA/30Days-3.1/developers.google.com/web/tools/workbox)
- Scores close to 100 on Lighthouse, out of the box
- Uses the [Fluent Web Components](https://aka.ms/learn-PWA/30Days-3.1/docs.microsoft.com/en-us/fluent-ui/web-components), you can build native looking PWAs on Windows
- Has everything needed to be installable in the browser
- Is ready to be packaged for the app stores using [PWABuilder](https://aka.ms/learn-PWA/30Days-3.1/www.pwabuilder.com)


### PWA Studio

![The PWA Studio extension running in VSCode](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/pwa-studio.png)

PWA Studio is an extension that brings everything you need to build PWAs to [VSCode](https://aka.ms/learn-PWA/30Days-3.1/code.visualstudio.com). When you [install PWA Studio](https://aka.ms/learn-PWA/30Days-3.1/pwa-studio), you can:
-	Start building a new PWA in seconds using the PWABuilder pwa-starter.
-	Learn how to publish your app to the Web with [Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/)
-	Add a Web App Manifest and Service Worker to your existing web app
-	Package your PWA for the Microsoft Store, Google Play, and Apple App Store
-	Generate Icons for your PWA
-	Validate that your PWA is installable in the browser and is ready to publish to the app stores
-	Learn more about using the Web App Manifest to enable new features in your PWA
-	Use the snippets to implement native features that can improve the User Experience of your PWA.

And that was how we use the new PWA Studio VSCode Extension and the PWA Starter to start building a PWA with just a few button clicks!

In tomorrow's post, we'll dive into converting our existing website to a PWA!

---

## Resources

- [PWABuilder Project](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/PWABuilder)
- [Install PWA Studio](https://aka.ms/learn-PWA/30Days-3.1/pwa-studio)
- [The PWA Starter](https://aka.ms/learn-PWA/30Days-3.1/github.com/pwa-builder/pwa-starter)
- [VSCode](https://aka.ms/learn-PWA/30Days-3.1/code.visualstudio.com)
- [Fluent Web Components](https://aka.ms/learn-PWA/30Days-3.1/docs.microsoft.com/en-us/fluent-ui/web-components)
- [Workbox](https://aka.ms/learn-PWA/30Days-3.1/developers.google.com/web/tools/workbox)

---

Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to:

{% org azure %}

---