A couple of years ago, Magento decided to take the PWA (Progressive Web Application) route and started developing pwa-studio, a set of development tools to build, optimize and deploy PWAs for Magento 2.
Their goal is to replace the current frontend with something simpler, easier to extend and closer to the current best practices for frontend development.
In this guide we will cover the installation of Venia Storefront, the official PWA storefront, based on pwa-studio and made in collaboration by Magento and the community. This guide is also valid for any pwa-studio based implementation including SimiCart PWA and BssCommerce Speedy PWA.
Prerequisites:
Cloudhost with Magento 2.3.5+ installed
The host must have composer installed (All Nexcess servers have composer installed)
A local development environment to clone pwa-studio and build Venia.
Sample data (optional)
This guide is divided into 2 sections: commands you need to run in your cloudhost and commands you need to run in your local development environment.
On your local development environment:
Cloning pwa-studio and building Venia Storefront:
First of all, you will need to clone pwa-studio in your local development environment by doing:
git clone https://github.com/magento/pwa-studio.git && cd pwa-studio
Now, we install pwa-studio dependencies:
yarn install
Once you finish installing all the required dependencies, you will need to modify the .env file under packages/venia-concept:
cd packages/venia-concept nano .env
You should see something like this:
######## PWA Studio Environment Variables ###################################### # # This file contains environment variables for a Magento PWA Studio project. # PWA Studio uses environment variables for all variable cross-project # values, so that a developer or a build system can override any variable # with standard tools. # # This file belongs at the root of the PWA, and must be named `.env`. # Uncomment and modify variable declarations in this file and they will take # effect throughout the Buildpack tool chain. # # Generated by @magento/pwa-buildpack v5.1.1 on 2020-05-26T13:33:17.344Z. # ################################################################################ #### 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/ # ################################################################################ #### Magento Store Edition ##################################################### # # Specify the edition of the magento store (Enterprise Edition or Community # Edition). Can be one of CE or EE. # - Default when not set: CE MAGENTO_BACKEND_EDITION=CE
You will need to change MAGENTO_BACKEND_URL and point it to your cloudhost Magento 2 install. Ensure the URL is right because we will need it for our next step. A list of all the variables that can be used can be found here.
Once we configure our .env file, we will need to build our PWA:
yarn build
This 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.
Once the build is done, you will need to transfer the resulting folder’s content to your cloudhost. For a simpler setup, you might want to create a folder called “pwa” in your pub folder. This is where the PWA files will be transferred to. You can do this via scp (secure copy) or FTP over TLS.
On your Nexcess cloudhost:
Install UPWARD PHP connector:
Run the following commands from your Magento 2.3.5 cloudhost root folder:
composer require magento/module-upward-connector composer update
Once done, you will need to run the following command to tell the UPWARD module where the upward.yml file is located. This command must be run in your cloudhost from the root directory:
php bin/magento config:set web/upward/path pwa/dist/upward.yml
Install sample data (optional):
Run the following commands from your Magento 2.3.5 cloudhost root folder:
composer config repositories.catalog-venia vcs https://github.com/PMET-public/module-catalog-sample-data-venia composer config repositories.configurable-venia vcs https://github.com/PMET-public/module-configurable-sample-data-venia composer config repositories.customer-venia vcs https://github.com/PMET-public/module-customer-sample-data-venia composer config repositories.tax-venia vcs https://github.com/PMET-public/module-tax-sample-data-venia composer config repositories.sales-venia vcs https://github.com/PMET-public/module-sales-sample-data-venia composer config repositories.media-venia vcs https://github.com/PMET-public/sample-data-media-venia composer require magento/module-catalog-sample-data-venia:dev-master composer require magento/module-configurable-sample-data-venia:dev-master composer require magento/module-customer-sample-data-venia:dev-master composer require magento/module-tax-sample-data-venia:dev-master composer require magento/module-sales-sample-data-venia:dev-master composer require magento/sample-data-media-venia:dev-master composer update
Clear the cache, put your store in production mode and open your URL in the browser.
You should see venia-concept being served instead of the regular Magento 2 frontend. You can still access the admin using the same url you were using before.
Known issues:
There have been cases where the UPWARD module was disabled after installation. You can enable the module by running:
php bin/magento module:enable Magento_UpwardConnector
Some of the sample data modules require to be loaded in a certain order because of how dependencies were defined. An issue has been open on GitHub to fix this.
