So we've covered 2 parts: How to Set Up Docker for XM Cloud Dev and Full-Stack Local XM Cloud Dev Environment Tutorial.

This Full-stack XM Cloud Development Guide is written by Yaochang Liu, a Sitecore Content Hub Administrator Certification winner and experienced developer from Qedge. Yaochang, we really appreciate your effort!

So, let's get started.

Component Development Process

Basic Process

1. Create a Datasource Template

 /sitecore/templates/Project/Components/Demo/Demo1Component

2. Create a Parameters Template

Create a Parameters Template and build Standard Values

/sitecore/templates/Project/Components/Demo/Rendering Parameters/Demo1 Parameters

3. Create a JSON rendering

/sitecore/layout/Renderings/Project/Play/Demo Component/Demo1

Edit the following fields:

• Parameters Template: Select the Parameters Template created in step 2.
• Datasource Template: Select the Datasource Template created in step 1.

4. Create Available Rendering

Add the JSON Rendering created in Step 3 to the corresponding Available Rendering

 /sitecore/content/Play/Play/Presentation/Available Renderings/Demo Component

5. Create Variants

 /sitecore/content/Play/Play/Presentation/Headless Variants/Demo1

6. Create Variant Definition

/sitecore/content/Play/Play/Presentation/Headless Variants/Demo1/Default

7. FE coding

The file name should be consistent with the Component Name in step 3 of the JSON rendering and should not contain any spaces.

import React from 'react';
import {
    Image as JssImage,
    Text,
    ImageField,
    TextField,
} from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
    Image: ImageField;
    Title: TextField;
}

type Demo1Props = {
  params: { [key: string]: string };
  fields: Fields;
};

const Demo1DefaultComponent = (props: Demo1Props): JSX.Element => (
    <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
            <span className="is-empty-hint">Demo1</span>
        </div>
    </div>
);

export const Default = (props: Demo1Props): JSX.Element => {
    const id = props.params.RenderingIdentifier;
    if (props.fields) {
        return (
            <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
                <div className="component-content">
                    <div className="field-promoicon">
                        <JssImage field={props.fields.Image} />
                    </div>
                    <div className="promo-text">
                        <div>
                            <div className="field-promotext">
                                <Text field={props.fields.Title} />

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        );
    }

    return <Demo1DefaultComponent {...props} />;
};

Note: Ensure that the export const Default is consistent with the name "Default" in step 6 of the Variant Definition.

Advanced Techniques

Nest Components within Components (static placeholder) and/or using multi-variant.

1. Create a Placeholder

/sitecore/layout/Placeholder Settings/Project/Play/Demo1

2. Update Rendering

Modify the Layout Service Placeholders in the JSON Rendering.

Select the Placeholder added in the previous step.

3. Set placeholder restrictions

Add placeholder to the appropriate path

 /sitecore/content/Play/Play/Presentation/Placeholder Settings/Demo1/Demo1

4. Add a Variant Definition

/sitecore/content/Play/Play/Presentation/Headless Variants/Demo1/WithSub

5. FE coding

