How we set up our e-commerce microsite environment
I work for Wehkamp which is one of the biggest e-commerce companies in the Netherlands with millions of customers every month. A couple of years ago we decided to move away from a monolith on-premise-based website to an AWS cloud and container-based microservice and -site landscape. Let me give you an insight into how our front-end is set up and how we achieve to be a 24/7 high performing website on every device.
Where does the customer land
When a customer visits any URL on wehkamp.nl, Cloudflare is our first line of defence. The customer will then land in our platform and will go through our consumer gateway which will hand out tokens and forwards the customer based on the URL to the correct microsite. This forwarding can be done on exact matching, regular expressions, subdomains or friendly URLs. If an URL doesn’t match it will fall back to the not-found-site which renders a generic error page.
Microsites for the win
Within our landscape, we serve several microsites which all have their purpose. As we have multiple product teams working on the sites, every team can work and release independently. Another great benefit is, that the load is shared over the sites and they can all be scaled in different ways. So a possible failure of one microsite will never bring down the entire site. A selection of microsites and the pages we currently serve:
- content-site (content-related pages like the homepage)
- search-site (product and search overview page)
- PDP-site (product detail page)
- wishlist-site (wishlist page)
- basket-site (basket-page)
- one-page-checkout (checkout page)
- self-service-site (all self service-related pages)
- not-found-site (fallback page, serves a generic error page)
Stack of all trades
All our microsites are based on the stack NodeJS, Webpack, React, Redux, Apollo GraphQL, Sass and CSS Modules. We use the latest versions for all these packages. For testing purposes, we use Codecov, Jest and Cypress. This has been the stack ever since we started migrating back in 2016 and we still love it!
The foundation of every microsite is our custom made NodeJS server. This package starts up an Express server and handles the rendering of our React-based components. It comes out of the box with standardized tools like metrics and logging. We also made it highly configurable with environment variables as not all sites require the same functionalities.
When running, it fetches real-time config data via Consul such as experiments and the header and footer service. Components from the microsite will be rendered in-between that header and footer. We chose an independent shared service as we could update the header for all microsites instead of updating and releasing the sites one by one. If you want to know more about our automation and releasing process, please read this article.
Shared styling and UI components
With all these microsites and different teams working on it, we created a Storybook library with shared UI components. You can think of components like Button, Input, Media but also Top Teaser, Carousel etc. The basic rule here is if a component is used on more than one site, it needs to be transferred to the library. This library is a monorepo where we use Lerna to publish our packages which can then be installed into the microsites.
For the CSS structure, we choose ITCSS and we recently started to migrate from SASS to CSS variables (to enable theming). All objects and variables are part of UI Base which is also in the monorepo. We try to keep components and CSS as generic and reusable as possible.
Still going strong!
After all these years we’re still happy with the decision we made to move away from the monolith. We choose a pretty good and stable base on which we can evolve in the coming years. Every setup has its pros and cons, it’s up to you and your team to decide which solution fits you the best! Our next challenge is to make this setup multilanguage and multilabel. Never a dull moment in the retail business!
If you have any questions or remarks, please feel free to reach out to us.
Thank you for taking the time to read this story! If you enjoyed reading this story, clap for me by clicking the 👏🏻 below so other people will see this here on Medium.
I work at Wehkamp.nl one of the biggest e-commerce companies of 🇳🇱
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!
