Before going to create a JSS application need to install some prerequisites 

Install JSS Command Line Interface (JSS CLI) 

JSS CLI allows you to start the new projects and perform some operations such as deploying your application to Sitecore, scaffold components, and more.

We can install JSS CLI globally or a specific folder. If we install it globally so we can use it anywhere. 

  • Open Command Prompt
  • Copy and paste this command to cmd

            npm install -g @sitecore-jss/sitecore-jss-cli





After installing JSS CLI, you should be able to verify it’s installed by running the below command in the command prompt.

JSS

After running this command, you should see some out from CLI

 


 Now that you have the JSS CLI installed, you are ready to create sample JSS app.

 

Steps to Create JSS app

 

Step 1:  Identify Framework Options

The first step is to identify the template that matches your framework (React, Angular or Vue).

Go to https://github.com/Sitecore/jss/tree/master/samples/ to locate sample apps with code for each template.

 

Step 2: Create JSS Application

1.     Open a command prompt/Powershell.

2.     Navigate to the respective folder when you need to create your JSS app

3.     Type the create app command for your framework

 

jss create <your-app-name> <app-template-name>

 

In this sample app I choose Angular template so the command will be

 

jss create learnapp angular

 


 

4.     Change the directory to app folder which you created

Cd learnapp

5.     Type the command to start the JSS app using disconnected mode.

Jss start

 


 

Step 3: Inspect the App Viewer feature

The app viewer is a local webpack-dev-server feature to view your app in a browser without importing any items to Sitecore. After the JSS start command runs, this feature automatically launches your app in the default browser, http://localhost:3000

 


 

JSS App Folder Structure

 


 

Data this folder contains lots of yaml files which are used for two purpose, first to be used as a source of data when running disconnected mode, second are used to build items that get transferred to Sitecore on deploy/importing JSS app.

Node_modules any JavaScript developers know what is this. It contain the packages.

Public holds all the public assets e.g (fav.ico and index html files)

Script everything Sitecore is super extensible, this folder has some helper scripts each having a separate role.

Server when deployed to Sitecore, the application takes advantage of Server Side Rendering. This folder entry point and configuration for server side rendering.

Sitecore contains some secondary files that are not needed when working disconnected  but very important and define how things should work in Sitecore when being deployed.

Src this should be the main entry point for all the client side application code that gets to be complied for the end result