Tutorials

Transform a create-react-app app to a PWA

While the Extension can work with any Web app, this is a walkthrough specific to a React app created with the create-react-app CLI. This same workflow should work with any app type or framework.

Validate

• After generating your app with the create-react-app CLI, open your app in VSCode
• Tap the PWABuilder Icon on the left side of VSCode
• Check the status of your app. For a default create-react-app app, it will look something like this:

As you can see, this shows that we have a Web Manifest, but not a Service Worker. Let's now add one.

Add a Service Worker

• Tap the Generate Service Worker button in the Service Worker panel
• This will generate a Service Worker, for more info on this step check our documentation
• For our create-react-app app, the last step will be to change the Service Worker register code in your index.html to match the conventions of create-react-app. Modify that code to the following:

With your Service Worker added, your React app is now a PWA! Check our docs here on how to publish your PWA to the web with Azure Static Web Apps! Once your ready, you can also ship your PWA to the App Stores! Check here to learn how.

Vue, Angular etc

For apps written in other frameworks, the above steps will be the same except for the Service Worker register link. We recommend following the standard build setup for your chosen framework.