Piyush Dankhra

moon indicating dark mode
sun indicating light mode

Last updated: June 05, 2021

Relation between custom URL Pattern and Component Path in PWA Studio

I assumed that you’re familiar with how to create an extension in the PWA Studio if not then I recommend you to check it out

  • PWA Studio extension generator
    • yarn create @larsroettig/pwa-extension

In our custom extension, we can register and manage custom routes in the intercept.js file. For example,

module.exports = targets => {
targets.of('@magento/venia-ui').routes.tap((routes) => {
name: 'Blogs',
pattern: '/blog',
path: '@dankhrapiyush/blog/lib/components/Blogs'
name: 'Blog',
pattern: '/blog/post/:id?',
path: '@dankhrapiyush/blog/lib/components/Blog'
name: 'BlogCategory',
pattern: '/blog/category/:id?',
path: '@dankhrapiyush/blog/lib/components/Category'
name: 'BlogTag',
pattern: '/blog/tag/:id?',
path: '@dankhrapiyush/blog/lib/components/Tag'
return routes;

file source: https://github.com/dankhrapiyush/blog/blob/master/intercept.js

As we noticed in the code snippet, the route definition object has three parameters

  • name: Define a user-friendly name for our internal purpose
  • pattern Path pattern to resolve the url path
  • path: React component path that will render in the frontend

On the frontend, it matches the routes pattern in the bottom-to-top order and renders the component set in the path parameter.

Let’s say if the requested url is

  • yoursite.com/blog

    • It renders the @dankhrapiyush/blog/lib/components/Blogs component
  • yoursite.com/blog/post/hello-world

    • It matches the pattern /blog/post/:id? and renders the @dankhrapiyush/blog/lib/components/Blog component
  • yoursite.com/blog/tag/pwastudio

    • It renders the @dankhrapiyush/blog/lib/components/Tag component
    • In the first view, you might think why not the @dankhrapiyush/blog/lib/components/Blogs component? Now you know the answer, that is “bottom-to-top” order.

I hope it clears the idea about how routes pattern and path co-relates to each other and how priority works.

I'm Piyush Dankhra
Adobe Certified Expert - Adobe Commerce Developer / Front-End Developer / Business Practitioner
Adobe Subject Matter Expert - Adobe Commerce Front End Developer
Working on Magento 2 / PWA Studio