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 current best practices for frontend development.
In this guide we will cover the installation of Cenia, a PWA implementation created by our partners CedCommerce, based on pwa-studio and Venia storefront.
Prerequisites:
- Cloudhost with Magento 2.3.5+ installed
- The host must have composer installed (All Nexcess servers have composer installed)
- UPWARD PHP connector
- A local development environment to build Cenia.
- 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
Building Cenia PWA
After you purchase Cenia you need to download the theme package file to your local environment.
Now, we install pwa-studio dependencies:
cd pwa-studio & yarn install
Once you finish installing all the required dependencies, you will need to modify the .env file under packages/ced-concept:
cd packages/ced-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/ced-concept/dist. Inside this folder you will find all the required files to run ced-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
There's an extra module required for Cenia. From your original theme download, move the content of the folder Ced_PwaApi (pub & app) to your Magento 2 root directory and run the following commands:
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy php bin/magento setup:di:compile
Install sample data (optional)
Run the following commands from your Magento 2.3.5 cloudhost root folder:
php bin/magento sampledata:deploy php bin/magento setup:upgrade
You are required to authenticate to complete the action.
Clear the cache, put your store in production mode and open your URL in the browser.
You should see Ced PWA 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.
Resources
- What is PWA? Using Progressive Web Apps for your Magento Store
- How to install ScandiPWA on Nexcess
- How to Install Venia Storefront on Nexcess
- magento/pwa-studio: 🛠Development tools to build, optimize and deploy PWAs for Magento 2.
- Help - How to deploy to production · Issue #2328 · magento/pwa-studio
- Project setup | Magento PWA Documentation
