Development

If you have not found an answer to your issue here, but happened to resolve it on your own / with help of the community - please open a pull-request, or an issue with solution details.

Alternatively, write to us in Slack.

Refetch component data when navigating back

Use “withRouter” to check for the URL and check if the new URL is different from the previous one.

Understand important changes when upgrading ScandiPWA versions

All the important changes with each release are listed in GitHub under the GitHub Release important notes section.

You can also compare two tags using GitHub compare functionality.

General advice for easier upgrade process is to extend the code and keep the pure override count low. Extend original classes in overrides, do not copy them.

Theme doesn’t work if the index.php configured is not in the pub folder resulting in 404 error when requesting resources

ScandiPWA does not support installation in non /pub folder. Magento 2 also recommends installing it under /pub folder.

Can’t access Docker MySQL on my local setup

You can access Docker MySQL on your local setup with credentials from .application file and using 3307 port.

ERROR: Connection to Redis redis:6379 failed after 2 failures.Last Error: (0) phpnetworkgetaddresses: getaddrinfo failed: Name or service not known

This can happen after running the following command:

magento scandipwa:theme:bootstrap Scandiweb/pwa

To solve it you have to restart the app container. If this doesn’t help run the following command:

docker run -it -e COMPOSER_AUTH --entrypoint /bin/bash APP_CONTAINER_NAME

After rerun the command:

magento scandipwa:theme:bootstrap Scandiweb/pwa"

Where is the correct place to install a new font for the ScandiPWA?

Fonts should be installed in the theme public folder and in index.development.html

Before that you must create a file with a different name as it is always taken from vendor:

Rename the index file
Change webpack import for it
Add your new fonts there

ERROR: main.CRITICAL: Class …\App\Config\Initial\Reader\Proxy does not exist

Run the following command from Magento 2 root to resolve the issue:

rm -rf generated && magento c:f && chmod -R 777

How to bypass HTTPs on local?

Site can be opened with HTTP and HTTPs by default on local.

Newly added store is not working altough is shows up in the store switcher

Ensure that newly created stores are added to your Nginx configuration.

Does ScandiPWA plan to implement TypeScript?

The core will not migrate to TypeScript in a relatively long term. The extensions however - might be done in any language. This is because of the learning curve needed for TypeScript. We prefer simplier technology - most M2 developer are relatively unexperienced with JavaScript. The interfaces and some TypeScript based components might come with UI library in the future. It is important step for extensions, as there is a need to depend on some abstraction when writing an extension.

ERROR: no such file or directory, open ‘…/Scandiweb/pwa/package.json’

Run the following Magento command from the container:

scandipwa:theme:bootstrap Scandiweb/pwa

If it fails please remove the folder app/design/frontend/Scandiweb/pwa

How to view real time code changes to the Theme?

Create a file with the same name in app/design and watch the following tutorial video to learn how to customize it.

How to modify the root.phtlm on my custom theme?

Change the file name of your index.production.phtml and change the path to it in webpack.

Can I extend constructors?

Of course! The magic __construct member functions are both overridable and pluggable into, just like any other member!

Chrome extensions don’t work.

You can run chrome with WEB security disabled.

dcf up -d —remove-orphans can’t bring frontend container up

Running the following command solves it:

dcf build

After build just rerun the following command:

dcf up -d --remove-orphans

How ScandiPWA manages cache?

Utilizes default Magento 2 cache control mechanism over X-Magento-Tags-Pattern header.
Provides AddTagsToResponsePlugin to add entity headers to each GraphQl cacheable response.
Utilizes custom Cache entity (singleton), to gather all entities, that were loaded during current request.
Flush happens based on default cache_flush events for most entities.
CMS pages has own event observers to track response/flush.

Don’t see src folder changes immediatelly on update

Make sure -f docker-compose.local.yml is included

Replace main.scss and replace it. After import original files from vendor and your custom file.

Content is not appearing on frontend after installing ScandiPWA in running Magento instance

Your server is not configured to execute PHP. Configure web server property.

How do I get public and private key from Magento marketplace?

