Following up from my previous article on setting up a running instance of Sitecore 9.3 SXA and JSS within Docker, the next logical step is to setup a JSS app. In my case, I chose to use an Angular app.
To obtain the JSS sample app from Sitecore’s sample app repositiry, you must first install the Sitecore JSS CLI using npm. This article assumes you have already performed the requirements to have JSS CLI installed on your host or VM machine.
Please ensure you are also using a LTS version of Node installed on your machine.
For more details, you can refer to the official Sitecore JSS documentation – on installing JSS for Angular.
In order to ensure, you are creating the correct JSS sample app for the correct target Sitecore version, be sure to visit the Sitecore compatibility table and ensure you are pulling the correct JSS version sample app. In my case of Sitecore 9.3, I will pull down a sample Angular app of version 13.0.
Below outlines the steps to get an SXA JSS site up and running in Sitecore.
Step 1: INSTALL the sitecore angular app
Run the following command to install the app that is of the 13.0 branch release.
jss create jsssampledemo angular -b release/13.0.0
For more information on JSS CLI Commands, you may refer here.
JSS CLI will finish up and complete with the above.
Once completed, you will have the following working directory setup.
To ensure all is running smoothly, run the following command to verify that your sample app is able to run in disconnected mode.
This will open up the styleguide page in localhost://3000. The below is the expected resultant page.
Step 2: CREATE SITECORE API KEY
Given that you have a running local Sitecore instance in Docker, proceed to setup the Sitecore API Key. Browse to /sitecore/system/Settings/Services/API Keys. Right click on the API Keys folder and insert ‘API Key’.
Leave the default name ‘API Key’ and click OK.
This will create the API Key item.
Fill in the relevant fields with the following values for local development purpose only.
|CORS Origin||* (to allow for all origins to consume the layout service)|
Publish the Sitecore Item API Key. This step is required for Sitecore 9.1 and above.
If you do not publish the API Key, Sitecore will not be able to render the response.
Verify that the Layout service url is returning back a response. You should be expected to see a valid response returned as below. This means that you have now correctly setup the API Key to authenticate calls to the Sitecore Layout Service.
STEP 3: Create SXA JSS Tenant and Site
Next we will need to create the SXA JSS Tenant and JSS Site in which will allow us to deploy our sample demo JSS app into. For this we will go ahead and create the below in our running Sitecore CM Instance.
Enter a name such as ‘SXA JSS Tenant Demo’.
This will create the ‘SXA JSS Tenant Demo’ tenant folder.
Next, we will create the new JSS Site that will retrieve the imported artifacts and sitecore items from the manifest data created in our Sitecore JSS app. This will be described in our next step – Deploy JSS App to Sitecore.
Right click on the created tenant folder, and insert ‘JSS Site’.
In the ‘Create a new JSS site’ dialog box under the ‘General’ tab, fill in the below details.
Site name: jsssampledemo
Host name: jss.dev.local
Because we are deploying the JSS app to an SXA JSS Site, we must ensure we follow the standard guidelines in ensuring the artifacts and manifest data is imported correctly to the target site.
Refer to the Sitecore documentation on deploying a JSS app to SXA JSS site.
Once created, you will have the SXA JSS site setup and created.
Step 4: CREATE JSS DEPLOYMENT CONFIGURATION
This step is the final step in deploying the JSS app to Sitecore.
Open up the JSS app with Visual Studio Code.
Press CTRL-Shift-‘`’ to open the Integrated terminal so that you can run commands from within it.
In the root of your sample demo JSS app, run the following command to first setup the deployment configuration.
Fill in the necessary details into the question prompts and ensure you fill in the correct information. Below were the key inputs placed into the fields.
Once filled in, this generates the jsssampledemo.deploysecret.config file within the JSS app working directory which contains the deployment secret which will be used for by the JSS import service to deploy the artifacts and manifest data into the target Sitecore site.
Step 5: UPDATE DEPLOYMENT SECRET in settings
Go the the Site Setting item, and in the Deployment Secret field, paste in the GUID value that was generated in the deployment configuration file in Step 4.
sTEP 6: dEPLOY THE JSS APP to SITECORE
Run the following command.
jss deploy app -c -d --acceptCertificate 39:65:c5:38:4b:46:d8:a6:42:e0:da:58:9a:1f:64:a9:5d:3b:fe:d7
This will start the deployment of the artifacts and manifest data (route pages, placeholder settings, components and data templates). This will usually take about 1-2 minutes for a first round deployment in which the target site is filled in with the route pages (from the manifest route data) along with references to its placeholders and components.
Once the deployment is completed, you can refresh the Content Tree to view the sample route pages under the jsssampledemo site. Open up the home page in Experience Editor and you will finally be able to have a fully working editable StyleGuide page in Sitecore!
At this moment, you will have a local development environment of a Sitecore hosted JSS app in connected mode. Enjoy Sitecoring!