Reading list Switch to dark mode

    How to Setup and Install Magento 2 PWA Studio

    Updated 31 January 2023

    Let’s Learn how to set up PWA Studio Setup and Setup Venia Project on the Production Server

    Magento recently introduced PWA(Progressive Web App) Studio project in Magento 2.3 version.
    Magento PWA Studio is a suite of tools designed to empower developers to develop online stores as progressive web apps.

    What are Progressive Web Apps?

    The popularity of PWA is growing at very fast in the field of e-commerce, business,
    online news portal and other fields because of its peculiar characteristics listed
    below follows:
    1. Faster User Interface Support
    Web developers can now load an entire website to a browser after just one pageview even on slow networks.
    2. Home Screen Shortcut
    Mobile users can install the PWA site on their home screen like a Native App.
    3. Offline Support
    Implementation of service workers makes it able to work offline. The website can now be accessible even to users who lost internet connectivity. PWA sites cache content to ensure that some content can be served when a user is offline.
    4. Background Processes
    If the user facing poor connectivity or offline, the browser store all the form submission data and requests, When connectivity returns it re-sent all the data in the background.
    5. Secure
    PWA sites use HTTPS connections for enhanced security.

    Let’s back to setup PWA in Magento 2.

    PWA Studio project used modern tools and libraries:
    Webpack
    Webpack’s primary function is to create one or more bundles from the dependencies in your project’s modules.
    ReactJs
    A JavaScript library for building user interfaces.
    Redux
    A JavaScript library used for managing state in a web application.
    GraphQL
    A data query language on the client side and a service layer on the server side.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    PWA Installation 

    Let’s start with Magento 2.3 installation.

    Note: You must have a version of NodeJS >=10.14.1, and Yarn >=1.13.0. The latest LTS versions of both are recommended.

    1. Enter the following command:

    composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition /var/www/html/mage0

    /var/www/html/mage0 is a Magento installation directory.

    2. Install Magento by Command Line:

    php bin/magento setup:install --base-url=http://localhost/mage0 --db-host=localhost --db-name=mahesh_mage0 --db-user=root --db-password=webkul --admin-firstname=John --admin-lastname=Doe [email protected] --admin-user=admin --admin-password=admin123 --backend-frontname=admin_magento --language=en_US --currency=USD --timezone=Asia/Tbilisi --cleanup-database --use-rewrites=1

    When you have completed with Magento installation, Now

    3. Now clone the 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 the Magento root directory ex: /var/www/html/mage0

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

    cd pwa-studio/

    5. Run

    yarn install

    6. 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/ direcoty. If you are not
    able see, enable show hidden files. Now create .env file from this env.dist

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

    7. Open this .env file and find MAGENTO_BACKEND_URL. Here configure your
    local Magento 2.3 instance, in 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 the below command:

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

    Note: 7.1 Feature requires administrative access.

    8. Now let install sample data for venia-theme to make it good-looking.

    9. 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

    10. 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

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

    yarn run build

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

    sudo yarn run build

    12. 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 the above commands from the Venia storefront setup

    13. Now browse the application, you will the application URL on the terminal like:

    PWA Dev Server 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.

    Setup Venia Project on the Production Server

    Tested on version: @magento/pwa-buildpack v3.0.0

    Note: Make sure HTTPS is enabled for your domain.

    Let’s we have a domain https://mahesh.webkul.com we want to set up PWA on this server.

    Follow the same steps (as sudo user) as I have explain above.

    Enable a port on this server to run Node Server on this port ex (Port: 8724).

    1. Now edit pwa-studio/packages/venia-concept/.env file
    2. Find the Staging server Section.
    3. Remove #(remove comment) and add

    STAGING_SERVER_HOST=mahesh.webkul.com

    STAGING_SERVER_PORT=8724

    Let’s start staging the Venia server.

    sudo yarn run build && yarn run stage:venia

    You will see that the UPWARD server started, now you can access the URL

    http://mahesh.webkul.com:8724/

    PWA Studio Setup

    Thank you for reading the dev doc article on how Magento 2 PWA Studio setup. If you need any help, please reach out to our team via a support ticket.

    Find the complete range of Magento 2 extensions including PWA and Headless PWA.

    Current Product Version - pwa-buildpack v3.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    36 comments

  • Tushar
    working for me but until yarn run stage:venia run in terminal. once you close or exit terminal its stop working. how can I keep alive site ?
  • Иван Костюк
    Cool. It working for me!
  • Romain
    Hi,
    when i run “yarn buildpack create-custom-origin packages/venia-concept”
    i got this result:” error Command “buildpack” not found.”

    has somebody already meet this issue ?

    Thx

    • Mahesh Singh (Moderator)
      Hi Romain, Make sure you are running this command as a root user.
      • Romain
        i’m using root user
        • Mahesh Singh (Moderator)
          Romain, What’s the current version of @magento/pwa-studio you are trying to setup?
          • Romain
            3.0.0
            i made a git clone of https://github.com/magento/pwa-studio.git but it’s the develop branch
            So i made a git checkout to the master branch
          • Mahesh Singh (Moderator)
            Please share a screenshot of terminal with that error, i will look into this.
  • vishal katkar
    Hey,

    bash deployVeniaSampleData.sh

    above command throws below error

    [Composer\Downloader\TransportException]
    The ‘https://repo.magento.com/packages.json’ URL required authentication.
    You must be using the interactive console to authenticate

    • Mahesh Singh (Moderator)
      Hi Vishal, Make sure you have added your system’s or server ssh key on github account: https://prnt.sc/onib3i
      • vishal katkar
        Cool work’s for me,
        Thanks
  • Amit Sankhala
    Guys everything is working and URL is generated successfully. The generated URL is not working or loading on Front end.

    What additional settings required?

    Resources used,
    Magento 2.3.2
    node & yarn latest version
    SSL installed on server

    • Mahesh Singh (Moderator)
      Hello Amit, Could you please send screenshots of the issues?
      • Amit Sankhala
        Mahesh, Please check this.
        https://prnt.sc/oic1th
        • Mahesh Singh (Moderator)
          Amit, i have explained some steps to setup PWA studio on server, please follow the steps.
  • sakshi lakshkar
    Hi,

    When I run this command:- yarn run build && npm run stage:venia
    I get following error, but build is run successfully :-
    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets:
    js/client.js (411 KiB)
    js/vendor~client-44e0557f49cb4cedfacb.js (305 KiB)
    js/10-c42c77dd37dbff0743c3.js (327 KiB)

    WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can imp act web performance.
    Entrypoints:
    client (716 KiB)
    js/vendor~client-44e0557f49cb4cedfacb.js
    js/client.js

    Please let me know how to resolve this.
    my project is set with health365[.]local/ url and venia-concept/.env file has configuration below:-
    MAGENTO_BACKEND_URL= health365[.]local/”

    output of build stage is:-

    ℹ 「wdm」: wait until bundle finished:
    ℹ 「wds」: Project is running at magento-venia-concept-ofxov . local . pwadev:10000/
    ℹ 「wds」: webpack output is served from magento-venia-concept-ofxov. local . pwadev:10000/
    ℹ 「wdm」: Version: webpack 4.29.6
    Time: 4808ms
    Built at: 06/18/2019 3:45:16 PM
    ℹ 「wdm」: Compiled successfully.

    ┌─────────────────────────────────────────────────────────────────────────────────────────────────┐
    │ │
    │ PWADevServer ready at magento-venia-concept-ofxov[.]local.pwadev:10000/ │
    │ GraphQL Playground ready at magento-venia-concept-ofxov[.]local.pwadev:10000/graphiql

    • Mahesh Singh (Moderator)
      Sakshi, As i can see you are using npm to run venia project.

      Please use this command: yarn run build && yarn run stage:venia

      • Murali
        Hi Maheshm

        same issue for me but build successful.

        I can see below URL but it’s not opening browser. How can see the PWA website. Please help us.

        magento-venia-concept-vtych[.]local[.]pwadev:9786/

        Thanks,
        Murali

        • Mahesh Singh (Moderator)
          Hi Murali, Are you working on localhost? or are you configuring PWA on production server? Make sure you have configured .env file correctly.
          • Murali
            Hi Mahesh, I am not working on localhost. I am setting up the dev server (linux). I have domains also but its not working. How can i configure the .env file? If possible please share me the sample file.

            thanks,
            Murali

          • Mahesh Singh (Moderator)
            Murali,
            Check the step 6 to 7.1, in step 6, check .env file in pwa-studio/packages/venia-concept directory. if file not exists, then create a .env file from env.dist.
            Now see the step 7, find MAGENTO_BACKEND_URL which will be you Magento instance ex: mahesh[.]webkul[.]com/ or mahesh[.]webkul[.]com/demo3.
            Now Run step 7.1 step command from pwa root directory. Make sure you are using latest pwa-studio clone from git: @magento/pwa-buildpack v3.0.0

            Then read the Section: Setup Venia Project On Production Server, in that I have explained that you need to edit .env file accordingly.
            Make sure additional port is open on server which you giving in .env file

  • Milan Chauhan
    Magento 2.3.1, node 10.16.0, yarn 1.16.0, Ubuntu 18.04
    it is showing me Skipping upward-js build… & Skipping upward-spec build… on yarn run build command, is this an error or what?
    https://i.imgur.com/As3tFFs.png
  • Tri Huynh
    Thanks for you blog.
    Do you know any docker have setup environment for magento 2.3.1?
    Thanks
  • Joseph Reiner
    Thanks for your blog. I give error like this in step 11
    http://prntscr.com/nsp8qe
    I installed magento 2 on xampp windows 10
    • Mahesh Singh (Moderator)
      Make sure, you set the magento in developer mode.
      • Joseph Reiner
        http://prntscr.com/nspirh

        Still error 🙁

        • Mahesh Singh (Moderator)
          Joseph, this issue is with windows 10, as you can see here, fix is already done in this PR on git: https://github.com/magento-research/pwa-studio/pull/899 . It might be introduce in next update.
  • Jignesh Parmar
    it give error like thishttp://prntscr.com/mp0t9e
    • Mahesh Singh (Moderator)
      Hello Jignesh, Please check your node and npm version by `node -v & npm -v`.
      You must have a version of node.js >= 8.0.0, and a version of npm >= 5.0.0
  • Bhavesh Jalondhara
    npm run build command does not work on my windows 10 system. also, found many issues in windows 10. please check it.
    • Mahesh Singh (Moderator)
      Bhavesh, could you please share some screenshots of errors?
  • Rashain
    Followed upto step 9. Venia theme is not visible in backend to set as the site theme. It does not compile to add in pub/static/frontend/Magento/venia/en_US.
    • Mahesh Singh (Moderator)
      John, Please follow the given steps now as Blog has been updated.
  • Solidblack
    ln -s pwa-studio/packages/pwa-module app/code/Magento/Pwa
    ex:ln -s /home/users/myuser/www/html/pwa/pwa-studio/packages/pwa-module app/code/Magento/Pwa

    Above command is not working in the window so can you please let me know how to do it in the window.

    • Mahesh Singh (Moderator)
      Solidblack, I have updated this blog as per Magento Venia Setup, please start
      following the given steps.
    • govind
      As i saw there isn’t exist pwa-module directory
      Can you provide me gitub link of pwa-studio that have pwa-module directory
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home