Skip to main content

Sitecore JSS create your first component

Sitecore JSS create your first component 

In the previous blog, JSS setup has been done. Now it’s time to create your first component, apply the newly created component into a route and test it in disconnected mode.

Scaffold the component

To scaffold new component, JSS sample app providing a script which allows you to scaffold new component easily. This script is available in “/scripts/scaffold-component.js” you can customize it as per your requirement.

Run below command to scaffold component, type jss scaffold and your component name like HeroBanner. This command will generate all files which are required.

 jss scaffold HeroBanner

Sitecore JSS create your first component

After the scaffold HeroBanner component you can see below files has been added into your JSS application:

  • /sitecore/definitions/components/HeroBanner.sitecore.js
  • /src/components/HeroBanner/index.js
HeroBanner.sitecore.js will contain template name, icon, fields by default. 

Sitecore JSS create your first component

index.js will contain view of HeroBanner component and it will bind heading field.

Sitecore JSS create your first component

Add scaffold component into route

Route is nothing but a page, just like we add a component in Sitecore pages where we mention placeholder name and component name, same thing we need to mention in route.

Default page route is available here “/data/routes/en.yml”

To add HeroBanner component onto this page, add below code into en.yml inside jss-main:
  -componentName:HeroBanner  
    fields:  
     heading:This is a Hero Banner

It will look like this:

Sitecore JSS create your first component

It’s time to run jss start command and see our changes.

Sitecore JSS create your first component

ENJOY, you have created your first JSS component.
Labels:

Comments

Post a Comment

Popular posts from this blog

Sitecore 10.2 - “Failed to start service ‘Sitecore Marketing Automation Engine’” on Windows 11

Sitecore 10.2 - “Failed to start service ‘Sitecore Marketing Automation Engine' ” on Windows 11 Today I started to install Sitecore 10.2 using Sitecore Instance Manager on Windows 11 and I got this issue “Failed to start service ‘Sitecore Marketing Automation Engine' ” . Error : On event viewer it was showing the below error: I also tried to run ‘ Sitecore.MAEngine.exe ’ like this C:\Windows\system32>C:\inetpub\wwwroot\sclocal102xconnect.dev.local\App_Data\jobs\continuous\AutomationEngine\Sitecore.MAEngine.exe Which was throwing below error: Starting Marketing Automation Engine... 2022-01-29 22:21:11 ERR Error initializing XConnect client. System.AggregateException: One or more errors occurred. ---> Sitecore.XConnect.XdbCollectionUnavailableException: An error occurred while sending the request. ---> System.Net.Http.HttpRequestException: An error occurred while sending the request. ---> System.Net.WebException: The underlying connection was closed: An unexpected err...
Post a Comment
Read more

Sitecore Custom API Issue with Federation Authentication

Sitecore Custom API Issue with Federation Authentication In earlier segments, detailed in Part 1 and Part 2 of the blogs on Keycloak Integration with Sitecore, I introduced Keycloak functionality for CM login. Concurrently, I addressed a necessity to develop custom APIs for retrieving Sitecore users and roles. Following the development of custom APIs, during authentication failures, the API erroneously returned a status code of 200 instead of 401. The problem arose because API requests were being routed through the "owin.identityProviders" pipeline, which was not intended for API usage. Solution: When OWIN identifies a 401 response and the AuthenticationMode is set to "Active," it fails to capture the URL hash included in the request. Another choice is to activate the "Passive" AuthenticationMode, wherein OWIN refrains from actively intercepting 401 responses. In passive mode, your application needs to explicitly issue a Challenge to trigger the OWIN aut...
Post a Comment
Read more

Azure AD Integration with Sitecore 10.2

 Azure AD Integration with Sitecore 10.2 Sitecore identity server that comes with Sitecore 9.1 allows you to log in through an external identity provider like Azure Active Directory, Facebook, Apple, or Google. It is built on Federation Authentication. What is Federation Authentication? Federation authentication is a technology to allows users to access multiples application, tools, and domains using one credential. Using one set of credential user can access multiple applications, and resources after authentication.  Federation authentication consists of two systems, the Identity provider and the Service provider. Identity providers that maintain/create/manage identity information like name, email address, device, and location. Some examples of identity providers are Azure AD, Google, Facebook, and Apple. Service providers basically refer to a website, software, or app that the user is trying to access and SP basically relies on the identity provider to authenticate the user ...
Post a Comment
Read more