If you are developing a new storefront, the PWA Studio fundamentals tutorial series provides an introduction to the different tools and features of PWA Studio.
If you want to learn about the technologies and concepts behind PWA Studio, the Getting Started section of this site provides background information about this project.
If you are interested in looking at the project source or contributing to the project, check out the project repository.
Yes, PWA Studio provides tools that support both server-side and client-side rendering strategies. For more information on content rendering support, see the Content Rendering topic.
Community members have also suggested the following tools and services to address SEO and SSR needs:
The Tutorials section of this site contains a number of tutorials which cover customizations such as:
- How to add a static route
- How to modify the site footer
- How to use component props
- How to use CSS modules
Yes, there are a few! The community-created PWA Studio Stats site lists some of these storefronts that are built using PWA Studio technologies.
PWA Studio supports Braintree payments out of the box in its Venia storefront implementation. The project also supports adding other payment methods to a storefront project, but it requires additional implementation for the storefront developer.
A PWA Studio storefront uses an UPWARD server as the backend for the frontend code. Magento provides two different UPWARD server implementations, UPWARD-JS and UPWARD-PHP.
UPWARD-JS is a node implementation of an UPWARD server. It is used during storefront development when you use the yarn watch
command, but you can use it for production by calling yarn build
to generate production assets and yarn start
to start a server
UPWARD-PHP is a PHP implementation of an UPWARD server. It is a dependency of the Magento 2 UPWARD connector module, which lets you run an UPWARD server on the same machine as your Magento 2 instance. See the Magento Cloud deployment tutorial to learn how to deploy your storefront on the Magento Cloud.
Developing with PWA Studio in Windows is not supported because of its incompatibility with some of the project’s dependencies.
Currently, the PWA Studio core team does not have the bandwidth to develop and maintain a Windows development solution, but community members have suggested the following workarounds:
- Using Docker to spin up a Linux environment
- Using the Windows Subsystem for Linux
To let the storefront query a specific store view in Magento you need to add the store code to these two files:
-
packages/peregrine/lib/Router/resolveUnknownRoute.js
- Add
Store: YOUR_STORE_CODE
-
packages/venia-ui/lib/drivers/adapter.js
- Add
headers:{ Store: YOUR_STORE_CODE }
When you use the <Image/>
component from venia-ui
, change the following values:
-
packages/venia-ui/lib/util/images.js
- Change
DEFAULT_WIDTH_TO_HEIGHT_RATIO
to match your image ratio.
- Change the values in the
imageWidths
mapping to better fit your dimensions.
-
packages/venia-ui/lib/components/gallery/item.js
- Supply the
<Image />
component with a widths
prop as shown in the GalleryItem component defined in the linked file.
Note: For testing, resize the viewport manually instead of using the native device emulator in Chrome, which gives incorrect values.