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):

SETTING UP SOLR AS A SERVICE

SETTING UP SOLR AS A SERVICE

On the command line, type the following:

1	"c:\Program Files\nssm\win64\nssm" install solr5

Fill out the path to the solr.cmd script, and the startup directory should be filled in automatically. Don’t forget to input the -f (foreground) parameter so that NSSM can kill it when it needs to be stopped or restarted.

The following step is optional, but I prefer having a clean and descriptive name in my Windows Service Manager. Under the details tab, fill out the Display name and Description.

Click on Install service.

Check that the service is running.

Go to your favorite web browser and make sure Solr is up and running.