How to Setup Magento 2 PWA Studio • Dev Hooks • devhooks.in

In this article we'll teach you how to install Magento 2 PWA Studio in localhost. Before we start installation process let's see What is Magento 2 PWA Studio?

Progressive Web Application (PWA) is a next-generation web technology standard which delivers app-like shopping experiences via mobile and desktop devices. Using PWA Studio, merchants can build their own high performance PWA headless solutions, which is proven to increase user engagement, boost conversion rates, and diversify revenue streams.

Let's get started !!

Before we start I assume, you have already installed Magento 2.4.* later, Nodejs and Yarn. If you don't have it or don't know how to install it then check out our other article How to Install and Remove nodejs from Ubuntu.

Once you installed Nodejs run below commnd for install yarn

saveCopyzoom_out_mapsudo npm install --global yarn

To check nodejs and yarn version run below commands

saveCopyzoom_out_mapnodejs -v
yarn -v

Note: Make sure nodejs and yarn version as following.

NodeJS >=10.14.1 LTS

Yarn >=1.13.0

Now, Let's install Magento 2 PWA Studio !!

To Install Magento PWA Studio Please follow bellow simple steps.

If you are looking for an easiest way for install PWA Studio then we've another artice which is Easiest Way to Install Magento 2 PWA Studio.

Step 1. Clone Magento pwa-studio repository.

Open your terminal and go to the folder where you want to install Magento PWA Studio and run below command to clone Magento pwa-studio repository.

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

As, we have already added cd pwa-studio command in above command, so currently we are in pwa-studio folder. Now run the below command to install all pwa-studio dependencies.

Step 2. Install PWA Studio dependencies

saveCopyzoom_out_mapyarn install

Step 3. Change Magento backend URL

Once all dependencies are installed let's move to the packages/venia-concept folder and open .env file for change Magento backend URL.

saveCopyzoom_out_mapcd packages/venia-concept

saveCopyzoom_out_mapnano .env

Once you open this file, you should see something like below. Now find MAGENTO_BACKEND_URL and replace your Magento URL with https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/.

saveCopyzoom_out_map#### Connecting to a Magento store #############################################
#
#   Connect to an instance of Magento 2.3 by specifying its public domain name.
MAGENTO_BACKEND_URL=https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/
#
################################################################################

Note Make sure your magento should be run with https

Step 4. Create PWA build

Now, go back to pwa-studio directory and run below command to create build for PWA.

saveCopyzoom_out_mapyarn build

Above command will generate a folder under pwa-studio/packages/venia-concept/dist. Inside this folder you will find all the required files to run venia-concept including the UPWARD specification, JS and HTML files.

Step 5. Run PWA Studio in development mode

All basic setup are done. Now, finally we are going to run pwa-studio in a development mode.

saveCopyzoom_out_mapyarn run watch

Once command run successfully you'll see somthing like below result.

saveCopyzoom_out_mapPWADevServer ready at http://0.0.0.0:10000/
GraphQL Playground ready at http://0.0.0.0:10000/graphiql

Bingo!!

Finally we did it. To run PWA you need to open URL which will shown like above in your result.

Other Configurations Changes Just for your knowledge

Almost PWA Studio setups are done. But in some cases, most of the developer wants to change HOST NAME and PORT for some reason. So, if you are also one of them then follow the below steps.

First of all you need to move at packages/venia-concept folder and open .env file and find DEV_SERVER_HOST and you'll see below result.

saveCopyzoom_out_map#### Development server ########################################################
#
#   Specify the hostname the dev server should bind to. If this is set, it 
#   overrides the host chosen by custom origin settings.
#   - Default when not set: 
#DEV_SERVER_HOST=
#
#   Specify the port the dev server should bind to. If this is set, it 
#   overrides the port chosen by custom origin settings.
#   - Default when not set: 0
#DEV_SERVER_PORT=
#

Now, remove # and add your HOST and PORT like below example and save the file.

saveCopyzoom_out_mapDEV_SERVER_HOST=yourdomain.com

DEV_SERVER_PORT=3000

Once your changes are done run below commands.

saveCopyzoom_out_mapyarn build

saveCopyzoom_out_mapyarn run watch

Note If you want to change host in your local ubuntu/mac pc then you need to create a site config file in apache/nginx sites-available folder and set reverse proxy for port forwarding. Check this for your refrence

Other Refrence URL:

That’s it!

I hope this Magento PWA installation guide helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other handy commands which are not included in the list.

P.S. Do share this note with your team.