Today we'll talk about working with Magento PWA Studio and how to create a custom theme based on the Venia theme from Magento.
Useful links: why use PWA and what pros PWA Studio brings →
How to create a custom theme in PWA Studio
You have at least 2 ways to develop a custom theme by using:
- Fallback Studio by Jordan Eisenburger;
- the Scaffolding project supported by Magento Core Team.
Let’s consider these Magento theme studios in details.
Fallback Studio
This method creates a wrapper around PWA Studio, i.e. сopies the file structure of the source project, and you can change them without any risks. This way allows you to develop a custom store theme that depends on the Venia concepts, where you can change or extend components according to your needs. The main idea is the same as in the default Magento.
However, Fallback Studio was developed by one person and hasn’t been updated yet so, it’s a bit outdated at the moment. Now it’s not clear whether it supports new versions of PWA Studio and how it will be further developed.
Learn more about Fallback Studio here →
Scaffolding Project
At the same time, Scaffolding is a successful project that is constantly updated by the Magento Core Team and goes together with PWA Studio. This is a method of automatic file creation that supports a specific project structure. PWA Studio provides tools to simplify the project creation and allows you to design your own PWA theme on Magento 2.
Moreover, Scaffolding is easier to understand and has more automation tools than Fallback Studio. That’s why we’ve decided to consider PWA theme creation based on Scaffolding.
Learn more about Scaffolding here →
How to create a PWA theme with Scaffolding
While the topic is comparatively fresh and few experts have written extensive recommendations on Magento PWA Studio. Below, we provide the main steps from the guide.
Today we'll extend the Main component and create the TopBar component as the first elements of our website.
Preparations
Before we start, make sure you have enough working experience with React, HTML, CSS, and Webpack. Also, you need to pre-install the following tools:
- NodeJS >=10.14.1 LTS
- Yarn >=1.13.0
- Python 2.7, see the Installation instructions on node-gyp
- A running instance of Magento 2.3.1 or above
How to update the Main component?
Create a new project with the following command:
yarn create @magento/pwa
Step #1. Once the installation starts, enter the name of the directory where the project should be installed, the project name, author name, Magento backend URL (otherwise the system will offer you to install a new instance of the Magento) and token.
Step #2. Next, create an override Webpack plugin. It will help the collector replace default components with advanced ones.
Step #3. Let’s rewrite or extend the default components of PWA Studio by adding a div block with text: Static Block for TopBar.
For this, create the lib folder and copy the Main component.
Update the Main component.
Step #4. Then create and set up the componentOverrideMapping.js file. It stores an override map of standard components. Sintaxis:
[‘path to default Venia component’]: ‘path to predefined component’
Step #5. After that we need to register the plugin in webpack.config.js. For this, import the moduleOverrideWebpackPlugin.js and componentOverrideMapping.js files and call the plugin by adding it to the clientConfig.plugins list.
Once configurations are done, run the Watch command:
yarn watch
As a result, you should get a theme with the overridden Main component:
How to create a TopBar component?
Now let’s create a custom react component that will replace the Static Block for TopBar from our first example.
Step #1. To specify styles, create the src/lib/components/TopBar/topbar.css file.
Step #2. Then create the file with our react component.
Step #3. Export your custom component.
Step #4. Then update the Main component.
The result should look like this:
That’s it for today.
If you have any questions, feel free to pose them below.
We’ll be happy to help you out!