For PWA storefront Installation, just add our Skype account at support.bsscommerce, BSS Support Team will help you to install or customize the Speedy PWA Theme for Magento 2 immediately at your request.
Further assistance is available via Email [email protected], our supporters will assist you in resolving any issues within 24 hours.
In case you’d like to install, please follow these steps below:
I) Setup Prerequisites
Before your PWA installation, please check the server requirements.
1. PWA Prerequisites
a) List of requirements
In order to install PWA, your server must meet the following requirements:
b) Setup Requirements
We recommend Linux operating systems servers to do the setup requirements, for example, you can consider the Ubuntu 18.04 operating system to set up PWA requirements.
Step 1: Setup Nodejs
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
Step 2: Setup Yarn
Install Yarn Using NPM
- Start by listing the version to check if NPM is installed:
If you don’t have npm, install it by running the following command:
sudo apt install npm
- To install Yarn with npm:
sudo npm install yarn –g
Step 3: Python
Python by default is installed on ubuntu. To check it’s version, run the command:
Install node-gyp using npm, run the command:
npm install -g node-gyp
2) Magento backend prerequisites
The latest version of Magento PWA requires version 2.4 of Magento.
In case you haven’t installed Magento version 2.4, check Magento technology stack requirements before installing Magento 2.4.
Note: Magento instance must use https connection to setup PWA.
II) Setup Backend for PWA
Setup Magento 2.4 as the backend for PWA.
Install Magento using composer: https://devdocs.magento.com/guides/v2.4/install-gde/composer.html
Install modules used for Speedy storefront.
Upload and unzip the following file to the root Magento instance.
This file contains Magento modules to run Speedy storefront.
Then run the following command:
php bin/magento setup:upgrade
III) Setup PWA Studio and Speedy theme
1) Setup PWA Studio
We will install PWA Studio, If your site has not installed it yet
Clone the PWA Studio repository.
Clone the PWA Studio repository into your development environment.
If your site has already installed PWA Studio, you need to check if it is up to date with the develop branch of pwa-studio repository at https://github.com/magento/pwa-studio.git
2) Install Speedy Theme
Modify package.json file
Open package.json file at your root PWA studio directory, and add two new following lines:
- In "workspaces", add "packages/bss-speedy" as the new element of the array
- In "scripts", add "bss-speedy": "yarn workspace @bsstheme/bss-speedy" as the new element of the object
Here is the screenshot of the file after we added the two lines screenshot
Upload Speedy theme package.
Upload and unzip the following file to the directory: <ROOT_PWA>/packages.
where ROOT_PWA is your root PWA studio directory.
Install PWA Studio dependencies.
In the PWA Studio project’s root directory, run the following command to install the project dependencies:
Create the .env file.
Create a packages/bss-speedy/.env file using the following command:
yarn buildpack create-env-file packages/bss-speedy
- The value of MAGENTO_BACKEND_URL is the URL of a running Magento instance.
For example: “https://devpwabsscommerce.ga/”
- CHECKOUT_BRAINTREE_TOKEN is a tokenization key that authorizes clients to tokenize payment information.
Follow these steps of Braintree documentation to get a tokenization key:
Generate build artifacts for Speedy theme using the following command in the project root directory:
yarn bss-speedy run build
IV) Payment Method
Currently, PWA Studio supports Braintree payments in its storefront implementation.
We need to set up Braintree Payment Information in Magento Admin for Speedy storefront.
From the dashboard, go to
Stores -> Configuration -> Sales -> Payment Methods -> Braintree
And fill out all information in Basic Braintree Settings and Advanced Braintree Settings.
V) Install Upward Connector
The Magento 2 UPWARD connector is a module for routing requests to UPWARD-PHP. This module replaces the default Magento frontend theme with Speedy storefront.
Install Upward connector module.
Inside root magento backend run:
composer install magento/module-upward-connector
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
The Magento 2 UPWARD connector is configured in the admin area under:
Stores > Configuration > General > Web > UPWARD PWA Configuration.
This configuration is the location of the UPWARD configuration file for the UPWARD-PHP server.
Use the absolute path on the server for the value of this configuration.
After the installation, you can access the PWA storefront with the same URL storefront of your Magento 2 store.
- Please follow the steps above in the respective order in order for the PWA theme to work properly.
- In case you have followed all the above steps, but the extension still doesn’t work properly, please contact BSS Support Team for further assistance.