How to Install PWA Studio in Magento 2

By vijayrami

Thursday, April 28, 2022

Share :

Tweet

Magento2, Magento2 PWA,

Before you can start developing with PWA Studio, make sure you meet the following requirements.

Edit php.ini files to match the required PHP settings:

memory_limit = 2G
max_execution_time = 1800
zlib.output_compression = On

Execute the following command to restart the php service.

sudo service apache2 restart

Check Node and Yarn versions

check node version by:

node -v

If not display then run below command to install nodejs:

sudo apt install nodejs

sudo apt install npm

install yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt update && sudo apt install yarn

Install Magento

Install Magento in seprate folder (other than Magento PWA studio installation folder) and make proper host entry.

You can install magento with below Official link:

Quick start install - Adobe Commerce Developer Guide

Navigate to the Project root directory where you want to install Magento (/var/www/html) or (/opt/lampp/htdocs)

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition=2.4.3-p2 magento2pwabackend

After that go into the Magento installation directory:

cd magento2pwabackend

And Run Below Command: 

php bin/magento setup:install --base-url="http://magento.local/" 
	--db-host="127.0.0.1" 
	--db-name="yourdbname" 
	--db-user="root" 
	--db-password="" 
	--admin-firstname="vijay" 
	--admin-lastname="rami" 
	--admin-email="vijay.rami@******.com" 
	--admin-user="admin" 
	--admin-password="admin123" 
	--language="en_US" 
	--currency="USD" 
	--timezone="America/Chicago" 
	--use-rewrites="1" 
	--backend-frontname="admin"

Now add proper Host Entry for your Magento Installed Project.

Step 1: copy default config file.

Run from command line:: 

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/magento2.conf

Now you can open magento2.conf file using nano command.

sudo nano /etc/apache2/sites-available/magento2.conf

Step 2: add below code on new file magento2.conf

<VirtualHost *:80>
    ServerName magento.local
    DocumentRoot "/var/www/html/magento2pwabackend"
    <Directory "/var/www/html/magento2pwabackend">
        AllowOverride All
        Order Allow,Deny
        Allow from all
    </Directory>
    ErrorLog "/var/log/apache2/magento2_error.log"
    CustomLog "/var/log/apache2/magento2_access.log" combined 
</VirtualHost>

Step 3: Enable virtual host configuration files

From command line: 

sudo a2ensite magento2.conf

Step 4: start apache service

From command line:

sudo service apache2 restart

Step 5: add host entry

From command line: 

sudo nano /etc/hosts

add below line in hosts file

127.0.0.1 magento2.local

Step 6:

upade below url for `base_url` configuration on value column of core_config_data.

http://magento2.local/

Step 7: go to var/www/html/magento2 & run below commands,

sudo chmod -R 0777 var pub generated
sudo php bin/magento c:f

Install PWA Studio

Install Magento PWA studio by running the scaffolding tool

https://developer.adobe.com/commerce/pwa-studio/tutorials/setup-storefront/

Navigate to the directory where you want to install your storefront project (/var/www/html) or (/opt/lampp/htdoc)

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

This Command will install Magento PWA studio code inside pwa-studio folder.

You can rename this folder and give it another name. (magento2pwastudio)

Now Run the scaffolding tool and install Magento2 PWA necessary basic setup:

Go to /var/www/html or root directory where you want to install your PWA storefront project and run below command:

yarn create @magento/pwa

This command will ask for some basic settings to configure the PWA studio and Venia theme settings.

If will ask something like below:

Creating a PWA Studio project
? Project root directory (will be created if it does not exist) magento2pwastudio (give the same folder name in which you clone the pwa-studio from git)
? Short name of the project to put in the package.json "name" field magento2pwastudio
? Name of the author to put in the package.json "author" field Vijay Rami <vijay.rami@borngroup.com>
? Which template would you like to use to bootstrap magento2pwastudio? Defaults to "@magento/venia-concept". @magento/venia-concept
? Magento instance to use as a backend (will be added to `.env` file) Other
? URL of a Magento instance to use as a backend (will be added to `.env` file) http://magento.local/
? Edition of the magento store (Enterprise Edition or Community Edition) CE
? Braintree API token to use to communicate with your Braintree instance (will be added to `.env` file) sandbox_8yrzsvtm_s2bg8fs563crhqzk
? NPM package management client to use yarn
? Install package dependencies with yarn after creating project Yes

After the scaffolding command completes, navigate to your project's root directory:

cd magento2pwastudio

Now Run below command:

yarn buildpack create-custom-origin ./

yarn watch

Now when you run yarn watch it will throw you an error.

Here It is showing an Error because we set up our Magento Backend Seprately. 

And in that setup you also need to install PWA related extension.

Note:  you can modify MAGENTO_BACKEND_URL of your PWA setup from .env file which is located inside your PWA setup directory. (/var/www/html/magento2pwastudio)

Now Navigate to the Magento2 PWA backend directory where you install Magento Seprately.

cd magento2pwabackend

Now follow Below steps:

Step 1. Create an ext directory within the root of your magento2 project

mkdir ext

Step 2. Create magento directory folder and clone the magento2-pwa repository into your ext/magento directory name:

cd ext/magento/
git clone https://github.com/magento/magento2-pwa.git
chmod -R 0777 magento2-pwa/

Step 3. Update the magento2pwabackend/composer.json settings to create a better development workflow for your extension modules:

Update the minimum-stability for packages to dev. This allows for the installation of development modules:

Now go to the root directory of your magento2 installed project (/var/www/html/magento2pwabackend)

composer config minimum-stability dev

To work with stable packages, ensure that the prefer-stable property is true. This property should already be included in the composer.json file, right above the minimum-stability setting.

Configure composer to find new extension modules. The following command configures composer to treat any extension code inside the ext directory as a package and creates a symlink to the vendor directory:

composer config repositories.ext path "./ext/*/*/*"

Install the pwa metapackage:

composer require magento/pwa

Note: 

***  Sometimes you need to update auth.json file and provide necessary key for `repo.magento.com` and `github.com`

cp auth.json.sample auth.json

Edit `auth.json` file as per below content:

{
    "http-basic": {
        "repo.magento.com": {
            "username": "public_key",
            "password": "private_key"
        },
        "github.com": {
            "username": "user_name",
            "password": "token"
        }
    }
}

Now Run all Magento Commands from the Root of your Magento2 Backend Project folder. (/var/www/html/magento2pwabackend)

-- Now run yarn watch in Magentopwa setup folder.

cd /var/www/html/magento2pwastudio

yarn watch

It will run without any error.

Also you can install sample data in your Magento2 Project with Below Command:

cd /var/www/html/magento2pwabackend/
php bin/magento sampledata:deploy

After that Run All Magento Commands.

Now In your PWA Setup folder run `yarn watch` again to see sample data in PWA setup storefront.

cd /var/www/html/magento2pwastudio/
yarn watch

This way you have a separate set up for Magento Backend and PWA storefront.

Now you can start making GraphQL APIs to interact with your frontend and backend.

Tag : Magento2, Magento2 PWA