1. Home
  2. Docs
  3. Magento 2 Themes
  4. PWA Theme
  5. Installation Guide

Installation Guide

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

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 following file to the root Magento instance. 

=> Bss_Speedy_Addon_v1.0.0.zip

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

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:

https://developers.braintreepayments.com/guides/authorization/tokenization-key/javascript/v3#obtaining-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

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.

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.
Was this article helpful to you? Yes No

How can we help?