The theme is expected to be found in Magentoβs directory for themes: app/design/frontend/<VENDOR>/<NAME>
. In docker, by default, the theme is located in app/design/frontend/Scandiweb/pwa
.
Note:
do not worry that you see no source files (.js, .scss) in your theme. This is expected. You are meant to create files in the same folder with the same name in order to modify them. See guide for that.
The source theme (composer installed) is located in vendor/scandipwa/source
. Reference it for efficient development. But do not modify the vendor files! Use the mechanism for that.
Copy π¦scandipwa
β£ πMagento_Theme # compiled assets
β β£ πtemplates
β β β πroot.phtml # root template compiled from "index.development.html" or "index.production.phtml"
β β πweb
β β£ πassets # compiled from "src/public/assets"
β β π*.(js|css) # compiled JS and CSS
β£ πetc # configuration
β β£ πmodule.xml
β β πview.xml
β£ πmedia # theme preview picture in admin panel
β β πpreview.png
β£ πregistration.php # registration file
β πtheme.xml # registration file
Browse theme internals
The modern application stack fluidly merged with the flat structure. Notice, the main folders are:
component - React components
route - application route collection
style - application-wise styles
query - queries for GraphQL requests
type - common React propTypes declarations
store - Redux store configuration
util - application wise helpers
There are a lot of index.js
file in the theme. Do not be afraid of them. Except few exceptions, they are just simple aliases to one of the files in the directory. Exceptions are:
app/route/index.js - main router initialization
app/store/index.js - reducer combination, Redux initialization
app/index.js - application entry-point
Now, observe complete theme source-files related structure:
Copy π¦scandipwa
β£ πnode_modules # installed project dependencies (please add to `.gitignore`)
β£ πi18n
β β π<LANGUAGE>_<VARIATION>.json
β£ πsrc
β β£ πapp
β β β£ πcomponent
β β β β π<COMPONENT_NAME>
β β β β£ π<COMPONENT_NAME>.component.js # template related logic
β β β β£ π<COMPONENT_NAME>.container.js # business logic & Redux connection
β β β β£ π<COMPONENT_NAME>.style.scss # styles
β β β β£ π<COMPONENT_NAME>.config.js # configuration
β β β β£ π<COMPONENT_NAME>.test.js # unit tests
β β β β πindex.js
β β β£ πquery
β β β β£ π<QUERY_NAME>.query.js
β β β β πindex.js
β β β£ πroute
β β β β£ π<ROUTE_NAME>
β β β β β£ π<ROUTE_NAME>.component.js
β β β β β£ π<ROUTE_NAME>.container.js
β β β β β£ π<ROUTE_NAME>.style.scss
β β β β β πindex.js
β β β β πindex.js
β β β£ πstore
β β β β£ π<STORE_NAME>
β β β β β£ π<STORE_NAME>.action.js # action declaration
β β β β β£ π<STORE_NAME>.dispatcher.js # action dispatcher (for async executions)
β β β β β£ π<STORE_NAME>.reducer.js # action handler
β β β β β πindex.js
β β β β πindex.js
β β β£ πstyle
β β β β£ πabstract # virtual SASS functions, mixins (non compilable). Are injected into every component style!
β β β β β£ π_abstract.scss # imports of all abstract functions in right order
β β β β β π_<ABSTRACT_STYLE_PART>.scss
β β β β£ πbase
β β β β β£ π_<HTML_ELEMENT_NAME>.scss
β β β β β£ π_reset.scss # CSS reset
β β β β β π_root.scss # ":root" styles (CSS custom variables declaration)
β β β β£ πcms
β β β β β£ πblock
β β β β β β π<CMS_BLOCK_NAME>.scss
β β β β β£ πslider
β β β β β β π<SLIDER_NAME>.scss
β β β β β πblock.scss
β β β β πmain.scss
β β β£ πtype
β β β β π<PROP_TYPE_GROUP>.js
β β β£ πutil
β β β β π<UTILITY_GROUP_NAME>
β β β β β£ π<UTILITY_NAME>.js
β β β β β πindex.js
β β β πindex.js
β£ πpackage-lock.json
β πpackage.json
Configuration & build files
TODO :
add notes about webpack configuration naming, explain babel configuration
Copy π¦scandipwa
β£ πconfig
β β£ πFallbackPlugin
β β£ πI18nPlugin
β β£ πTranslationFunction
β β£ πbabel.config.js
β β£ πmeta.config.js
β β£ πtests.config.js
β β£ πwebmanifest.config.js
β β£ πwebpack.core.config.js
β β£ πwebpack.development.config.js
β β£ πwebpack.extract-translations.config.js
β β£ πwebpack.production.config.js
β β πwebpack.sw.config.js
β£ πjsconfig.json
β£ πprocess-core.yml
β£ πprocess.yml
β£ π.eslintrc
β£ π.stylelintrc
β π.graphqlconfig