Folder structure

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 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.

Important files and folders

Any ScandiPWA application must include following files:

File name	Intended purpose
src/index.js	The JavaScript entry point
public/index.html	The page template

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:

File name	Intended purpose
src/index.php	The Magento 2 theme's root.phtml 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.

Working with files

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.