Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Magento2.3 PWA Studio Setup and Setup Venia Project on Production Server

    Introduction

    Let’s Learn how to setup PWA Studio Setup and Setup Venia Project on 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 a very fast in the field of e-commerce, business,
    online news portal and other fields because of its peculiar characteristics listed
    below as follows:
    1. Faster User Interface Support
    Web developers can now load an entire website to browser after just one pageview even on slow networks.
    2. Home screen Shortcut
    Mobile users can install PWA site to their home screen like a Native App.
    3. Offline Support
    Implementation of service worker makes it able to work offline. Website can now be accessible even user lost the 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 request, When connectivity returns it re-sent all the data in background.
    5. Secure
    PWA sites use HTTPS connections for enhanced security.

    Lets back to setup PWA in Magento 2….

    PWA Studio project used the 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.

    Lets 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 --admin-email=test@webkul.com --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 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

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

    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, my case it is:

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

    7.1 Generate SSL certificate because PWA features requires 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.

    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:

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

    yarn run build

    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
    

    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

    12. Now browse the application, you will 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 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 you magento.

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

    Setup Venia Project on Production Server

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

    Note: Make sure HTTPS is enabled for your domain.

    Lets we have a domain https://mahesh.webkul.com we want to setup 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 venia server.

    sudo yarn run build && yarn run stage:venia

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

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

    Current Product Version - pwa-buildpack v3.0.0

    Supported Framework Version - 2.3.1

    . . .

    Comments (34)

    Add Your Comment

  • 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
      Hi Romain, Make sure you are running this command as a root user.
      • Romain
        i’m using root user
        • Mahesh Singh
          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
            Please share a screenshot of terminal with that error, i will look into this.
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close