PWA

Setup PWA Studio with Magento 2

Magento Progressive Web Apps (PWA) provides a mobile application experience to users with so many development tools and React components. It provides fast and reliable performance to users. PWA is compatible with Magento 2.3 and above versions.

Install Venia sample data in Magento 2

In case, you want to install venia sample data in your Magento 2 instance, we prefer to install Magento 2 development instance without the sample data module. Please perform the steps of Venia Sample Data installation from here.

Pre-requirments for PWA Setup:
  • Magento 2.3.x or above
  • Node >= 10.14.1 LTS
  • Yarn >= 1.13.0
Installation Steps

Step 1: Clone PWA Studio to /var/www/html/<new-dir>

git clone https://github.com/magento/pwa-studio.git <new-dir>
cd <new-dir>

Step 2: Take checkout of latest branch

git checkout v10.0.0

Step 3: Install composer dependecies

yarn install

Step 4: Create a new package using the following scaffolding tool

yarn create @magento/pwa

It would ask few questions regarding the new package, answer them as follows:

Project root directory (will be created if it does not exist) pakcages/test-concept
For example, we are creating a package named ‘test-concept’. You should enter path like ‘packages/test-concept’.

Short name of the project to put in the package.json “name” field test-concept
Enter the name of your package.

Name of the author to put in the package.json “author” field Mage2 Developer <mage2developer@gmail.com>
Enter the name of author in the format: {author_name} <{author_email}> as per above example.

Which template would you like to use to bootstrap test-concept? Defaults to “@magento/venia-concept”. @magento/venia-concept
Enter the parent package name from which your package should be inherited.

Magento instance to use as a backend (will be added to `.env` file) Other
You can select Other (I will provide my own backing Magento instance) to set up your own Magento instance.

URL of a Magento instance to use as a backend (will be added to `.env` file) http://local.ee242.com/
Enter your Magento instance URL.

Braintree API token to use to communicate with your Braintree instance (will be added to `.env` file) sandbox_8yrzsvtm_s2bg8fs563crhqzk
Press Enter.

NPM package management client to use yarn
Select yarn option.

Install package dependencies with yarn after creating project Yes
Select Yes option to continue package dependencies installation process.

It would take few minutes to install package dependencies. Run the following commands to add a custom hostname and SSL cert for your custom package.

MAGENTO_BACKEND_URL="http://localhost/ce234sample/" CHECKOUT_BRAINTREE_TOKEN="sandbox_8yrzsvtm_s2bg8fs563crhqzk" yarn buildpack create-custom-origin packages/test-concept

MAGENTO_BACKEND_URL="http://localhost/ce234sample/" CHECKOUT_BRAINTREE_TOKEN="sandbox_8yrzsvtm_s2bg8fs563crhqzk" yarn buildpack create-env-file packages/test-concept

You can change Magento instance backend URL manually from the following file:
packages/<new_package_name>/.env
i.e. packages/example-concept/.env

MAGENTO_BACKEND_URL=http://local.ee242.com/

Step 5: Run Venia Storefront
Run the following commands to start the PWA storefront:

yarn build
yarn watch

Run the following command to start PWA storefront for all themes:

yarn watch:all

Run the following command to start PWA storefront for venia theme:

yarn watch:venia

That’s it!. The scaffolding tool would generate a directory structure to run the Venia storefront. Venia Storefront is a default built-in storefront developed by PWA. To customize the storefront as per your requirement, you need to create a custom package that inherits the theme from the Venia storefront. By following the above steps you have created a custom package, now you need to make the following configuration to run Custom Package storefront.

Setup Custom Package

To start the PWA storefront for your custom package, you need to add the following code in <pwa-root-directory>/package.json file.

{
  	"name": "@magento/pwa-studio",
  	"version": "10.0.0",
  	"private": true,
  	"workspaces": [
    	...,
    	"packages/example-concept"
  	],
  	...,
  	"scripts": {
  		...,
  		"example-concept": "node ./packages/pwa-buildpack/bin/buildpack load-env ./packages/example-concept && yarn workspace example-concept",
    	"watch:example": "yarn example-concept run build && yarn example-concept run watch"
  	},
  	...
 }

Now you can run your custom package with the following command:

yarn watch:example

This command would take few seconds to complete the process and it would have output with a URL as shown in the following screenshot, you need to open that URL in your browser.

Here you go! You can see your PWA storefront with a custom package like the following screenshot.

We hope this blog may understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