The TL;DR Quick Start
If you're in a hurry to play with a JSS app, you can get started in four commands (with Node installed). We still recommend reading the rest of the quickstart for better understanding of what's happening.
npm install -g @sitecore-jss/sitecore-jss-cli jss create my-first-jss-app react cd my-first-jss-app jss start
Step 1: Prerequisites
To develop a JSS app, you will need:
Note: A Sitecore instance is required to operate in connected or integrated application modes, where content in the JSS app is pulled from Sitecore, or to use JSS in production. Sitecore requires Windows, however the Sitecore instance need not be local (for example it could live in a VM, or a shared server infrastructure).
Step 2: Install the JSS CLI
JSS includes a handy Node-based command line tool to make it easy to get started and maintain your application. If you're familiar with angular-cli or create-react-app, this is the same idea but for managing your JS app's connectivity and deployment to Sitecore. The CLI is installed globally, but it uses commands stored in the app's
node_modules so multiple apps with different JSS versions are supported.
- If you use yarn:
yarn global add @sitecore-jss/sitecore-jss-cli
- If you use npm:
npm install -g @sitecore-jss/sitecore-jss-cli
To verify that your CLI installation was successful, run
jss --help at any command line.
jsscommands that are available change depending on whether the command is run within a JSS app or not. The
--helpoption will always show the currently available commands.
Step 3: Choose a JSS application template
The JSS CLI is used to create applications, which can be created from a several application templates. To get started, choose an application template based on your needs and desired frontend framework.
Help! Should I use React, Vue, or Angular?
Which framework you use for JSS is a matter of opinion. JSS provides equal support to React, Vue, and Angular. If you're a newcomer to modern frontend development and don't have your own opinion yet, React or Vue are the easiest to get started with.
Styleguide templates are mirror images of each other, supporting basic Sitecore features (routing, multilingual, GraphQL) and using popular supporting libraries for their frameworks. Each Styleguide template comes with a sample styleguide showing how to use and define various Sitecore field types and patterns in that framework.
reactThe React Styleguide template.
vueThe Vue Styleguide template.
angularThe Angular Styleguide template.
Experimental templates are experimental specialized JSS examples. They are examples of how to do advanced tasks, but may not be stable or thoroughly documented.
sitecore-embedded-jss-appThis app shows how to embed a JSS application inside an existing Sitecore site as a rendering. Read more here.
Step 4: Create application using selected template
Once you have selected a template, it's time to create your application.
- Open a command line where you wish to create your application
jss create <your-app-name> <app-template-name>
- Sit back and relax while JSS does its work
jss create myapp react would create a React sample in a
myapp folder under the current directory.
Step 5: Run your application
- At a command line in your app's folder, run
jss --helpto see your options and what they do. This is optional, but recommended.
- To start the app in disconnected mode which uses locally defined content, run
The app will be built and a local development server will be started.
Your default browser should open with
http://localhost:3000 and your JSS app is rendered:
jsscommand knows how to execute scripts from your
jss startand other build commands are defined by package scripts so that you may customize your build as you wish. Other commands, such as
jss deployare natively part of the JSS CLI - though they may call your build scripts if they need to.
You've successfully created an app with the JSS SDK in a local development environment! Next, let's add a component to the app that will display content from Sitecore.