JSS Sitecore Headless Implementation

1: install Node.js
2: Install JSS CLI
npm install -g @sitecore-jss-cli
jss -version
(Note: JSS CLI is running in global mode because it was not installed in the local node_modules folder.)
3: jss create jss-app-demo react
4: cd jss-app-demo
5: jss start
6: run windows powershell
7: go to the project folder
8: jss scaffold MyFirstComponent
9: go to visual studio code and check in sitecore->definition->components->MyFirstComponent.sitecore.js
create a new fields here(copy existing field and make some changes)

fields: [

      { name: 'heading', type: CommonFieldTypes.SingleLineText },

      { name: 'headingdescription', type: CommonFieldTypes.RichText }

    ],

10:
go to data->routes->en.yml
11:addcomponent and fields in placeholders.

placeholders:

  jss-main:

  - componentName: MyFirstComponent

    fields:

      heading: Hello Sitecore JSS !!!!!

      headingdescription: This Sitecore JSS has been developed by rameshwar bhai !!!!!

12:
go to src->components->MyFirstComponent->index.js

import React from 'react';

import { Text } from '@sitecore-jss/sitecore-jss-react';

const MyFirstComponent = (props) => (

  <div>

    <p>MyFirstComponent Component</p>

    <Text field={props.fields.heading} /><br />

    <Text field={props.fields.headingdescription} />

  </div>

);

export default MyFirstComponent;

13:
install sitecore JavaScript Services 11.0.1 from
https://dev.sitecore.net/downloads

14:
create the api key in sitcore to utilize the services
go to Sitecore->Systems->Settings->Services->API Key->Insert->API Key
give some name to api key.
go to quick info and copy Item Id
{0A981136-A0C2-469C-9F46-8522ED20D6C7}

15: Go go jss.sitecore.com and get the additional info

To test whether the Layout Service is working, make a test request to Layout Service on your Sitecore host: http://myapp.siteco.re/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}

if Layout service is working then it will give json data else Layout service is not working.
then you need ti installSitecore JSS (Sitecore JavaScript Services 11.1.0)





C:\Users\DELL\jss-headless-example>jss setup
Is your Sitecore instance on this machine or accessible via network share? [y/n]: y
Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): c:\inetpub\wwwroot\sitecoresc.dev.local
Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): http://jss-headless-example.dev.local
Sitecore import service URL [http://jss-headless-example.dev.local/sitecore/api/jss/import]: http://jss-headless-example.dev.local/sitecore/api/jss/import
Sitecore API Key (ID of API key item): {0A981136-A0C2-469C-9F46-8522ED20D6C7}
Please enter your deployment secret (32+ random chars; or press enter to generate one):