Folder structure
Last updated
Last updated
After creation, your project should look like this:
As you may have noticed, the src and public folders are empty. Why so?
The application you just created is a ScandiPWA theme.
It uses parent-theme files to compile. Your theme's src and public folders are empty, therefore each file is referenced from a parent theme.
Your application's parent theme is @scandipwa/scandipwa. It is located in node_modules/@scandipwa/scandipwafolder.
Any ScandiPWA application must include following files:
These files might be defined in your theme, parent theme, or provisioned by extensions.
In case of your project, the src/index.js and 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:
You may re-define this template in your theme. However, by default the src/index.php will be provided by @scandipwa/m2-theme extension.
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.
You can learn more about overriding in the File overrides section.
File name
Intended purpose
src/index.js
The JavaScript entry point
public/index.html
The page template
File name
Intended purpose
src/index.php
The Magento 2 theme's root.phtml template