Follow the steps provided in the offical Magento Developer Docs.

ERROR: 413 Request Entity Too Large when uploading Slider images

Slider has 1 MB limit for images. Optimize image to be smaller than 1 MB. This will also boost your performance.

How do I recompile a file on the frontend?

Restart the frontend container.

How can I add an image to the splash screen?

To add an image to the splash screen you need to modify config/webmanifest.config.js file.

Can I use ScandiPWA theme only for mobile and tablet versions of the website?

You can do it by configuring NGINX. Additionally creating a separate store-view would help archive this.

How do I add icons to the header, for example, wishlist icon?

You need to extend the header component and add the new icon.

Can’t open a non-pwa page

All URLs that are PWA have to be configured in getBypassCacheHosts within scandipwa/source/src/sw/handler/UrlHandler.js file.

Example:

'(?!^.*admin)', // Magento Admin. '(?!^.*default/inipay/std/test)', //

How can I add additional fields to the checkout?

To add additional fields in the checkout:

Override and extend CheckoutAddressForm component (CheckoutAddressForm.component.js) method filedMap in the front end
The key you add must be a key matching GraphQL schema defined field key you plan to send to BE
On backend create a new Magento module, add new field to schema - the child field of input AddressInput
If that does not work add a resolver to the field and save the value of the field in quote

Pay attention to the root parent item and make sure your root structure looks something like this: root < rootitem < men, women, kids, etc.

You need to create a new item to be on root.

You change the stylesheet where the BEM (block) part is declared. If class starts with “Hello-Friends_isGood” then look for “Hello” component.

How do I create a multi-language website?

You can find information on multilanguage support here.

How can I add a new page to the router?

Follow these steps to add a new page to the router:

Add it from constructor.
Make sure you export everything just like the original class did.
Import everything you plan to reuse (make sure to not import the default export).

How can you add CMS block identifiers in the header?

You need to add them into the router as well because the request is proceessed there. currently the page is responsible for block loading not the CMS block itself. Add CMS block to getCmsBlocksToRequests() in the index.js (the main router). See the template for this file in override in docs.

Translation is not working even after rebuilding the theme

Make sure you have set up Magento locale correctly in your store.

ERROR: “Command make not found”

This command should be preinstalled. If it is not install the make command.

How can I implement autoslider?

You would have to make direct changes to the JS component and do custom implementation of this feature.

How can I call custom Magento modules with ScandiPWA theme?

If the module interacts with Frontend then you will have to implement ScandiPWA compatibility for it. Backend only modules work out of the box without any additional work.

Please see how Plugin Mechanism works and how you can use it to create reusable ScandiPWA theme extensions.

How can I add changes to index.js file under the app directory?

Index.js file has to be renamed before you can make overrides within it. Afterwards make sure to change the file name to the new one in the webpack configuration.

How do I make some elements extendable (Accordion) just in mobile view?

The best way would be to create a Magento widget with title and field for content. Alternatively, you can parse all elements to make them extendable.

Cache clean command not working: bin/magento c:c

You should never run commands from your host machine if you are using Docker. You should run it from the container using the in app command.

ERROR: TypeError: this.state is null

State must be defined in constructor. Pass the state from container to component as prop and use the field in the component as porp.

How to add an additional reducer to the application via plugin?

You should intercept the function with the namespace Store/Index/configureStore Then, do something like this:

import NewReducer from '../../store/New/New.Reducer';

const addReducer = (args, callback) => {
    /** First of all, you should create the store itself. */
    const store = callback(...args);
    
    /** Then, inject all the reducers you need in your plugin. */
    store.injectReducer('NewReducer', NewReducer);
    
    /** And don't forget to return the new store to the application! */
    return store;
}

How to add a translation for/by a plugin?

Easy - just put an additional translation file into your extension'sscandipwa/i18ndirectory! The naming convention for these files is the same as for the ones in themes. These additional files are merged with the big ones in the theme in order to produce a translation. In such a way, you can also add a whole new translation pack! The original values present in the theme will always override the custom ones provided by extensions.

PreviousNgrok NextInstallation

Last updated 4 years ago