How to Setup Magento 2 PWA Studio

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 PWA studio Magento 2?

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

Copy
sudo npm install --global yarn

To check nodejs and yarn version run below commands

Copy
nodejs -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.

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.

Copy
git 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

Copy
yarn 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.

Copy
cd packages/venia-concept
Copy
nano .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/.

Copy
#### 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.

Copy
yarn 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.

Copy
yarn run watch:venia

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

Copy
PWADevServer 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.

Copy
#### 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.

Copy
DEV_SERVER_HOST=yourdomain.com

DEV_SERVER_PORT=3000

Once your changes are done run below commands.

Copy
yarn build
yarn run watch:venia

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.




Search
Recent Posts
    Tags
    Newsletter
    SocialFollow on Twitter