Profile Picture

Lazy Panda

Developer

Posts
56
Comments
48
Likes
76
Posts
56
Comments
48
Likes
76
sidebar

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. 

React pwa studio project setup and execution

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)

https://github.com/magento/pwa-studio (branch - develop)

git clone https://github.com/magento/pwa-studio.git

yarn install

 

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!