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
public folders are empty. Why so?
Any ScandiPWA application must include following files:
The page template
In case of your project, the
public/index.html are 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
src are processed by Webpack. You need to put all JS and CSS files inside
src folder, 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-theme which 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.php will be provided by
ScandiPWA introduces the concept of "overriding" files.
You can learn more about overriding in the File overrides section.