Sitecore XM Cloud and Astro Web Framework

Anton Tishchenko
Anton Tishchenko
Cover Image for Sitecore XM Cloud and Astro Web Framework

Sitecore XM Cloud is a new Sitecore offering. It is a cloud-native, API-first, content and layout management system that can be scaled to meet the needs of any organization. You get all the power of Sitecore without the overhead of managing infrastructure. You can read more about it here.

Astro is a new web framework. It is blazing fast, contend-focused, UI-agnostic, zero JS by default. It is all-in-one framework for building modern websites. It is a perfect choice for any headless CMS. If you use content management system, most probaly your website is content focused. Then you need to use framework that was designed for content rich website. Astro is such framework. You can read more about it here. Also, we wrote about integration with "traditionally hosted" Sitecore here.

Sitecore XM Cloud and Astro Together

Sitecore XM Cloud is web framework agnostics. As true headless CMS, it doesn't provide any UI. It provides API that you can use with your favorite framework. The most popular is Next.js. But you can use any other framework. For example, Astro. Everything is very simple, when you need only to consume Sitecore XM Cloud API. Things become more complicated, if you want to support Experience Editor. In this case your framework should have edit API endpoint. This API endpoint should accept POST request with layout service data and return specific HTML with Sitecore editing tags. We have already implemented it for Astro! And it works with Sitecore XM Cloud in exact the same way as Sitecore, hosted elsewhere.

Try It Yourself!

We have created a demo project with Astro and Sitecore XM Cloud. We will run Sitecore XM Cloud locally, but you will need to run it on real Sitecore XM Cloud instance, it is also quite easily achievable.

  1. You will need to clone our Astro repository from here
  2. Open terminal in sitecore folder
  3. Initialize your Docker configuration with command .\init.ps1 -InitEnv -LicenseXmlPath c:\license\license.xml -Xmcloud. Note, that you will need to provide a valid license file. And you need to use Xmcloud parameter to initialize your Docker configuration with Sitecore XM Cloud.
  4. Start your Docker compose configuration with .\up.ps1 -Xmcloud command. Note, that you need to use Xmcloud parameter to start your Docker compose configuration with Sitecore XM Cloud.
  5. It will take few minutes to strart Sitecore XM Cloud.
  6. Open terminal in astro-sitecore-jss\packages\astro-sitecore-jss folder
  7. Run npm install command
  8. Open terminal in \astro-sitecore-jss\packages\astro-sitecore-jss-sample folder
  9. Run npm install command
  10. Run npm run dev command. This command will start Astro development server running locally on Node.js.
  11. Astro will recieve data from Sitecore XM Cloud running in Docker on https://astro.headless.localhost/ address. And Astro will be available on http://localhost:4321/ address.
  12. Sitecore XM Cloud will be available on https://xmcloudcm.localhost/ address. Once you open Experience Editor, it will call your local Astro instance using http://localhost:4321/ (http://host.docker.internal:4321/)

Want a Demo?

Feel free to contact us, if you want to see a demo of Sitecore XM Cloud and Astro integration. We will be happy to show you how it works and answer any questions you might have.