Sitecore Astro Verticals Demo Website: Running on Sitecore Demo Portal

Sitecore has an awesome service: Sitecore Demo Portal. It allows you to try or showcase Sitecore products. It has demos almost for every Sitecore product: CDP, Connect, Send, Personalize, Discover, OrderCloud, XM Cloud, Content Hub DAM, Content Hub ONE, Content Hub Operations, Search, Experience Platform, and Experience Manager.

And it allows you to use your code for some products. It is a great feature that allows you to have custom demos for your clients or prospects. Today we will use this feature and run Sitecore Verticals Astro Demo on Sitecore Demo Portal.

Repository

The starting point is the arrangement of your repository. Sitecore Demo Portal works with GitHub and Azure Repos. We recommend using GitHub unless your company is using Azure Repos internally. You need to fork or use as a template the Sitecore Verticals Astro Demo repository. This repository is based on the official Sitecore Verticals Next.js demo, but all pages and components use Astro instead of React. It allows you to compare performance, simplicity, and features for Next.js+React and Astro approaches. And make the right choice for your project.

Vercel

Sitecore demo headless website is deployed to Vercel. It means that you need to have a Vercel account. Vercel registration is straightforward.

If you use a team account for the GitHub repository then be aware that you will need a Vercel Pro plan. We recommend using personal GitHub accounts for this demo. It will allow you to try this demo for free.

Sitecore Demo Portal

Now, you have all the prerequisites before starting your Sitecore Verticals Astro Demo: GitHub and Vercel.

Log in to the Sitecore Demo Portal and click on Get a Demo. We need to select the XM Cloud demo.

Then there is a template selection, we need to select Vertical Demos (XM Cloud)

Use any name and description that you want. And click on the Customize button as we need to setup our GitHub repository and Vercel account.

Then we need to point our demo to the forked Astro Verticals Demo repository.

Configure Vercel token

When you are creating a new Token on Vercel, please make sure that you select SCOPE equal to Full Account. Otherwise, the Sitecore Demo Portal will not allow you to proceed.

Once you have configured GitHub and Vercel, you can proceed to the next step

You need to configure an automated shutdown and review all the settings that you used in previous steps. And you are ready to Deploy! Usually, deployment takes about 15 minutes.

While deployment is in progress, we need to configure the last setting: VERCEL_PROJECT_FRAMEWORK environment variable. Sitecore Demo Portal uses Next.js as the default value, but we need astro as we are deploying the Astro Demo.

Deployment to Vercel is the last step in the CI/CD pipeline. That is why, it is ok to add this environment variable during the build.

If you do everything according to the instructions, after a few minutes you will get the green header and links to Services, Financial, and Default websites and also links to the Sitecore XM Cloud Launchpad and Content Editor.

Conclusion

You can easily deploy and try the Sitecore Astro Demo project, and compare its powerful capabilities, better performance compared to Next.js, and simplicity by yourself. The configuration and deployment take less than half an hour! If you don’t have access to Sitecore Demo Portal or have additional questions, feel free to contact us. We will be glad to help!