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.
PWADevServer creates an optimized
devServer for Magento API-backed PWA development.
devServer provides the following useful features:
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.
devServer acts as a proxy server for API and media requests to Magento.
It is configured using environment variables.
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
It can also disable that ServiceWorker when caching would interfere with realtime changes.
devServer adds verbose debugging information to error pages to help with development.
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
The custom hostname feature uses a local hostname for the current project.
This hostname must be created for the current project by running
GraphQL Playground IDE
devServer can be configured to provide a GraphQL Playground IDE to debug the GraphQL queries in the project.
SSL certificate configuration
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.
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
Browse to the
/graphiql path on your PWADevServer to use this feature.