Deploy JSS config and headless app to Sitecore

Next: Start/Launch the app >

< Next: Connecting Sitecore and the JSS app

---

Prerequisites:

1. A running instance of Sitecore, with headless rendering installed.

2. A headless app created using the JSS CLI.

3. Connection set up between the headless app and Sitecore.

You can navigate to the previous articles from this article for doing the same.

---

Getting the config and app ready for deployment

Given your Sitecore and headless app are running and connection parameters are derived on the scjssconfig.json,

1. Copy the following parameters from the scjssconfig.json file to the .env file on the root of the headless solution

   
   

scjssconfig.json	.env
layoutServiceHost	REACT_APP_SITECORE_API_HOST
apiKey	REACT_APP_SITECORE_API_KEY

2. You would see a progress message that says

   "Copying ./sitecore/config to C:\inetpub\wwwroot\<Your Sitecore directory>\App_Config\Include\zzz..."

   
   

3. Upon successful copy of the files, the success message would be

   "JSS app build artifacts have been deployed to Sitecore."

   
   

4. Upon completion, two config files from the headless solution at <root>/sitecore/config/<your headless app name>.config and <root>/sitecore/config/<your headless app name>.deploysecret.config would be copied to your <Sitecore directory>/App_Config/Include/zzz folder

   
   

5. The <your headless app name>.config would contain definitions for your site and the app like shown below -

   Site definition:

<site patch:before="site[@name='website']"
            inherits="website"
            name="sitecore-jss-app"
            hostName="sitecorejssdemo.local"
            rootPath="/sitecore/content/sitecore-jss-app"
            startItem="/home"
            database="master" />

App definition:

<app name="sitecore-jss-app"
           layoutServiceConfiguration="default"
             sitecorePath="/sitecore/content/sitecore-jss-app"
             useLanguageSpecificLayout="true"
             graphQLEndpoint="/sitecore/api/graph/edge"
             inherits="defaults" />

6. The <your headless app name>.deploysecret.config file would contain the <app> configurations required for provisioning deployment to the connected application - app name, deploymentSecret, and debugSecurity

   
   

---

Deploying Configs to Sitecore

Run the following command in a terminal to start deployment of your configs

jss deploy config

This would copy config files as shown on the message in the screenshot above.

---

Deploy the app to Sitecore

We would need a self-signed certificate to deploy the headless app to the Sitecore directory.

jss deploy app –c –d

This would deploy compiled files of your headless solution to the /dist/ folder in the Sitecore directory as shown in the screenshot above.

---

When the deployment is completed, the app would be accessible on the domain (sitecorejssdemo.local) configured on the <site> definition settings described earlier in this article.

Run jss start command to start the headless app and see the code changes on the fly.

Run jss start:connected to start the app with a live connection to Sitecore.

Run the app via the site domain(sitecorejssdemo.local) to run the app from the Sitecore root directory.

---

Common error while deploying headless configs to Sitecore:

1. Error: EPERM: operation not permitted, unlink 'C:\inetpub\wwwroot\sc10sc.dev.local\App_Config\Include\zzz\sitecore-jss-app-react.config'

   
   

   Solution: This error is related to lack of permission and will go away if you open your terminal or IDE as an "administrator". Fully close all your terminal windows, or IDE and open them again as an administrator and you will no longer see this error.

---

< Next: Connecting Sitecore and the JSS app

Next: Start/Launch the app >