Getting started with Sitecore JSS using CLI

Jump in & explore more about Sitecore JSS (JavaScript Services), but don’t have a route to start with it? No worries & I do felt the same in the beginning. I'll walk you through the steps from scratch to publish them into your vanilla Sitecore instance.

Also I can throw some lights on some key spots during this blog that Sitecore JSS provides you.
This post is for the vanilla setup & basic explorations I can explore the various blogs about Sitecore JSS application near the future.

Installation of Sitecore JSS CLI

In order to start with a project setup, I would prefer to go with Sitecore command line interface CLI which allows you to start a new projects from the scratch, build, deploy apps into sitecore instances, etc., This can be installed through the npm feeds. 

Hence this can be installed globally in case if we you are working with multiple projects (I would always prefer this Since most of the time I used to work in helix solutions). 

After installing the NPM Package try executing the JSS command

After npm installation, you can try using the command jss

If you get this error, we need to set the execution policy,

If you're a beginner & not sure about the commands use --help

Getting started with new JSS application

CLI is ready, next we can use CLI to create a new site as below,

... it may go lengthy stay tuned

Great! you just created your JSS app with react & Mine is uploaded in a repo

Workspace

• component-content - It's the place where you would place global components you might want to reference from multiple routes.

• content - It's the place you want to reference in your application but these items do not contain any associated presentation.

• dictionary - Its place where you would define the dictionary items for your application here.

• media - Media files can be placed in this can be deployed into asset library if you deploy your application to Sitecore.

• routes - Routes are items that you can navigate to and have presentations associated with them. These routes have placeholders and component definitions that could be thought of as renderings, using Sitecore terminology.

all of them represented in a 'yml' artifacts inside for an example we can have root item as below,

A route item will contain page-level fields and allow you to define presentation attributes like placeholders & one item can have multiple placeholders in this example the configured placeholder is 'jss-main'

When you are working in offline Mode, these files are read in and will be used to equip your JSS application without you having to go into Sitecore and create these items. These items can also be deployed directly into Sitecore, which you'll do later on when you go into Connected Mode :-).

There are lot of out of the box components are available when you first create your application and that's a good thing. The default application contains field usage for a lot of the built-in field components that Sitecore JSS provides. If you navigate into one of these files, such as

These component definitions can be found & being used in the 'routes' as a 'Componentname'

Custom Code - Source

Src directory is the actual source code of the application. There will be a directory for each of the components that are defined and used across the site looks as same as Helix:

Additionally layout.js will be the place where you will find the overall page structure of your application

That's something very brief on the JSS Stuff now lets see how do we start the app

Disconnected Mode - Offline

... Stay tuned its going still,

Your react site launched!

Stay tuned for the connected mode which I will be creating soon & thanks for visiting my blog.

Please post your feedbacks on a comments