If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

PWADevServer

A utility for configuring a development OS and a webpack-dev-server for PWA development.

A typical webpack local development environment uses the devServer settings in webpack.config.js to create a temporary, local HTTP server to show edits in real time.

Basic Features

PWADevServer creates an optimized devServer for Magento API-backed PWA development.

The devServer provides the following useful features:

Hot reload

The hot reload feature refreshes the page or a relevant subsection of the page whenever you save a change that affects it. It uses Webpack’s Hot Module Replacement feature to replace components and stylesheets inline.

Proxy server

The devServer acts as a proxy server for API and media requests to Magento. It is configured using environment variables.

The MAGENTO_BACKEND_DOMAIN environment variable configures the proxy server to accept GraphQL, REST, and media requests and passes them to Magento.

The proxy server also transforms host and referral headers to make them compatible with Magento settings.

Root level ServiceWorker

The devServer serves a JavaScript file at the root path that registers a ServiceWorker scoped to the whole website. It can also disable that ServiceWorker when caching would interfere with realtime changes.

Verbose debugging

The devServer adds verbose debugging information to error pages to help with development.

Optional Features

The following devServer features are optional and are available on the initial run and confirmed on subsequent runs. They are configured in the .env file, which the webpack.config.js file uses to source the configuration it passes to PWADevServer.configure().

Custom hostname

The custom hostname feature uses a local hostname for the current project. This hostname must be created for the current project by running buildpack create-custom-origin.

GraphQL Playground IDE

The devServer can be configured to provide a GraphQL Playground IDE to debug the GraphQL queries in the project.

SSL certificate configuration

The devServer can be configured to create and cache a ‘self-signed’ SSL certificate that allow the use of HTTPS-only features during development.

Note: Updating the OS security settings to trust the self-signed certificate requires elevated permissions, so you may be prompted for a password during the setup process.

Content transformation

The content transformation feature masks the Magento 2 domain name in all HTML attributes, replacing it with the development server domain name.

GraphQL Playground feature

GraphQL Playground is an enhanced version of the in-browser GraphQL debugging tool GraphiQL.

Enable this feature by setting the PWADevServerOptions.graphqlPlayground configuration option to true.

Browse to the /graphiql path on your PWADevServer to use this feature.