After creation, your project should look like this:
├── 📁 i18n
├── 📁 magento
| ├── 📁 etc
| | └── 📄 view.xml
| ├── 📄 registration.php
| └── 📄 theme.xml
├── 📁 node_modules
├── 📄 package.json
├── 📁 public
├── 📁 src
└── 📄 yarn.lock
As you may have noticed, the
publicfolders are empty. Why so?
The application you just created is a ScandiPWA theme. It uses parent-theme files to compile. Your theme's
publicfolders are empty, therefore each file is referenced from a parent theme. Your application's parent theme is
@scandipwa/scandipwa. It is located in
Any ScandiPWA application must include following files:
The page template
These files might be defined in your theme, parent theme, or provisioned by extensions.
In case of your project, the
public/index.htmlare located in your parent theme. You may however create these files in your theme, then, they will be preferences over the parent theme defined files.
You may create subdirectories inside
src. For faster rebuilds, only files inside
srcare processed by Webpack. You need to put all JS and CSS files inside
srcfolder, otherwise Webpack won’t see them.
You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.
There are some ScandiPWA extensions, which might define new required files. In example, there is an extension
@scandipwa/m2-themewhich allows to compile into Magento 2 theme. It defines a new PHP page template:
The Magento 2 theme's
You may re-define this template in your theme. However, by default the
src/index.phpwill be provided by
ScandiPWA introduces the concept of "overriding" files.
To override a file - means to create a file which will be used instead of some other file. You can override files of any extension or parent theme.