Adore Beauty Deploys Nuxt App at the Edge

Melbourne-based Adore Beauty is Australia’s longest running online beauty store and official stockist of over 200 leading global beauty brands. From humble beginnings in her garage in early 2000, then 21-year old Kate Morris set out to provide a better cosmetics shopping experience. While the company has no doubt experienced tremendous growth in the years since, that same commitment to customer experience remains at the core of the Adore Beauty brand.

In e-commerce, a large part of delivering an exceptional customer experience lies in the online shopping experience itself. Adore Beauty employs top technical talent focused on continuous innovation to deliver more personalized shopping experiences.

They run a highly customized BigCommerce back-end with a lot of heavy integration with Section to maximize caching performance.

The Problem

Adore Beauty first started leveraging the Section platform several years ago to improve performance and reliability during the peak holiday sales season. After experiencing impressive sales lift through various optimization methods, the technical team at Adore Beauty began to expand beyond simple site acceleration techniques and queueing to take advantage of other benefits that Section’s Edge Compute Platform offers.

“We started off by simply using Section to speed up the site and to provide a queueing system when our website would get overloaded. Since then, we have added services and now cover caching, WAF (via ThreatX), A/B Testing (via SiteSpect) and image optimization (via Cloudinary).” -Gareth Williams, CTO, Adore Beauty

Recently, Gareth approached the Section team with a new challenge. In an effort to deliver faster, more personalized customer experiences, his team was interested in running their Nuxt application at the edge, closer to their end users.

The Solution

The team at Adore Beauty is leveraging Section’s Node JS edge module to serve their Nuxt app closer to end users, resulting in reduced latency and significant cost savings as a result of not having to send all requests back to the central infrastructure.

For Adore Beauty, the front-end framework (i.e. Nuxt app) calls a Laravel API which houses all product, category, and pricing information. Other requests, such as shopping cart functions are routed to the origin (i.e. BigCommerce) for handling.

Adore Beauty Section architecture

API Caching

In order to avoid performance degradation associated with API calls back to the origin on every request, the Adore Beauty team is leveraging API caching to cache commonly used API routes in a varnishapi Varnish Cache Module.

"proxychain": [
            "name": "varnishstatic",
            "image": "varnish:6.1.1"
            "name": "varnishhtml",
            "image": "varnish:6.1.1"
            "name": "nuxt",
            "image": "nodejs:10.11.0"
           "name": "varnishapi",
           "image": "varnish:6.1.1"

CI/CD Pipeline Integration

Another key feature that is helping streamline operations for the Adore Beauty team is integration into their Bitbucket CI/CD pipeline for releases. A simple docker container run from within Bitbucket allows Adore Beauty to check code into their Bitbucket pipeline for testing before being copied back into Section to trigger a global edge deployment.

DevOps Support

As CTO, Gareth says that one of the biggest challenges that he faces in his role is how to stay agile. They don’t yet have a dedicated DevOps skillset internally, and with their migration to microservices, they need to maximize their team’s productivity by writing great code and pulling together the best solutions. By running their app through Section’s Node JS edge module, the Adore Beauty technical team doesn’t have to worry about the complexities that come along with hosting, deploying, and scaling. Instead, they can focus on writing code that continues to optimize the user experience.

“We don’t need to be concerned about hosting, deploying, and scaling our app. We simply write code, test it and hand this over to Section to run.” -Gareth Williams, CTO, Adore Beauty

Getting the app deployed as close to the customer as possible solves a challenge that the Adore Beauty team is not ready to manage internally, which increases speed and redundancy and is backed by the experience of Section’s engineering team. “It means our team can stay lean and focused. We can add value to the customer by pulling together all our microservices and relying on Section to do the scaling,” says Gareth.

Looking ahead, Gareth’s aim is to migrate as many microservices as possible to be hosted and scaled by Section. He says, “This will mean our entire focus will be on orchestrating and improving the customer experience.”

Similar Articles