How to Install Magento2 Mobikul PWA

Note: Mobikul PWA will work only with the PWA-Studii ver 3.0.0

clone pwa-studio repository

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

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

I have cloned this repository in magento root directory ex: /var/www/html/mage0

You will see the pwa-studio directory in /var/www/html/mage0.
Enter into this directory:

 cd pwa-studio/

Run:

yarn install

Specify the Magento backend server in .env file. you can see the .env.dist file in
/var/www/html/mage0/pwa-studio/packages/venia-concept/ directory. If you are not able to see, enable show hidden files. Now create .env file from this env.dist

cp packages/venia-concept/.env.dist packages/venia-concept/.env

Open this .env file and find MAGENTO_BACKEND_URL. Here configure your
local Magento 2.3 instance, my case it is:

MAGENTO_BACKEND_URL="https://magento2-pwa.com/"

7.1 Generate SSL certificate because PWA features require an HTTPS Secure Domain. From the root directory of PWA (/pwa-studio) run below command:

yarn buildpack create-custom-origin packages/venia-concept

Note: 7.1 Feature requires administrative access.

• Now let install sample data for venia-theme to make it good looking.()
• Find the deployVeniaSampleData.sh file in
  /var/www/html/mage0/pwa-studio/packages/venia-concept/ directory. and copy this
  file in your Magento root directory. Now it must look like
  /var/www/html/mage0/deployVeniaSampleData.sh Now run:

bash deployVeniaSampleData.sh

Note: if you don’t want to install the sample data then skip above step

After successful installation run:

• bin/magento setup:upgrade
• bin/magento indexer:reindex
• bin/magento cache:flush

Open your Magento instance, you will be able to see the installed sample data like:
pwa-sample-data

Now go back to pwa-studio directory /var/www/html/mage0/pwa-studio and
start Server.

yarn run build

The above command may give the permission error, for that run the above command with sudo.

sudo yarn run build

Run server, Use any of the following commands from the project root directory to start
the server:

• yarn run watch:venia
• yarn run watch:all
• yarn run build && yarn run stage:venia

The above commands may give the permission error, for that run the above command with sudo.

you can find more about above commands from Venia storefront setup

• Now browse the application, you will saw the application URL on terminal like:

PWADevServer ready at https://magento-venia.local.pwadev:8001

OR

Launching staging server…

https://magento-venia.local.pwadev:51828/
 
Staging server running at the address above

Note: You might get the issues that the product’s images are not loading on PWA.
To fix this issue, create a virtual host, as I have created https://magento2-pwa.com that must be pointing to your pub directory of Magento instance, not to the root directory of your Magento.

Congratulations! You have set up your development environment for the Venia theme project.

4. Now How to install the Magento Pwa :

Now move the "packages" folder (inside "pwa-studio" folder) into magento pwa-studio directory

Run the following command:

cp packages/mobikul/.env.dist packages/mobikul/.env 

and make an entry for Magento Host Url that has been put for venia-concept mentioned above steps while installing PWA studio.

Please enter the pub folder URL in the host URL to avoid image issue in PWA Studio
e.g pwa.com/pub here pwa.com is your Magento URL

Now enter the server key as well as message sender id in the .env file. in the following directory
“Your-Magento-Instance-Folder/PWA-studio/packages/mobikul” from firebase account for push notification

Example:
 ########## FireBase integration configuration  ######################
 #
 #   Set variables to control your FireBase integration.
 #
 #   Specify a FireBase message id to register the device
 MESSAGE_SENDER_ID=123456789
 #
 SERVER_KEY=qwertyuio
 ###############################################################################

Enter the following command in package.json under the pwa-studio folder.

under "workspace" key enter "packages/mobikul"

under "scripts" key enter the following command
 "watch:mobikul": "yarn workspace @magento/mobikul run watch; cd - >/dev/null",
 "stats:mobikul": "yarn workspace @magento/mobikul run build:analyze && yarn workspace @magento/mobikul run stats",
 "stage:mobikul": "yarn workspace @magento/mobikul run start; cd - >/dev/null"

 Note: Please make sure of commas while entering the command.         

9.) Now install the follwing packages by running the following command parallel to pwa-studio folder

yarn add @material-ui/core -W
yarn add @material-ui/icons -W
yarn add jquery -W
yarn add forever -g -W
yarn add firebase -W
yarn add qrcode.react -W
yarn add quagga -W
yarn add react-responsive-carousel -W
yarn add lottie-react-web -W
yarn add [email protected] -W
yarn add @material-ui/lab -W         

Note: Please run all commad with sudo permission.

now run the following command to run the new mobikul theme of PWA

 sudo yarn install
 sudo yarn run build
 sudo yarn run watch:mobikul

While running build command some time you get the issue of Parser.js file for that to replace the match function with given below code and run the build command again make sure pwa-studio have to write permission

File path:- pwa-studio/node_modules/@magento/directive-parser/src/Parser.js
 match(type, token = this.currentToken) {
     if (token === undefined) {
         return false;
     }
     return token.type === type;
 }