Unfolding guide to setup JSS Next.js App in XM Cloud

 

In this guide, I will explain how you can setup your Next.js app in XM Cloud using XM Deploy App. The main motive is to reach at a point where we will be creating and using Components created using XM Cloud component builder and along with that Custom Component in Next.js app

Recently, I have configured a new site, which un-covered some key points we need to consider while site setup.https://portal.sitecorecloud.io/

Prerequisites

  1. You should have a XM Cloud account with Organization Admin or Organization Owner role access.
  2. A Valid Sitecore XM Cloud License.
  3. A Current and Compatible version of Node.js.
  4. A suitable Integrated Development Environment (IDE) such as Visual Studio Code.
  5. Github or Azure DevOps working account.
  6. Git installed, so handle push and pull.

Setup Site in XM Cloud

So lets begin step by step.

Step 1: Login into your XM Cloud portal and Click on XM Cloud Deploy

 Step 2: Click on Create Project

 Step 3: Give a name to your project, Do worry if you mis-spelled anything. You can edit later as well.

Step 4: Select where do you want to keep your repository which XM Cloud Deploy app will create it for you

Step 5: First time you have to login into your Git Account and allow permissions to XM Cloud. Later Deploy App will remember your account, so it’s a one time process

Step 6: It’s a very important Step as you are creating your first environment, You can name it Dev, Development or whatever but its better to give proper name.

I have selected Auto Deploy “Yes” which means when changes are merged into main branch, the Deploy App will initiate file deployment process automatically. Later I will show you how you can configure it listen to changes for Develop Branch instead of Main branch.

Step 7: Review and Start Deployment

Step 8:  Magic Begins

Step 9: In this step you will be redirected to new window, showing you the project creation progress.

Step 10: Completion and Lets Checkout XM Cloud Interface

 

Step 11: Once you click on XM Cloud it will ask you to select 2 options, either select the predefined Basic Template or Start from scratch. But lets stop here.

 

At this point I wanted to show you what happened till now.

Step 12: Checkout Github Repository

Goto your Github Account, Now you will see a new repository created with the name you have given to your project.

This repository is private and now you should clone it on your system. Off course you can clone it later as well, so I better leave on you.

Step 13: Creating Site

Lets create our Site now, I will try to explain more about Site collection and Site but for now lets continue. On step 11, we had left with an option to Select from scratch, so will choose that option.

In the above screenshot, you are creating a site but it is asking you to selected OR CREATE a collection.

So logic is, a site collection can contain multiple sites in it. It’s same like multi-site concepts. So my inputs were like below:

And click on create.

Step 14: Progressing…

Step 15: Checkout Newly created Site:

You can see, the site collection is created and under it my first Site named Company-A is also created.

Till now it’s a blank site, it donot have any components, no headers, nothing.

Step 16: Checkout Content Editor

Click on Content and select Content Editor.

Content editor will open in new tab, so we will come back on this page later.

Step 17: Better understanding of collection and site in Content Editor:

In above snapshot you can now relate to step 13. While you are in content editor you can checkout other items as well as this site is created based on Helix Architecture.

Step 18: Goto Page Builder

Go to previous already open tab and click on Page Builder option when you will hover on the site box.

This will open in new tab as well.

Step 19: Checkout NextJs App

If you remember, in Step 12, I told you to clone the repo, if not done then please clone the project now.

Create a new folder with same site name and open that folder in visual studio code. Mark that folder as trusted as Visual studio should ask you while opening that folder.

This is your main branch.

Step 20: Reviewing

Till now we have got our Next.js project repo, Site Content Editor, Site Page Builder Interface.

If you login back to portal.sitecorecloud.io, the you should see your site

 

Conclusion:

In this blog, I tried to lay the foundation of NextJs App in Sitecore XM Cloud instance. In next blog, I will try to explain how you can configure your NextJs App with XM Cloud.

Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Resolving: Failed to start service Sitecore Marketing Automation Engine Error

Image
  Description: In this blog, I will try to show you that how you can solve the common issue you might face while installing Sitecore 10.4 version XP Single On Premises. Sitecore Download Link: https://developers.sitecore.com/downloads/Sitecore_Experience_Platform/104/Sitecore_Experience_Platform_104 During installation of Sitecore 10.4 on my new device I got below error:   Misconceptions : Since the installation gets interrupted and we get only one option to close the Sitecore Install Assistance tool, The common mis conception arises while re-installing the Sitecore is that should I provide new Solr service name again? And/or should I provide new Sitecore instance name? The answer is NO . You can simply skip Install Solr Service Step: Then on next window provide the same Sitecore prefix or instance name which you provided earlier: Sitecore will override new files on previously created folders or services. Point to remember: Before you re-start you...
Read more