Pre-Build and Go-Live Best Practices Checklist

Welcome to the start of your Composable Storefront journey! This checklist summarizes key points that can have a major impact on your project timeline. By focusing on these four best practices, you'll be better equipped to navigate the complexities of building, launching, and monitoring a successful Progressive Web App (PWA) Kit site and avoid common pitfalls. Use this checklist to plan for a smooth and successful deployment!

Unless otherwise stated, all of the points in this checklist apply to sites that are either built 100% on Composable Storefront or phased headless rollouts.

You're in the driver's seat when it comes to customization. Understand the scope of the customization required to meet your business needs. Just remember, a highly customized site requires more effort, as described in these examples.

  • Familiarize yourself with the design and functionality available in our Retail React App. You need to build any functionality that isn’t available in the Retail React App.
  • Use existing React components as much as possible. PWA Kit uses React, so you have access to the React ecosystem of components. If you’re doing something custom, see if there’s a Chakra component for it. If there isn’t, look for an open source version. If there isn't an open source version, build the component yourself.
  • Verify that our APIs support your required custom functionality and return the data that you need. If our APIs don’t, you can:
    • Create a custom API to return the data; or
    • Extend the API response using a hook
  • Confirm that your site’s cartridges and integrations work with a headless implementation. To use them in a PWA Kit site, you can expose their functionality using custom APIs or hooks.

Lay a solid foundation for a stable and scalable site by following these steps.

  • Decide how many production Managed Runtime (MRT) environments you’ll have. Having more environments gives you more control. But the more environments you have, the more operationally complicated it is to manage them all. For example, if you have five brands that are all served from the same MRT environment, you always need to update them together. Having fewer environments means less operational overhead. See Managed Runtime Overview.
  • Decide whether to use our embedded content delivery network (eCDN) or a third-party CDN. See When to Use a Third-Party CDN. If you decide to use a third-party CDN, see your vendor’s documentation for details.
  • To optimize site performance, factor in recommended practices and rate limits when you make API calls. See the Considerations for using the Managed Runtime API.
  • Decide on your URL strategy. Most customers choose to keep their existing URLs. Make a plan to redirect any of your current URLs that won’t exist on your new site. Sign up for Google Search Console tools or other ranking tools to monitor the effect of your rollout on your SEO ranking. See Routing.
  • Decide on the goals, scope, and timeline for your hybrid (phased headless) rollout. Keep in mind that the longer your site is in hybrid mode, the more time you have to spend on the operating complexity involved. Set a due date for transitioning to a 100% Composable site. See Phased Headless Rollouts.

Apply these techniques to optimize your site's efficiency and user experience.

  • Review the server-side rendering of entry pages (homepage, category listing pages, product listing pages, and product detail pages) by appending the ?__server_only parameter to your URLs. Confirm that your server-rendered pages have enough data for crawlers and that the layout shift between server and client is small (ideally non-existent). This can help to improve your SEO ranking, confirm that your entry pages can load quickly on mobile devices, and improve shopper experience.
  • Set up performance testing using Lighthouse CI. Start performance testing mid-way through your implementation. This allows you to identify and correct any performance regressions (compared to your current site) long before your PWA Kit site launch.
  • Set up continuous code deployment to a non-production MRT environment. From early on in your development work, start testing your code deployed to MRT to confirm that your site functionality works as expected. That way you can avoid costly rework later. See Automation Users.

Plan to use any of these tools to consistently monitor your site performance. Also verify that the data generated by these tools is correct based on your expected results.

  • With Log Center, you can review errors and metrics. Set up notifications so you can find out when your storefront is functioning abnormally and investigate.
  • Use Active Data to monitor your site’s metrics. This can help you analyze shopper behavior so you can enhance the shopper experience and optimize product offerings to drive sales growth.
  • B2C Commerce Reports & Dashboards provide data that you can use to identify trends over time and to make smarter business decisions based on your B2C Commerce data.

Review the rest of the recommended developer workflow for building a site on Composable Storefront. See Get Started with Composable Storefront.