yarn start
to start the development server and add an index.js
file to the src
folder:index.js
file should look like this:ctrl + shift + P
to access the VSCode command pallette and type in ‘>Create new component’ and press enter.UrlResolver
, select the Contains business logic
feature and press enter.UrlResolver
component folder which will contain template files:src/index.js
and import the UrlResolver
:Component
folder.node_modules/@scandipwa/scandipwa/src
. The folders here represent the available aliases and these are as follows: component
, query
, route
, store
, style
, type
and util
. The alias for referencing these folders is simply the folder name - capitalized.component/UrlResolver
folder, let’s edit the UrlResolver.component.js
file:localhost:3000
, you’ll see the ‘Hello!’ being output there.UrlResolver.component.js
are:component.js
files are made for pure rendering, we’ll assume that the page type will be coming from props and we’ll not determine page type in the component.container.js
and we’ll tackle that a bit later.container
ships us a type as a prop:UrlResolver.config.js
:component.js
file due to the fact that in order for webpack
to be able to create smaller sized bundles, we need to add the constants that might be reused by different modules to the config.js
file - outside of large modules.webpack
can’t split modules apart, so, if only a constant is needed, the bundle size would be minimized significally by using a constant-only file. In this case, creating a new file means creating a new module.UrlResolver.component.js
file now is that the code repeats itself. An option is to write switch
statements instead of if
statements:switch
statements - the cases should be on the same indentation level as the switch
itself.config
file, we can use auto-fixer to ‘Fix this simple import-sort/sort problem’ and it’ll add the following to our imports:localhost:3000
will display ‘404’ as the type of page hasn’t yet been passed, it’s undefined.switch
approach for component types is still not the most efficient way to go about rendering since we can’t quickly extend the method. The solution to this is to create a rendering map:this
can cause context loss, so we need to bind
the type to the render method.switch
statement:component
file will look like this:container
has all of the business logic inside of it. So, in order to determine the URL, we should go to the URL container. We can try to guess the URL type based on the URL, but we can also request the URL from the Magento URL resolver aka UrlRewrite\resolve.container
.container
file has two functions always defined:containerFunctions
is an object containing the mapping of a key that will be later passed to your component as a prop and the function that’ll be used to implement the prop.getData
key will be passed as a prop to the component
, where it’ll call it and then it’ll return some data. So, the logic itself will be located in the container
and the component
will simply call it.containerFunctions
in this tutorial, so we can remove all references to it from the container
file.containerProps
which are meant for props mapping. For example, if you have a property to define, like isDisabled
or a type, you provide a function that will get
this property for you.component
for rendering, but the value retrieved from the container
.container.js
file.PRODUCT_TYPE
we also need to import it in the UrlResolver.container.js
file:localhost:3000
in our browser, we should see ‘product’ now.localhost:3000
we’ll see ‘404’, but if we go to localhost:3000/product
in our browser, we’ll see ‘product’.find
is that it can return null
. In this case, we’ll get a TypeError: Cannot destructure property ‘type’ because it’s undefined.component
:typeList
the rest of our logic shrunk down as well. This is why we need to understand which data structure is needed before attempting to implement anything.UrlResolver.component.js
file and implement renderType
as a separate function. This is needed because the render
itself should return the style wrapper:renderFunction
in article
ensures that we’ll be able to refer to it using a BEM abstraction later on.UrlResolver.style.scss
to apply some styles. If you want to take an in-depth look at ScandiPWA styling conventions, go here.&_404 { color: red; }
is that we’re redefining a property, instead, we should redefine the CSS custom variable::root{}
. Going further down to, and further on we can see no declarations of this variable.