Steps to create a Sitecore JSS app and Deploy to Sitecore

If you are a beginner in Sitecore JSS and you are looking step-by-step by process to setup your first JSS App with Sitecore, please proceed further and setup up your first JSS App along with deploying it to Sitecore.

Before we jump start creating JSS APP, let us start with a quick introduction to Sitecore JSS.

What is Sitecore JSS? 
Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers that enables you to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks. Build Headless JavaScript applications with the power of Sitecore. Use your favorite JavaScript framework powered by an enterprise experience platform like React, Angular or Vue.js.

Prerequisites for Connected mode with Sitecore
Required Installations

• node.js v6.9 or later
• npm v5.7 or later
• Sitecore 9 or later installation with JSS(For JSS component ref, https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services.aspx)

Required Settings 

• Sitecore JSS License. JSS server-side functionality requires an JSS-enabled license file.
• Make sure you did set <compilation debug=”true”> in the Web.config
• Make sure that you set * for AllowedControllers and CORS Origins in your API Key item for development environment

How to setup a JSS App for Sitecore

Once the required installations are completed like Node.js, npm, Sitecore 9 or later and JSS component which was mentioned in the above link, please follow the below steps to setup your first JSS app with Sitecore

Step1: if you have not installed JSS Cli, please install it using the below command
   npm install -g @sitecore-jss/sitecore-jss-cli
Step2: Choose a JSS application template, you can choose one of the below
    React, Vue, or Angular
Step3: Create a JSS application using above chosen template
           Run jss create <your-app-name> <app-template-name>
           Example: jss create mysecondjssapp react

Note: you may encounter an error like Error: read ECONNRESET when you are on a VPN or behind a corporate proxy. Run, it from a private network. 

Step4: Change directory to mysecondjssapp
Step5: Run jss start command to start the application

After you start your first JSS application, you should be able to see the following website on your Browser running by default on 3000.

App Deployment
Once your able to successfully start the JSS app, your next step should be deploying the newly created App to Sitecore. Here are the steps.

Step1:  Add your new JSS app domain to IIS binding
Step2:  Add the domain to host entry
Example: In my case, the following entry 
127.0.0.1 mysecondjssapp.dev.local

Step3: If not already created, create an API Key under the below path in Sitecore. /sitecore/system/Settings/Services/API Keys. Note: For Sitecore 9.0, switch to Core database. For later versions, this setting is in master database.

Step4:  Enter * in CORS Origins field and Allowed Control fields. For Impersonation User field, enter extranet\anonymous as the default user
Note: this is for development environment
Step5: Test the setups so far by browsing the following url. Please substitute your domain and your API key in the below yellow marked place. Copy the item id of your API key which you created in Step#3.  

https://xp930.scsc.dev.local/sitecore/api/layout/render/jss?item=/&sc_apikey={7A054AF1-0677-450D-91CD-E2A49999ED96}

Step6:  Setup connection information before start deploying the JSS app. To configure the Sitecore connection, run jss setup at a command line. Provide the necessary information.

In the cmd or powershell window run  jss setup command.
After you run the above command, the following questions will appear asking for answer (my answers in bold font)

i. Is your Sitecore instance on this machine or accessible via network share? [y/n]: y

ii. Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): C:\inetpub\wwwroot\XP930.scsc.dev.local

iii. Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): http://mysecondjssapp.dev.local

iv. Sitecore import service URL [http://mysecondjssapp.dev.local/sitecore/api/jss/import]: Press Enter key so that it takes a default path

vi. Sitecore API Key (ID of API key item): {7A054AF1-0677-450D-91CD-E2A49999ED96}
vi. Please enter your deployment secret (32+ random chars; or press enter to generate one): Press enter key so that it generates one for us

Step7: Run jss deploy config

Run jss deploy app --includeContent –includeDictionar

Note1: In case any deployment error, make sure to run the deploy command on a private network if you are behind a corporate proxy. 
Note2: In case, if  you encounter below error if after following Note1 also. 
 Unexpected response from import service:
Status message: Bad Request
Body: Could not find JSS app configuration for 'jssfirstappsample'. Ensure you have included or previously installed a configuration patch file for the JSS app. Running 'jss deploy config' may resolve this.
Run the below jss deploy command passing the certificate format.
jss deploy app --acceptCertificate 89:16:0D:34:FB:F6:FC:3E:8E:E5:9A:22:CE:6C:83:81:8C:DE:76:DD -c -d

Verification of App Deployment in Sitecore
After your successful deployment of your first Sitecore JSS App, login to sitecore content tree with your credentials and verify your JSS App is created in Sitecore content tree. Here is the mysecondjssapp created for me.

Now you are ready with your Sitecore content created from your app. your app ready with connected mode and your can proceed with next level of customization of JSS components and deploy them.

That's all I wanted present with this article and if in case if you are looking for help in setting up your GraphQL. Visit here for my other page.