PWA development server
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 adds an optimized PWA development server to a Webpack configuration object.
The dev server 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.
The dev server acts as a proxy server for API and media requests to Magento. It is configured using environment variables.
MAGENTO_BACKEND_URL 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 dev server adds verbose debugging information to error pages to help with development.
The following dev server features are optional and are available on the initial run and confirmed on subsequent runs.
They are configured in the
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 dev server provides a GraphQL Playground IDE to debug the GraphQL queries in the project.
SSL certificate configuration#
The dev server creates and cache a 'self-signed' SSL certificate that allow the use of HTTPS-only features during development.
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.