Deploying a Vue Store on HCL Commerce

Deliver a sub-second Vue website on HCL Commerce with Layer0

Vue is an open-source JavaScript framework for building single-page applications (SPAs) that has rapidly increased in popularity since its launch in 2014. The framework's primary draw is allowing developers to build fast scaling JS applications quickly. It's lightweight and offers robust routing solutions for large apps. Furthermore, Vue offers great runtime performance and is fit to be the backbone for complex, revenue-generating websites with heavy traffic. Key benefits include: built-in server-side rendering, tree shaking, bundling and virtual DOM.

HCL Commerce, previously known as IBM WebSphere, is a popular platform for enterprise level B2B eCommerce as it offers great scalability, flexible catalogue management, deployments and personalization. HCL Commerce is a cloud-based, API-first platform (which includes REST and SDKs APIs) and offers two proprietary frontends: React Reference Storefront and Java JSP Storefront. Keep in mind. the Reference Storefront is a new, closed-source proprietary frontend meant to keep you on the platform.

Both headless and monolithic/traditional architectures are supported on HCL Commerce. The Standard Architecture is designed to separate individual frontend storefronts from the backend servers, leading to increased security, scalability, flexibility, and improves the ease of development and deploys. This Standard Architecture uses traditional Java JSP server-side rendering (SSR), while the second architecture, React Store Architecture, does not. The React Store Architecture is based on a Single Page Application (SPA) model, which is a client-centric headless Store which makes API calls. Currently, it does not support SSR. Moreoever, neither of the architectures support PWA or AMP out of he box, which significantly hinders website performance.

Layer0 lets you deliver your Vue storefront on HCL Commerce in sub-seconds. Websites on Layer0 see median speeds of 399ms Largest Contentful Paint (LCP) times. However, Layer0 is much more than a website accelerator. It is a Jamstack platform for large, eCommerce sites. Layer0 is built to make websites faster for users and simpler for frontend developers to maintain. Layer0 key benefits include: 

  • Jamstack for eCommerce via both pre and just-in-time rendering
  • Zero latency networking via prefetching of data from your product catalog APIs
  • An edge that can be configured natively in your Vue app (CDN-as-JavaScript)
  • Edge rules that can run locally, in pre-production and production environments  
  • Automated, full-stack preview URLs from GitHub, GitLab, or Bitbucket with every new branch and push
  • Performant split tests at the edge and A/B tests that do not slow down the site, canary deploys, and personalization
  • Serverless JavaScript that is much easier and more reliable than AWS Lambda

With Layer0, your Vue HCL Commerce storefront will run in sub-second speeds and your developers will be empowered to control edge caching and reduce rework using the various developer productivity tools that come with it.

Check out J.Jill, a sub-second HCL Commerce storefront on Layer0. The retailer delivers 390ms average page loads across its site.

If you're currently using Vue, use the this guide to deploy your Vue application on Layer0 and get sub-second loads in as little as 1 hour of work. 

Deploy in minutes

Moovweb XDN works with all frontends
Deploy freeTakes 2 minutes