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.