Deploying a React Store on commercetools

Deliver a sub-second React website on commercetools with Moovweb XDN

Created and developed by Facebook, React is one of the most popular open-source JavaScript libraries for building user interfaces or UI components quickly and easily, using a component-based approach. React offers great runtime performance and is fit to be the backbone of complex, revenue-generating websites with heavy traffic, such as eCommerce and Travel websites..

React offers some benefits compared to the other popular frontend frameworks out there, including:

• Virtual DOM: Nodes are re-rendered only as needed. React compares new data to original DOM and updates the View automatically. This enhances the performance of all-sizes applications that need regular content updates.
• One-way data binding: React uses one-way data binding with an application architecture called Flux controls. React helps update the View for the user and Flux controls the application workflow.
• Support for bundling and tree-shaking: This helps minimize the end user’s resource load.
• Built-in server-side rendering (SSR) support: SSR offers speed gains in specific implementations.
  

commercetools is an API-first, microservice-backed, cloud-based eCommerce platform, popular for transforming enterprise websites into a modern, headless commerce architecture quickly. By separating the frontend presentation from the backend functionality, more functionality is provided for developers and a more seamless shopping experience is given to customers across all digital touchpoints. The platform offers a proprietary frontend names SUNRISE Starter Project and a robust API available named commercetools API. The API has a catalogue of 300+ endpoint which allow the platform to offer a modular, customizable architecture. While commercetools offers some the best APls among the leading eCommerce platforms, it does not run JavaScript or AMP server-side. To their credit, however, the platform recognizes that Sunrise Starter framework is limited and support free open-source third-party frameworks as well.‍

Moovweb XDN delivers instant loading React commercetools stores, in a matter of hours. On average, websites on Moovweb XDN see median speeds of 320ms, as measured by Largest Contentful Paint (LCP), a critical metric in Google's Core Web Vitals. While Moovweb XDN is a website accelerator, it's so much more than that. It is a Jamstack platform for eCommerce. Moovweb XDN makes websites faster for users and simpler for frontend developers to maintain. The platform was built specifically for large-scale, database-driven websites, such as eCommerce and Travel, and provides the following benefits: 

• 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 React 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 Moovweb XDN, your React commercetools store 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 the platform.

Check out Shaper Image, a commercetools website delivering sub-second page loads on the XDN. "Everyone here has commented on how blazing fast our site is" -Mihaela Mazzenga, CTO at Sharper Image. Kate Spade, Planet Blue, and Shoe Carnival are more impressive examples, representing the sub-500ms page speeds attainable for React stores on the XDN.

Moovweb is also a contributor to React Storefront, an open source eCommerce PWA framework which powers over billion dollars in eCommerce revenue a year. Check it out if you are looking to develop a blazingly fast site React eCommerce website. Or if you're currently deliver a React frontend, use the this guide to deploy your React application on Moovweb XDN and get sub-second loads in as little as 1 hour of work.