import React from 'react';
import {
    Image as JssImage,
    Text,
    ImageField,
    TextField,
    Placeholder,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

interface Fields {
    Image: ImageField;
    Title: TextField;
}

type Demo1Props =
    ComponentProps & {
        fields: Fields;
    };

const Demo1DefaultComponent = (props: Demo1Props): JSX.Element => (
    <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
            <span className="is-empty-hint">Demo1</span>
        </div>
    </div>
);

export const Default = (props: Demo1Props): JSX.Element => {
    const id = props.params.RenderingIdentifier;
    if (props.fields) {
        return (
            <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
                <div className="component-content">
                    <div className="field-promoicon">
                        <JssImage field={props.fields.Image} />
                    </div>
                    <div className="promo-text">
                        <div>
                            <div className="field-promotext">
                                <Text field={props.fields.Title} />

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        );
    }

    return <Demo1DefaultComponent {...props} />;
};

export const WithSub = (props: Demo1Props): JSX.Element => {
    const id = props.params.RenderingIdentifier;
    if (props.fields) {
        return (
            <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
                <div className="component-content">
                    <div className="field-promoicon">
                        <JssImage field={props.fields.Image} />
                    </div>
                    <div className="promo-text">
                        <div>
                            <div className="field-promotext">
                                <Text field={props.fields.Title} />
                                <h1>VVV</h1>
                                <div className="row">
                                     //The following is for nesting components
                                    <Placeholder name="demo1" rendering={props.rendering} />
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        );
    }

    return <Demo1DefaultComponent {...props} />;
};

Styles

1. Add Styles

Add the JSON Rendering to the Allowed Renderings of the corresponding Style

/sitecore/content/Play/Play/Presentation/Styles/Demo1/Demo1 large

2. FE coding

Add scss

@import "@sass/abstracts/vars";
@import "@sass/abstracts/mixins";

.large-css {
    max-width: 960px;
    padding: 0;
    border-top-width: 3px;
    border-style: solid;
    overflow: visible;
    background-color: red;
}

3. Preview in Pages

The Sitecore Experience Awards

The Sitecore Experience Awards (SEA) recognize Sitecore customers and partners who have transformed their organizations in innovative and impactful ways.

Judges from Sitecore evaluated a great number of submissions and recognized implementations that deliver breakthrough customer experiences while also providing significant business value. QEdge, the Sitecore implementation partner in the Asia-Pacific region, received this award for its technical support of a renowned Hotel Group's official website digital upgrades.

 “At Sitecore, we're thrilled to be able to commend our customers and partners in this way, celebrating how truly innovative all have been over the last year,” said Lee Miles, Chief Customer Success Officer, Sitecore.  “Here's to another 12 months of great work, transformative collaboration, and shared victories!”

Digital Experiences Brought to New Heights

QEdge was brought on by the renowned Hotel Group to completely reimagine and upgrade the official website.

With our help, the Hotel Group has successfully upgraded Sitecore to a newer version. This immediately elevated the content creation capabilities to new heights while developers could seamlessly integrate content across platforms.

The end result was a faster, more engaging website optimized for customers. The Hotel Group gained an agile digital platform to create consistent, seamless experiences. The transformed digital presence triggered increased bookings and repeat visits and ultimately drove the brand's digital growth and innovation.

QEdge: A Decade-Long Sitecore Innovator

With over 15 years of experience in Sitecore implementation and maintenance, QEdge has an extensive legacy of helping brands evolve through digital transformation. QEdge's clients including Cochlear, Lincoln Electric, Suez Asia, Brother, and more well-known enterprises, all benefit from Sitecore Content Management, Experience Platform, Commerce, and Marketing tools.

As an agile solutions provider focused on crafting lasting customer connections, QEdge continues to push the boundaries of what's possible on the Sitecore platform. The SEA 2023 Honorable Mention for the Hotel Group's official website upgrades reinforces QEdge's commitment to shaping the future of composable digital experiences.

Looking ahead, QEdge is well-poised to empower more ambitious organizations to creatively harness Sitecore and achieve their vision. The SEA recognition underscores that QEdge has both the technical chops and strategic vision to drive success.

This article provides an overview of the Sitecore Solution Partner program, the benefits of becoming a partner, the certification process, and tips for getting the most value out of a Sitecore partnership. Whether you are just learning about Sitecore or are ready to take your partnership to the next level, this guide will provide useful insights and best practices.

Overview of the Sitecore Solution Partner Program

Sitecore developed the Solution Partner program to provide agencies and digital technology companies with the training, support, and certification needed to successfully sell and implement the Sitecore Experience Platform (XP).

The program has three tiers: Silver, Gold, and Platinum. Partners at any tier enjoy benefits like:

• Access to Sitecore sales and technical support resources
• Discounts on Sitecore products, services, and training
• Listing in the Partner Finder directory on Sitecore's website
• Use of Sitecore partner branding and marketing assets

Higher tiers offer additional advantages like dedicated alliance managers, additional discounts, and invitations to exclusive Sitecore events.

To gain Solution Partner status, companies must meet certain criteria for the tier they apply for such as having Sitecore-certified developers on staff, a Sitecore practice with past implementations, and annual Sitecore revenues or sales quotas. Partners must renew their status annually.

Benefits of Becoming a Sitecore Solution Partner

The Certification Process

To gain Solution Partner status, agencies must go through a formal certification process that verifies their level of Sitecore expertise and implementation experience. The requirements and timelines for certification vary based on the membership tier being applied for.

The baseline technical qualification for all tiers is to have earned the Sitecore XM Developer Certification. This involves passing one exam that covers topics like Sitecore architecture, template development, publishing, analytics, security, and workflow.

At the higher Platinum, partners must also have Sitecore-certified solution architects on staff capable of leading complex implementations. Earning an MVP (Most Valuable Professional) designation is also encouraged.

Beyond technical qualifications, partners must demonstrate their Sitecore implementation experience based on the tier requirements:

How to become a Sitecore Silver Partner, Gold Partner, or Platinum Partner?

According to Sitecore Official, all partners are expected to fulfill these minimum enablement and delivery requirements to ensure customers are receiving the best possible outcomes with their Sitecore solutions.

Certification renewals are required annually to maintain partner status and access level-based benefits. Renewals involve submitting updated staff certifications, customer references, and revenue/sales figures.

Tips for Getting Value from a Sitecore Partnership

Here are some best practices Sitecore recommends for digital agencies to maximize the value of their Solution Partner membership:

• Have each client account managed by at least one Sitecore-certified employee who can guide projects using Sitecore best practices.
• Take advantage of free partner training and workshops to keep expanding your team's Sitecore skillsets. Maintaining active certifications ensures your agency provides optimal expertise.
• Get hands-on with new Sitecore capabilities early in partner previews and workshops. This allows you to provide valuable strategic input to clients on what upcoming innovations can address their needs.
• Participate in the Sitecore community via online forums, local meetups, and the annual Sitecore Symposium to connect with peers and Sitecore product teams.
• Leverage available partner toolkits and launch kits to demonstrate Sitecore solutions to prospects using pre-built templates, demo materials, and presentation decks.
• Promote your Sitecore partnership visibly on your company website, sales materials, staff bios, and proposals to maximize credibility. Feature client success stories.
• Give product feedback to Sitecore regularly based on your hands-on implementation experiences so the platform continues to improve in alignment with client needs.

Conclusion

Becoming a certified Sitecore Solution Partner enables digital agencies like QEdge Digital Solutions to gain strategic advantages that help win new business, deliver exceptional customer experiences, and boost profitability on Sitecore projects.

QEdge’s LinkedIn Page

By making the most of program benefits like early access to new capabilities, discounted licenses, and training workshops, QEdge has continually expanded its Sitecore expertise to offer end-to-end guidance from platform evaluation through post-launch optimization.

Providing excellent customer experience is key to thriving and competing, and our tech stacks are becoming increasingly important in doing so. It is more crucial than ever for brands to have technology that can continuously deliver as customer expectations and tastes change. It's harder to compete with slow, unreliable, and underperforming websites, which harms the user experience.

This article will discuss the advantages of a composable digital experience platform (DXP) strategy and how it may help your tech stack be future-proof. The martech scene has a plethora of tools at its disposal. The conventional content management system (CMS) that marketers are so accustomed to has developed into DXPs.

Sitecore's Transition to Composability

Traditionally, DXP solutions took a monolithic approach offering bundled capabilities. However, modern digital businesses demand greater flexibility and integration of best-of-breed point solutions. Composable architectures allow discrete services to be assembled via APIs based on unique organizational needs.

Recognizing this trend, Sitecore embarked on an acquisition strategy to expand its toolset. Companies like Moosend, Four51, Reflektion, and Boxever were integrated to provide independent offerings in areas like marketing automation, commerce, personalization, and customer data. These services can now plug into any technology stack as standalone, API-driven options.

Sitecore's Composable DXP Products

Let's examine some key products available through Sitecore's composable approach:

• Sitecore Experience Manager Cloud is a flexible headless CMS enabling fast development and integration of best-in-breed services.
• Sitecore Send provides personalized cross-channel email marketing automation via a cloud-native interface.
• Sitecore Personalize leverages customer data for 1:1 personalization through real-time delivery of relevant experiences.
• Sitecore Discover applies AI to power personalized product recommendations and search capabilities.
• Sitecore OrderCloud is a commerce solution unifying order management across channels via APIs.
• Additional tools include the Sitecore CDP, Content Hub, and Symphony for content management needs.

Benefits of a Composable DXP Strategy

The Differences Between A CMS And A DXP

This chart provides an overview of the general differences between a CMS and a DXP. CMS platforms primarily focus on content management and delivery, while DXPs offer a broader range of tools and capabilities to manage the complete digital experience, including personalization, e-commerce, marketing automation, and customer data management. DXPs are typically more robust and suitable for larger enterprises with complex digital experience requirements.

What Lies Ahead for Sitecore Customers

With Sitecore's DXP transition ongoing, adopting strategic integrations now allows customers to gain competitive advantages. Experienced partners can help existing implementations fully leverage available capabilities while navigating interim changes.

As the shift towards complete composability occurs, independent plug-and-play services will give organizations even more flexibility to shape technologies around their specific needs. Those who actively engage with Sitecore's evolution position themselves to smoothly operate in an API-first future.

What’s Next?

Let's recap. Digital identity, strategy, and engagement are built on a CMS. A DXP is a comprehensive set of tools that delivers tailored interactions that scale and connect — over any channel and in any language.

Reach out to the helpful staff at QEdge if you're interested in learning more about adopting a composable DXP strategy for your company. We create Sitecore experiences that stand the test of time and execute marketing automation campaigns that outperform the competition. We can guide your Sitecore projects to success because of our years of experience and standing for Sitecore thought leadership.

QEdge's LinkedIn Page

The Sitecore Content Hub Developer Certification covers advanced topics like customizing the Content Hub interface, developing custom workflows, integrating with external systems via APIs, developing connectors, and more. By attaining this certification, QEdge's developers have shown they possess the skills needed to handle complex implementations and integrations using the Content Hub.

List of 12 QEdge Team Members Who Got Sitecore Content Hub Developer Certification

About QEdge and Sitecore Content Hub Developer Certification

QEdge's LinkedIn Page

Having certified Sitecore Content Hub developers provides significant advantages for QEdge and its clients:

Cutting-Edge Expertise

The Sitecore Content Hub Developer exam tests a wide range of practical skills needed for advanced Content Hub projects. By passing this exam, QEdge's developers have proven they are up-to-date on the latest Content Hub capabilities and development best practices. This ensures they can deliver innovative solutions that leverage the full power of the platform.

Increased Implementation Speed

Certified Sitecore Content Hub developers have hands-on experience completing real-world development tasks on the platform. This allows them to quickly turn requirements into working code. Because they already understand the Inner workings of Sitecore Content Hub, certified developers can deliver solutions faster.

Complex Integrations Simplified

Connecting Content Hub to external systems can be challenging without deep knowledge. With certified Sitecore developers who understand APIs, connectors, and integrations, QEdge can handle even the most complex Content Hub integration projects with ease. Customers can count on a smooth integration process and accelerated content sharing.

Better Collaboration with Sitecore

Sitecore recognizes certified developers as experts in the platform. This makes it easier for QEdge to collaborate with Sitecore on innovative and technically challenging projects that require tight coordination between their developers and ours. As a Sitecore gold implementation partner, our shared knowledge benefits customers.

Trusted Content Hub Expertise

The Sitecore Content Hub Developer certification validates deep platform expertise through hands-on testing. Customers can trust that certified developers truly understand the technology and can deliver high-quality solutions optimized for their needs. The certification provides assurance of their advanced skills.

Unlocking Content Hub's Full Potential

Certified Sitecore developers understand how to exploit Content Hub's capabilities to the fullest. They can deliver solutions that take advantage of the platform's latest features and functionality. Customers benefit from innovations that solve their specific business challenges.

With twelve Sitecore Content Hub certified developers on staff, QEdge is positioned to deliver the most advanced Content Hub solutions on the market. Their expertise will allow us to handle intricate platform customizations, complex integrations, and innovative feature development. Customers can expect an optimized experience from planning through implementation and beyond.

To learn more about QEdge's Content Hub development services, contact our team today. We're ready to leverage our certified experts to unlock the full potential of the platform for your organization. With seasoned Sitecore developers on staff, we have the knowledge to translate your goals into reality.

About Sitecore Content Hub

Sitecore Content Hub is a headless content management system that decouples content creation from delivery. It allows omnichannel content to be managed, organized, and delivered to any platform from a single source.

Key capabilities include:

• Content Modeling - Flexible modeling tools allow both marketers and developers to structure content types and fields. This simplifies omnichannel content planning.
• Modular Content - Content components can be assembled into flexible content fragments for omnichannel reuse. Authors craft content once and reuse it anywhere.
• Workflows - Sophisticated workflows streamline the content review, approval, and publishing process across teams, ensuring content is high-quality.
• Personalization - Content can be personalized for different audiences and channels based on business rules and user data.
• APIs and Integrations - APIs and integration tools allow Content Hub to connect with other martech and external systems for seamless omnichannel experiences.
• Global Content Sharing - Global teams can collaborate on content in the platform while adhering to region-specific regulations on content governance.
• Experience Optimization - Experience optimization tools provide insights that allow teams to continually refine content performance.

With its headless architecture, Content Hub is highly extensible, scalable, and device-agnostic. It decouples content from delivery to allow omnichannel reuse. Certified Sitecore developers are best positioned to exploit these capabilities for innovative customer experiences.

QEdge's LinkedIn Page

Speed optimization is vital for Sitecore websites. Organizations may reinforce their brand, increase conversions, and improve their SEO results by slashing crucial seconds from load times. Understanding why speed matters and being willing to continuously optimize performance utilizing Sitecore's built-in tools and third-party solutions are the first steps on the road to a quicker Sitecore website.

Why Site Speed Matters

Faster websites provide substantial benefits:

Clearly, every organization needs a fast website. Follow these tips to optimize speed for your Sitecore implementation.

Sitecore Slow Performance? Here's How to Speed it Up

Tips to Speed Up Your Sitecore Website

Optimizing Speed is an Ongoing Process

Improving site speed requires continuous monitoring, testing new techniques, and identifying the next bottleneck to resolve. With an optimized Sitecore implementation, you can deliver the fast performance that users expect while also boosting your branding, conversions, and ROI.

The pursuit of faster website speed is an ongoing task with no clear endpoint. New methods are developed as technology advances to cut further milliseconds.

Your Sitecore site will be on the road to speed optimization excellence if you regularly assess your options, evaluate real-world performance, and fix the most significant bottlenecks. A lightning-fast website boosts user satisfaction, builds brand recognition, and spurs revenue development through more conversions and improved SEO. Implement these suggestions to give your Sitecore site an advantage because speed is the new competitive edge.

QEdge’s LinkedIn Page

By embracing the new Horizon content editor, Shangri-La Hotel Group has empowered its authoring team with a modern and efficient editing interface. The improved speed, usability, and functionality of the content editor enable the team to manage a vast amount of omnichannel content seamlessly. This enhancement facilitates quicker updates, easier content customization, and the ability to deliver personalized experiences to customers across various touchpoints.

Here is the detailed information:

The Challenges

Shangri-La Hotel Group has enhanced the customer experience in China through digital innovations, including Headless CMS implemented using Sitecore 9. Shangri-La uses it to manage a large amount of omnichannel content, such as hotels, restaurants, events, offers, etc. With the expansion of their digital marketing strategy in China, the old content editor UI in Sitecore 9 no longer meets their authoring team's growing editing requirements for speed and efficiency. They are eager to replace the senior content editor with a modern one, which Sitecore can provide but only in Version 10 or higher. Therefore, the brand must upgrade Sitecore to 10.2.

The Solutions and Implementation

Upgrading Sitecore to another significant release is never easy. However, QEdge Digital Solutions has completed many Sitecore upgrade projects and developed our own Sitecore upgrade methodology. This includes analyzing the existing Sitecore website, planning the upgrade process, conducting the upgrade pilot test, and performing the final implementation of the upgrade.

Outcome

QEdge Digital Solutions played a crucial role in the successful implementation of the upgrade. With our help, Shangri-La has successfully upgraded Sitecore from Version 9 to Version 10.2, and the new Horizon content editor delivered significant performance and experience improvements in content editing without interrupting business activities. This takes the brand's content editing experience to a new level and ultimately drives the brand's digital growth and innovation.

Final Thoughts on Shangri-La Hotel Group Official Website Upgrade

The partnership with QEdge Digital Solutions proved instrumental in the successful implementation of the upgrade. Their expertise in Sitecore deployment and upgrade projects, along with their tailored approach and proven methodology, ensured a smooth transition and minimal disruption to the group's business activities. The collaboration between Shangri-La Hotel Group and QEdge Digital Solutions exemplifies the importance of choosing the right implementation partner to achieve digital goals effectively.

The outcome of the website upgrade is a testament to Shangri-La Hotel Group's commitment to innovation and delivering exceptional digital experiences. The new Horizon content editor streamlines content management processes and enables the group to leverage the advanced features and capabilities offered by Sitecore Version 10.2. This, in turn, drives the brand's digital growth, fosters innovation, and positions Shangri-La as a leader in the luxury hospitality industry.

Furthermore, the upgraded website enhances the overall customer experience by providing a user-friendly interface, seamless booking functionality, rich multimedia content, and personalized recommendations. These features create a compelling and immersive online experience for potential guests, enticing them to explore and ultimately book a stay at one of Shangri-La's luxurious properties.

Overall, the Shangri-La Hotel Group's official website upgrade demonstrates the group's commitment to leveraging technology to deliver exceptional service and experiences to their customers. The successful collaboration with QEdge Digital Solutions, the adoption of the new Horizon content editor, and the resulting benefits all contribute to positioning the group at the forefront of the industry. As Shangri-La continues to innovate and enhance its digital presence, guests can expect even more personalized, seamless, and memorable experiences in the future.

QEdge's LinkedIn Page

While Sitecore dazzles with its ability to create captivating customer journeys, Microsoft Azure steps in as the majestic stage where this digital symphony unfolds. We're about to embark on a delightful adventure, blending humor and professionalism to guide you through the enchanting world of Azure DevOps for Sitecore.

What Is Azure DevOps and How Can It Revolutionize Your Development Process?

The Power of Integration

One of the key advantages of using Sitecore with Azure DevOps lies in the seamless integration between the two platforms. Azure DevOps provides a comprehensive set of tools and services that enable teams to plan, build, test, and deploy Sitecore applications with unparalleled ease. By leveraging Azure DevOps, businesses can streamline their development workflows, reduce manual efforts, and minimize the risk of errors.

Enhancing Collaboration and Productivity

Azure DevOps empowers Sitecore development teams to collaborate more effectively, regardless of their location. With features like Azure Boards for agile project management, Azure Repos for version control, and Azure Pipelines for continuous integration and delivery, teams can work together seamlessly, share code, and automate builds and deployments. This collaborative environment fosters productivity, enables faster issue resolution, and accelerates time-to-market for Sitecore projects.

Scalability and Reliability

Sitecore applications often require robust infrastructure to handle high traffic and ensure optimal performance. Azure DevOps, in conjunction with Azure's scalable and reliable cloud platform, provides businesses with the resources they need to scale their Sitecore deployments effortlessly. With Azure DevOps, organizations can easily provision and manage environments, monitor performance, and ensure high availability, without the need for extensive infrastructure management.

Cost Optimization

Implementing and maintaining a reliable development and deployment pipeline can be costly, especially for businesses with limited resources. However, Azure DevOps offers a cost-effective solution. By leveraging the platform's integrated services and pay-as-you-go pricing model, businesses can significantly reduce their development and infrastructure costs. Additionally, the automation capabilities of Azure DevOps minimize manual efforts, further optimizing resource utilization and lowering overall expenses.

Continuous Innovation

Azure DevOps enables Sitecore development teams to embrace continuous innovation by providing access to the latest features and updates. With regular releases and a transparent product roadmap, Azure DevOps ensures that businesses can leverage the most advanced tools and technologies to build cutting-edge Sitecore solutions. This continuous innovation mindset helps organizations stay competitive and deliver exceptional customer experiences.

Conclusion

The synergy between Sitecore and Azure DevOps is transforming the way businesses approach Sitecore development. By harnessing the power of integration, collaboration, scalability, cost optimization, and continuous innovation, organizations can streamline their development processes, accelerate time-to-market, and deliver outstanding digital experiences. The combination of Sitecore and Azure DevOps provides businesses with a solid foundation for success, enabling them to stay ahead of the curve and exceed customer expectations.

QEdge LinkedIn Page

This Docker for XM Cloud Dev Tutorial is written by Yongmao Yu, a Sitecore Content Hub Administrator Certification winner and experienced developer from Qedge.

Yongmao, we really appreciate your effort!

So, let's get started.

1. Dos and Donts while running Local Docker

Check for port conflicts with Solr on your local machine. Adjust port mapping in the docker-compose.yml file according to the actual situation.

Check the ports occupied by local solr

Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess

Stop the service that occupies the port

Stop-Service -Name "<the name of your service>"

local IIS service needs to be stopped

check if port 443 is occupied

Get-Process -Id (Get-NetTCPConnection -LocalPort 443).OwningProcess

Since iis occupies port 443 , the local iis service needs to stop

iisreset /stop

Do Not Run VPN

2. Run Docker

.\init.ps1 -InitEnv -LicenseXmlPath "<C:\path\to\license.xml>" -AdminPassword "<desired password>"

.\up.ps1

Now, Let's pull data from the remote to the local docker

3. Item serialization configuration

Add serialization configuration file

{
    "$schema": "../../.sitecore/schemas/ModuleFile.schema.json",
    "namespace": "Play",
    "items": {
        "includes": [
            {
                "name": "xaplaceholder",
                "path": "/sitecore/layout/Placeholder Settings/Foundation/JSS Experience Accelerator/Placeholder Settings",
                "allowedPushOperations": "CreateUpdateAndDelete"
            },
            {
                "name": "placeholder",
                "path": "/sitecore/layout/Placeholder Settings/Project",
                "allowedPushOperations": "CreateUpdateAndDelete"
            },
            {
                "name": "rendering",
                "path": "/sitecore/layout/Renderings/Project",
                "allowedPushOperations": "CreateUpdateAndDelete"
            },
            {
                "name": "templates",
                "path": "/sitecore/Templates/Project",
                "allowedPushOperations": "CreateUpdateAndDelete"
            },
            {
                "name": "contentRoot",
                "path": "/sitecore/content/Play",
                "allowedPushOperations": "CreateUpdateAndDelete"
            },
            {
                "name": "media",
                "path": "/sitecore/Media Library/Project/Play",
                "allowedPushOperations": "CreateUpdateAndDelete"
            }
        ]
    }
}

Commands( from logging in XM Cloud to connecting to the current project/environment after login)

//Login
dotnet sitecore cloud login
//get project list
dotnet sitecore cloud project list
//obtain envirment based on project id
dotnet sitecore cloud environment list --project-id <project-id>
//connect
dotnet sitecore cloud environment connect -id <environment-id> --allow-write true

After a successful connection, you can see that .sitecore/user.json will have an endpoint after successful connection

Connect to docker local environment (local environment)
Note: before running the local connection command, you need to run .\up.ps1 to start the docker service and make sure that https://xmcloudcm.localhost/ can be accessed normally, and you need to turn off VPN

The following is the Sitecore local environment before syncing the online XM Cloud

dotnet sitecore connect --ref xmcloud --cm https://xmcloudcm.localhost --allow-write true -n local

After a successful connection, the local endpoint will be added to user.json

After configuring remote (xmc-test-demo) and local (local) nodes, you can run the sync command to sync the rermote and local items

dotnet sitecore ser pull -n "xmc-test-demo"
dotnet sitecore ser push -n "local"

After the synchronization is complete, the Play node will be added to the local Sitecore's content tree

It should be noted that when executing the synchronization command, you need to close the VPN software, otherwise the command to synchronize to the local docker will report an error:

QEdge LinkedIn Page

This Full-stack XM Cloud local development Tutorial is written by Yaochang Liu, a Sitecore Content Hub Administrator Certification winner and experienced developer from Qedge.

Yaochang, we really appreciate your effort!

So, let's get started.

How To Create A Local Sitecore XM Environment For XM Cloud

I'd like to share our experience and SOP of how to establish the Full-stack XM Cloud local development environment in this article.

Total Time: 1 hour

1. Preparation and Docker Installation

Please refer to How to Set up Docker for XM Cloud Dev and then go on.

2. Create A New Rendering Host Item

Create new item /sitecore/system/Settings/Services/Rendering Hosts/Local
Server-side rendering engine endpoint URL http://rendering:3000/api/editing/render
Server-side rendering engine application URL http://rendering:3000/

3. Edit Site Item

Change the Predefined application rendering host to Local under the item path /sitecore/content/Play/Play/Settings/Site Grouping/Play

4. Set Up .env.local

Open FE root folder of the project src>sxstarter and duplicate the file .env and then rename it to .env.local

5. Edit .env.local

JSS_EDITING_SECRET=Auaroi0cAkwcL1m7oSkyVXzK0WhXUiSxN27Uo6XEOI5Si6rlbfR4l2pXk0pGUUOc
SITECORE_API_KEY=F5B0E4FE-0A60-475C-8995-900BB4846BE9
GRAPH_QL_ENDPOINT=https://xmcloudcm.localhost/sitecore/api/graph/edge
JSS_APP_NAME=Play
NODE_TLS_REJECT_UNAUTHORIZED=0
You can get the value of
JSS_EDITING_SECRET
from
JavaScriptServices.ViewEngine.Http.JssEditingSecret (https://xmcloudcm.localhost/sitecore/admin/ShowConfig.aspx)

You can get the value of SITECORE_API_KEY from the Item ID of /sitecore/system/Settings/Services/API Keys/xmcloudpreview

Remove comments to enable debug
DEBUG=sitecore-jss:*,-sitecore-jss:layout
and start debugging

6. Visit Rendering Host

In "sxstarter", run
npm install
npm run start:connected
and then visit http://localhost:3000

7. Query Data from Graph QL ui

https://xmcloudcm.localhost/sitecore/api/graph/edge/ide
query {
# path can be an item tree path or GUID-based id
item(path: "/sitecore/content/Play/Play/home", language: "en") {
rendered
}
}
{"sc_apikey":"f5b0e4fe-xxxx-xxxx-xxxx-900bb4846be9"}

8. Link Pages To The Local XM Cloud Instance

Visit https://pages.sitecorecloud.io/
Add the following entry to it
Key:
Sitecore.Pages.LocalXmCloudUrl
Value:
https://xmcloudcm.localhost/
Refresh the page to check it out!

QEdge's LinkedIn Page