Magento has published an open-source storefront application called PWA-Studio. It helps to set up a development environment and also provides many pre-build libraries to build your own storefront components and extensions.
A Progressive Web App (PWA) is a web application that uses service workers, manifest, and other web-platform features to give the user a native app-like experience. PWA-Studio is an open-source application built on ReactJs library and the backend is Magento. The base application is using tailwindcss v2.
PWA-Studio is mainly used to build an e-commerce applications with Magento Backend. It has the following supports to build a customized e-commerce application by leveraging graphql query.
Let's see how PWA-Studio works -
|Backend||Magento graphql REST API, which is deployed on Shared Cloud Server|
React application build over
PWA-Studio is using the following libraries to build the application -
https://github.com/magento/pwa-studio (branch - develop)
git clone https://github.com/magento/pwa-studio.git
Run the following command to run the application. (Option 1)
Create SSL (https) domain - yarn run buildpack create-custom-origin .
Development - yarn run watch
Build (production) - yarn run build
Deploy from dist – yarn start
Run the following command to set up the .env file first. (Option 2)
(Custom origin creation can be done inside project as well)
Create .env file - yarn run buildpack create-env-file .
Validate .env file - yarn run buildpack load-env .
If you have any error in Magento backend URL configuration or other parameters, it will show the error in terminal.
Now, run the application on your web browser –
Create Custom origin – yarn run buildpack create-custom-origin packages/venia-concept/
Development with only targeted option (i.e venia) - yarn run watch:venia
Watch all (hot reload happens if changes are made) - yarn run watch:all
Production build - yarn run build
Deployment & run from dist
Modify package.json file –
“start": "buildpack serve ./packages/venia-concept"
Run – yarn run start
Some useful links to start developing PWA-Studio application -
Sample Demo Application available for demonstration and capability
Well, that's it for the project setup, let me know if you are facing any challenges while setting up the scaffolding PWA Studio application.