Loading...

Can you guide how to install ScandiPWA?

Jayram Prajapati  ·   20 Dec 2022
Can you guide how to install ScandiPWA?
service-banner

Step 1: Introduction to ScandiPWA and its benefits

ScandiPWA is a modern technology that helps businesses build advanced web applications (PWAs) quickly and efficiently. This platform enables companies to build robust and scalable web apps with high performance and a smooth user experience.

ScandiPWA is excellent because it lets people use your website on computers, laptops, tablets, and phones. It works well on all of them so that customers can enjoy the same high-quality experience no matter their device.

ScandiPWA uses the latest web development technologies like ReactJS and GraphQL to make things easier.

Step 2: Prerequisites for installing ScandiPWA on Magento

Before installing ScandiPWA on Magento, a few prerequisites must be met. Firstly, you must have a working installation of Magento 2. x. Secondly, your server should meet the minimum system requirements for hosting Magento. Finally, you should have essential web development and server administration knowledge to ensure a smooth installation process.

Once these prerequisites are in place, you can install ScandiPWA on Magento. This involves downloading and installing the ScandiPWA package, configuring the settings, and integrating it with your existing Magento store. With proper setup and installation.

Step 3: ScandiPWA Install process after installing Magento

Given the rise of PWA for Magento 2, in this article, we will go over the installation process of ScandiPWA, a different, react-based PWA implementation for Magento 2.

The below link maps Magento 2 and the compatible ScandiPWA versions.

Once Magento is installed, we will need to login through SSH into a cloud host and create a new folder where the ScandiPWA package will live:

 

cmd

$ mkdir src/localmodules

The next step is to go to the src/local modules folder and run the following commands:

cmd

$ cd src/localmodules

$ yarn create scandipwa-app my-app

$ cd my-app

$ BUILD_MODE=magento yarn build

  • The new theme has been made, but we must install it using Composer.
  • First, This will alter composer.json to add a new item in the repositories field.

 

To execute the necessary actions, access your Magento root directory and enter the following commands:

$ composer config repo.theme path src/local modules/my-app

js

“theme”: {

           “type”: "path",

           “url”:   src/localmodules/my-app"

},

    

Next, we install our theme by using require. This will resolve the package to the src/local modules directory we configured above:

$ Composer needs scandipwa/my-app

js

“scandipwa/my-app” : “^0.0.1”,

Right after this, we will configure the persistent query module that comes with the installer by running the following:

$ php bin/magento setup:config:set --pq-host="localhost" --pq-port="6379" --pq-database="5" –pq-scheme="TCP"

js

'persisted-query'  =>  [

     ‘redis’  =>  [

            ‘host’  =>  ‘localhost’,

            ‘port’  =>  ‘6379’,

            ‘database  =>  ’5',

            ‘scheme’  =>  ‘tcp’

    ]

],

Run the upgrade command and disable full-page caching:

  • $ php bin/magento setup:upgrade
  • $ php bin/magento setup:di:compile
  • $ php bin/magento cache:disable full_page

Step 4: After installing ScandiPWA on Magento

After installing ScandiPWA on Magento, you can make further changes to match your business requirements. One way to do this is by setting up the local modules folder. This folder lets you create custom modules that work with ScandiPWA.

To set up the local modules folder, create a new directory named 'local modules' in the root directory of your ScandiPWA app. Inside this folder, you can create new modules or modify existing ones.

To create a new ScandiPWA app using the yarn command, navigate to your Magento root directory and run the command.

Step 5: Troubleshooting common installation issues After installing ScandiPWA on Magento

Troubleshooting common installation issues After installing ScandiPWA on Magento, you might encounter some common installation issues. Here are some troubleshooting tips to help you resolve them:

If you cannot access the ScandiPWA storefront after installation, check your server error logs for any issues with app initialization.

If you encounter database connection errors during setup, ensure your credentials in the .env file are correct.

 If you experience performance issues with ScandiPWA, try increasing the memory_limit setting in your PHP configuration file.

If you get a '404 not found' error when accessing

Step 6: Testing and verifying the installation

Testing and verifying the installation of ScandiPWA on Magento Once ScandiPWA is successfully installed on Magento, you can further customize and enhance your storefront by setting up the local modules folder. This will allow you to create custom modules and change existing ones.

To set up the local modules folder, go to the main ScandiPWA folder on your computer. Create a new folder there and name it "local modules." You can create additional folders for each custom module you want to work on inside this folder. These subfolders will help you develop or change the specific modules as needed.

Use the yarn command to create a new ScandiPWA app in the local modules folder. Once created, navigate to the app folder.

Step 7: Best practices for maintaining and upgrading ScandiPWA

Best practices for maintaining and upgrading ScandiPWA in the future Once you have successfully installed ScandiPWA on your Magento store, the next step is to set up the local modules folder. This folder will contain all of your custom modules and extensions for ScandiPWA.

To set up the local modules folder, go to the leading directory of your Magento installation on your computer. Create a new folder there and name it "local modules." Inside this folder, you can create separate subfolders for each custom module you want to work on.

After setting up the local modules folder, you can create a new ScandiPWA app. To do this, use the "yarn" command. Running this command will generate a new ScandiPWA app within the "local modules" folder. This app will automatically install all the required dependencies for you.

 

Contact us:+91 8128405131

Email send us at hello@elightwalk.com

Jayram Prajapati
Full Stack Developer

Jayram Prajapati brings expertise and innovation to every project he takes on. His collaborative communication style, coupled with a receptiveness to new ideas, consistently leads to successful project outcomes.

Most Visited Blog

6 Essential Steps for Magento 2 Performance Optimization for Your Store (2024)

Accelerate your Magento 2 Performance Optimization in 2024! Follow these 6 steps for effective performance optimization. Elevate your website speed for improved customer satisfaction and SEO ranking.

Installing the ScandiPWA Extension: A Comprehensive Guide

Extensions are new features that we add to our websites. Or we can disable and enable it through commands. All commands run at the ScandiPWA path.

How to use Dynamic Translation in React?

Unlock the power of dynamic translation in React with our detailed guide. Learn how to implement and leverage dynamic translation features to enhance the multilingual capabilities of React applications.