iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Magento PWA Studio is Adobe’s set of developer tools and libraries for building a Progressive Web Application (PWA) storefront that connects to Adobe Commerce or Magento Open Source. The storefront is a separate frontend application. It does not reuse the backend’s theme files, layout files or scripts. Instead, it requests catalog, cart and customer data from the backend through GraphQL and REST services.
Installing PWA Studio does not convert an existing Magento theme into a PWA, and it does not guarantee faster performance. What it gives you is a starter storefront called Venia that you can run locally and customize, along with a set of hosting decisions to make before launch.
What Magento PWA Studio is and is not
A toolkit, not a hosted storefront
PWA Studio is a collection of tools and libraries for setting up a development environment and building storefront components and extensions. You host, build and deploy the result yourself. The toolkit does not provide a ready-made store that Adobe runs for you.
A decoupled frontend
In a conventional Magento store, the presentation layer lives inside the commerce application as a theme. In a PWA Studio project, the storefront is its own application and owns rendering. It talks to the backend over services. That separation lets frontend and backend work proceed independently, but the backend still supplies the data and business logic, including products, pricing, checkout and customer accounts.
#1 Best Overall
What “PWA” means in this context
A progressive web app is a website built with modern web techniques to deliver a reliable, fast and engaging experience. Adobe’s PWA Studio overview lists the characteristics the approach aims for: HTTPS, responsive design, browser compatibility, offline caching, installation on mobile devices and shareable URLs. These are properties of the approach, not automatic results of creating a project. You get them only as you build, configure and deploy the storefront.
The four packages you will encounter
Adobe documents PWA Studio as a set of packages with distinct roles. The table below summarizes them.
| Package | Role |
|---|---|
| Buildpack | Build and project configuration tools |
| Venia UI | Rendering components |
| Peregrine | Hooks and logic shared by the storefront |
| Venia Concept | Starter storefront built on the other packages, which you can customize |
Requirements before you start
- React familiarity. Adobe’s prerequisites page lists it as a requirement.
- Node.js 18 or later. This is the minimum stated on Adobe’s prerequisites page. The same page also refers to Node LTS versions “currently v16 and v18,” so confirm the Node version for the release you install.
- Yarn or npm. Adobe recommends Yarn. Yarn v2 is not supported.
- JavaScript. Adobe’s External tools and libraries guide states: “JavaScript is the primary language used in the PWA Studio project, and knowing how to develop with it is necessary for using PWA Studio in your own projects.” PHP may also be needed for heavy backend customization.
- Operating system. Adobe’s FAQ says Windows development is unsupported because of dependency incompatibilities. Docker and WSL are community workarounds, not Adobe-supported configurations.
Package versions are independent of one another. Check the requirements and tutorial for the exact release you plan to install rather than relying on any single version number from this article.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Build your first local project
Adobe’s setup tutorial scaffolds a storefront based on Venia. Run the following steps in a terminal with the prerequisites above installed.
-
Create the project scaffold:
yarn create @magento/pwaThe scaffold asks setup questions and creates the minimum project files for the Venia storefront.
-
Enter the project folder. The tutorial uses
pwa-studio-fundamentals, so substitute the folder name you chose if it differs:cd pwa-studio-fundamentals -
Create a custom local origin with an SSL certificate:
Free tools Windows power users keep installed
One-click scans. No signup required.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.yarn buildpack create-custom-origin ./The tutorial needs HTTPS for the local setup because service workers and push notifications require it. This step creates a custom hostname and certificate for that purpose.
-
Start the development server:
yarn watch
Command names and prerequisites can change between releases. Use the tutorial for your selected version as the authoritative reference.
Rank #4
Connect the storefront to your backend
The storefront needs a running Adobe Commerce or Magento Open Source instance to supply data. The project environment can include MAGENTO_BACKEND_URL, which tells the development server where the backend is.
If the storefront loads but catalog or other Magento data does not appear, check the following:
Recommended Free Tools
- Open the
.envfile and confirm thatMAGENTO_BACKEND_URLpoints to your backend. - Confirm that the development server can reach that URL from your machine.
- If your backend has several store views, check the store-code configuration. Adobe’s FAQ notes that store-view selection can depend on it.
Production deployment depends on your host
Adobe documents two production routes. Which one you use depends on whether your hosting environment supports Node processes for serving the storefront.
Generic Node-capable host (UPWARD-JS)
Adobe’s production checklist describes this route. It uses UPWARD-JS, a server that runs as a Node process.
- Set production environment variables. The checklist names
NODE_ENV,MAGENTO_BACKEND_URLandCHECKOUT_BRAINTREE_TOKENas important settings in the setup it describes. - Create a production build:
yarn build - Start the production UPWARD-JS server:
yarn start
Adobe Commerce Cloud (UPWARD-PHP)
Commerce Cloud does not support Node processes for serving the storefront on this route. Adobe’s tutorial therefore uses the Magento UPWARD connector and UPWARD-PHP. Before you deploy, verify that your Commerce instance is compatible with your PWA Studio version. The tutorial also covers Commerce modules, environment variables, build output and deployment steps. Because these steps are specific to the Cloud route, follow Adobe’s current Cloud documentation rather than the generic checklist.
Quick Recap
Comparing the two routes
| Factor | Generic Node-capable host | Adobe Commerce Cloud |
|---|---|---|
| Server that renders the storefront | UPWARD-JS, running as a Node process | UPWARD-PHP, through the Magento UPWARD connector |
| Build and start commands | yarn build then yarn start |
Build and deployment steps in Adobe’s Cloud tutorial; the commands are not stated in this guide |
| Pre-deployment check | Production environment variables and backend access | Compatibility between the Commerce instance and the PWA Studio version |
Limits to plan for
- Payments. Venia includes Braintree payments out of the box. Other payment methods require additional storefront implementation.
- Version-sensitive setup. Requirements, package versions and deployment instructions change. Check Adobe’s documentation for the release you intend to deploy before you start a project.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
