Sitecore Astro Verticals Demo Website: Running Locally

We built the demo website with the Astro framework. We used the official Sitecore Next.js demo as a reference. The website looks the same and feels the same. You can easily run the Sitecore Astro Verticals Demo locally.

Prerequisites

You need to start by pulling code from the Astro Verticals Demo repository.

Running Front-end Application

One of the many benefits of the headless approach is that you can develop a website without having CMS locally. The same applies to Astro. If you have Sitecore hosted somewhere, you can access all data via API without installing it locally. If you have deployed Astro Verticals demo to the Sitecore Demo Portal you need to go to XM Cloud Deploy app / Developer Settings tab or to Vercel Setting / Environment Variables and get SITECORE_EDGE_CONTEXT_ID. Once you have this variable, you can put it into a local .env file. The presence of this variable tells the frontend application to use Sitecore Experience Edge. If you deployed the Sitecore backend elsewhere, and you don’t use Sitecore Experience Edge, you can configure SITECORE_API_HOST and SITECORE_API_KEY as usual for non-cloud setup.

Then you need to go to src/sxastarter folder, install NPM packages by npm I, and run Astro npm run dev.

Running Everything Locally

If you don’t have access to the Sitecore Demo Portal or don’t want to use it for some reason, you can still run this demo. The setup will be very similar to most modern Sitecore projects.

1. Firstly, you need to initialize your environment. (Add host configurations, configure license, configure SSL certificates, etc.) It is done by .\init.ps1 -InitEnv command.
2. Then you need to start the Docker compose configuration. It is done by command .\up.ps1. It will run
3. After a few minutes you will get a few websites
   1. https://xmcloudcm.localhost/ Sitecore CM instance
   2. https://basic.sxastarter.localhost.astro/ Basic Astro website
   3. https://financial.sxastarter.localhost.astro/ Financial Astro website
   4. https://services.sxastarter.localhost.astro/ Services Astro website
   5. https://basic.sxastarter.localhost.astro/ Basic Next.js website
   6. https://financial.sxastarter.localhost.astro/ Financial Next.js website
   7. https://services.sxastarter.localhost.astro/ Services Next.js website

Editing host by default is configured to use Astro website. You can see all demo editing pages scenarios, and how they work with Astro. They work exactly the same as with Next.js. Because the hidden chromes output that Astro JSS adds is exactly the same that you got for Next.js JSS.

All websites are running inside Docker containers. But, if needed you still can easily run them locally. Add the required environment variables and you are ready to go!

Conclusion

That was a description of how to run the Astro Demo locally. It is short, but there is actually nothing to add. It is quick and straightforward. If you are interested in making your website faster with Astro JSS or cutting the costs on development then it is worth trying and evaluating it! And feel free to reach us if you have any questions.