Given the rise of PWA for Magento 2 and following our last how-to guide, in this article we will go over the installation process of ScandiPWA, a different, react based, PWA implementation for Magento 2.
Cloudhost with Magento 2.3.3, or 2.3.5. Version 2.3.4 is not supported.
The host must have composer installed (All Nexcess servers have composer installed)
The host must have node < 10 installed (All Nexcess servers have node < 10 installed)
Once Magento is installed, we will need to login through SSH into a cloudhost and install the base package by running:
composer require scandipwa/installer
Right after this, we will configure the persistent query module that comes with the installer by running:
php bin/magento setup:config:set <FLAG> <VALUE>
--pq-host [mandatory] - persisted query redis host
--pq-port [mandatory] - persisted query redis port (6379)
--pq-database [mandatory] - persisted query redis database (5)
--pq-scheme [mandatory] - persisted query redis scheme (tcp)
Alternatively, set those configurations directly in app/etc/env.php under cache key:
'cache' => [ 'persisted-query' => [ 'redis' => [ 'host' => '<REDIS HOST>', 'scheme' => 'tcp', 'port' => '<REDIS PORT>', 'database' => '5' ] ] ]
With persisted-query configured, it’s now time to bootstrap the ScandiPWA theme:
php bin/magento scandipwa:theme:bootstrap Scandiweb/pwa
This is one of the biggest differences of this implementation versus the rest: it works as a regular Magento 2 theme instead of completely replacing the frontend. This helps devs and merchants to have a simpler setup and doesn’t require extra software running on the servers.
The next step is go to the theme folder and run the following code:
cd app/design/frontend/Scandiweb/pwa npm ci # install dependencies npm run build
Now that we've built the PWA theme, we can either install sample data or skip that step and just configure the PWA theme in Magento’s admin.
Install sample data (optional):
ScandiPWA comes with a small set of sample data. To install it, you will need to run
composer require scandipwa/sample-data php bin/magento setup:upgrade
Configure Magento to use PWA theme:
After the build process is complete, we need to select and apply the theme we just created in the Magento admin.
In the admin, go to Content -> Design -> Configuration, find the row corresponding to your store view and click Edit. Select the newly created theme under Applied Theme and click on Save configuration.
Clear the cache, put your store in production mode and open your URL in the browser.
You should see ScandiPWA theme being served instead of the regular Magento 2 Luma theme. You can still access the admin using the same url you were using before.
- If you don’t see the theme you just created in the admin and you run the entire process in a site that’s using production mode, you might need to run
php bin/magento deploy:mode:set production
- If you see a blinking console when you run the bootstrap command or the npm build, don’t worry. This seems to be a styling issue that won’t affect the underlying process.
Our award-winning customer care team is here for you.Contact Support