How to create or configure an E-Commerce application using Magento PWA-Studio
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.
What is Magento PWA-Studio?
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.
- Connect with Magento (backend)
- PWA support (mobile installable)
- Responsive CSS using tailwind v2
- Modify UI & Business logic by extending prebuild Magento library
- peregrine
- pagebuilder
- venia-ui
Let's see how PWA-Studio works -
| Backend |
Magento graphql REST API, which is deployed on Shared Cloud Server |
| Local Environment |
- Storefront files
- Buildpack CLI (only for PWA-Studio)
- UPWARD-JS server
|
| Build |
React application build over
- Venia UI component
- Peregrine Hooks
- Custom Hooks
|
| Render |
Application render
- Service Worker
- Application cache
|
PWA buildpack is a CLI tool that is used to build the application. Like - buildpack serve
It contains a collection of useful components and custom React hooks for a Magento PWA. All of your application business logic should reside here.
The Venia package contains a proof of concept of Magento 2 storefront built using the PWA Studio tools. It also provides visual components as an example, which can be reused as per needs.
A specification for a file that determines the behavior of the application server. The project provides UPWARD-JS, which is a JavaScript implementation of an UPWARD server.
Tools and Libraries:
PWA-Studio is using the following libraries to build the application -
- React
- A vastly used javascript library
- Hooks
- React 16 onwards, hooks are being introduced. PWA studio code is using a functional component with pre-defined and custom hooks rapidly.
- Context
- React Context is part of pre-defined hooks, which are used to share data across components.
- Redux
- Redux is a JavaScript library used for managing the state of a web application.
- GraphQL
- GraphQL is a specification for a data query language on the client side and a service layer on the server-side. It is often seen as an alternative to using REST endpoints.
- Webpack
- webpack is a configuration-driven asset bundler and optimizer for JavaScript applications.
- Workbox
- Google’s Workbox library provides modules that make it easy to work with service workers. It is useful for boosting performance by controlling cache behavior and enables offline mode, which is a requirement for any Progressive Web Application.
How to set up Adobe PWA-Studio for local development
Step 1: Project Setup
- Option 1: Either it can be set up by running the following command
npx @magento/create-pwa
yarn install
- Option 2: Clone the application from GitHub (Recommended)
Step 2: Execute and run the application on Browser
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
Tutorials and Demo application
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.
Happy Coding!
Loading comments...