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
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.
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’s primary function is to create one or more bundles from the dependencies in your project’s modules.
A data query language on the client side and a service layer on the server side.
Magento 2 Company ? Find out More
Let’s start with Magento 2.3 installation.
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
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:
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:
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:
10. After successful installation run:
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 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
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
Launching staging server…
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).
- Now edit pwa-studio/packages/venia-concept/.env file
- Find the Staging server Section.
- Remove #(remove comment) and add
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
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.
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