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 sales@bsscommerce.com, 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:
- NodeJS >=10.14.1 LTS
- Yarn >=1.13.0
- Python 2.7
- Node-gyp package
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
nodejs -v
Step 2: Setup Yarn
Install Yarn Using NPM
- Start by listing the version to check if NPM is installed:
npm ––version
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:
python --version
Step4: Node-gyp
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
Step 1:
Setup Magento 2.4 as the backend for PWA.
Install Magento using composer: https://devdocs.magento.com/guides/v2.4/install-gde/composer.html
Step 2:
Install modules used for Speedy storefront.
Upload and unzip the theme package file to the root Magento instance.
=> Bss_Speedy_Addon_v1.0.0.zip (You will receive this file after purchased our Magento 2 PWA Theme.)
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
Case 1:
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.
git clone https://github.com/magento/pwa-studio.git
Case 2:
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
Step1:
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
Step 2:
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.
=> Bss_PWA_Speedy_Theme_v1.0.0.zip (You will receive this file after purchasing our Magento 2 PWA Theme.)
Step 3.
Install PWA Studio dependencies.
In the PWA Studio project’s root directory, run the following command to install the project dependencies:
yarn install
Step 4.
Create the .env file.
Create a packages/bss-speedy/.env file using the following command:
MAGENTO_BACKEND_URL="https://devpwabsscommerce.ga/" \
CHECKOUT_BRAINTREE_TOKEN="sandbox_8yrzsvtm_s2bg8fs563crhqzk" \
yarn buildpack create-env-file packages/bss-speedy
Explanation:
- 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:
Step 5:
Build artifacts.
Generate build artifacts for Speedy theme using the following command in the project root directory:
yarn bss-speedy run build
IV) Payment Method
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.
Step 1:
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
Step 2:
UPWARD Config.
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.
Example:
/var/www/html/magento-venia-theme/bss-pwa-theme/packages/bss-speedy/dist/upward.yml
After the installation, you can access the PWA storefront with the same URL storefront of your Magento 2 store.
*Note:
- 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.