Sitecore JSS Series for Developer: How to deploy your Sitecore JSS app to Netlify with Sitelify (5 of 5)

In this last step, we will go ahead and deploy our web site to the Netlify with the help of Sitelify.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

What is Netlify?

Netlify is a service, that allows you to easily deploy and host your modern static websites and it is blazing fast. Deploy your site in 30 seconds.

  • Hosting Free
  • Continuous Deployment from Git
  • Serverless Functions

The first step lets go ahead and set up an account with Netlify, it is FREE, and create an access token.

Netlify Access Token
Save the token you will need later in the tutorial

What is Sitelify?

Sitelify brings your Sitecore sites built using Sitecore JavaScript Services (Sitecore JSS) to Netlify, quickly and easily.

To get more info about Sitelify, please visit the website directly: https://sitelify.io/

You will need to acquire an Access Token in order to deploy the site to the Netlify. Request Access

Official Documentation > https://docs.sitelify.io/docs/getting-started

The first step to do install Sitelify Manager

Sitecore Launchpad with Sitelify Manager

Next, we will open Altola.Sitelify.config that has been added to our App_Config

Altola.Sitelify.config

Please follow the official documentation, https://docs.sitelify.io since this blog post, might not be updated with the latest documentation.

Once you generated the Netlify token and obtained a Sitelify Access Token, you can enter them in the config shows above, save the file, restart the instance.

Sitelify

After creating a new site and naming it JSS Blog on Sitelify, we need to create a Netlify site, where we will be deploying our JSS site.

Sitelify
Click on Create in order to create a Netlify site
Create a Netlify site with Sitelify

Next, we will Deploy the web site to Netlify.

Sitelify Manager
Deploy to Netlify with Sitelify
And literally after few seconds
Preview Sitecore JSS application with Sitelify after deployment
We can already preview the website in our browser.

Now let’s view the website from the Netlfiy.

Netlify Dashboard
As you can see the name of the application is the same, in Sitecore as well as in Netlify dashboard, all of this is possible with Sitelify.

Now you see your site on the web. You can visit either one of the links:

Sitecore JSS application build with React

Congratulations, you have completed your journey with Sitecore JSS!

You have a web site running on Netlify that was built with Sitecore JSS. Share your work and don’t forget to tweet about it, and add hashtag #sitecoreJSS

Sitecore JSS Series for Developer: How to deploy Sitecore JSS app to Sitecore (4 of 5)

If you have been following every step of the way until now, you should have no problem with deploying your site to the Sitecore.

In this tutorial, we will learn how to deploy Sitecore JSS application to Sitecore Experience Platform.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Since I am doing all of my development on macOS I would like to double check that my instance is up, and I am able to open the root folder with my Sitecore instance.

Sitecore Content Editor
jss deploy config config
Sitecore JSS Configs

Now we are ready to deploy our application

jss deploy app -c -d

If by any chance you run into a problem, please go ahead and refer to Anastasiya’s blog for troubleshooting

Sitecore JSS app react in Experience Editor

After a successful deployment, you should see the site load in the Experience Editor, as well as you should have your bundle located in the ‘dist’ folder.

You content tree should look similar to this

Sitecore Content Tree

Let’s go ahead and visit our Sitecore instance

Sitecore JSS App served from Sitecore 9

The reason we are landing on the homepage for this site, when we are visiting the main url for the sitecore, is because of the configs, see below.

<site name="sitecore-jss-blog" inherits="website" hostName="sc9.local" rootPath="/sitecore/content/sitecore-jss-blog" startItem="/home" database="master" patch:source="sitecore-jss-blog.config"/>

Now we are ready to make this site, available on the web for everyone.

In the next tutorial, we will learn, How to deploy your Sitecore JSS app to Netlify with Sitelify.

Sitecore JSS Series for Developer: How to build a functioning Sitecore JSS app (3 of 5)

In the previous tutorial, we were deploying a sample app, and now we will go ahead and start developing our application, and testing it locally before we deploy it to Sitecore again.

In this tutorial, we will learn how to build a functioning application with Sitecore JSS and React.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

If you have skipped previous steps, and you would like to dive right into the Sitecore JSS development, have a sample ready, by following the instructions:

Before we begin by diving into the code, I would like to spend some time explaining some of the files are located and how we will be using them. These items were generated during the initial set up of a sample application

Route Layout Definition

In this file, we will be adding placeholders, components, editing field values, etc…

Sitecore JSS Route
yourApplicationName/data/routes/en.yml

Component Definition

This is where part of your component will be stored, where you will be designing your component data structure, setting fields, setting an icon for the component, as well as defining placeholders, that need to be exposed.

Sitecore JSS Component

Component Source

This is where you will be creating your component, designing the look and feel of it.

Sitecore JSS Component

Layout

In Layout.js you will be designing your page layout

Sitecore JSS Layout

Placeholder settings

In placeholders.sitecore.js you will be adding placeholders

Sitecore JSS Placeholder Settings

Register Placeholders in the package.json

If you will be creating any placeholders, you will have to register them in your package.json file.

 "config": {
    "rootPlaceholders": ["jss-1", "jss-2"]
Sitecore JSS Register Placeholders

We will be taking an approach of Disconnected Mode. So we will be creating a website locally first using Sitecore JSS CLI

You might notice that screenshots are different before this line, and it is referencing a “CV” application, it is my other project, everything below this line, will be all related to “sitecore-jss-blog”.

First, we will start with the creation of a sample app, and you can follow instructions in Step 2 on how to get started or follow instructions on https://jss.sitecore.com/docs

Next step we will start creating components and placing them on the page

First Part that we will focus on will be creating a few components using JSS CLI:

jss scaffold BlogHeader
jss scaffold BlogMainContent
jss scaffold BlogFooter
jss scaffold Article

It will automatically generate all the files that are needed for your development.

At this time we can start adding styling and all of the content

Let’s add some fields and set the icon for the BlogHeader Component

Sitecore JSS BlogHeader Component Definition
sitecore/definitions/components/BlogHeader.sitecore.js

Now let’s customize the BlogHeader component

Sitecore JSS BlogHeader Component React Source
src/components/BlogHeader/index.js

Go ahead and add some data to data.yml

Sitecore JSS BlogHeader Component Data
data/routes/en.yml

You might notice that I have modified the default placeholder, you can also do it, by editing the main layout and registering the placeholder

Sitecore JSS Header Placeholder
Please add this block of code into your layout, wherever you wish to have your placeholder.

And don’t forget to register it in your package.json

Sitecore JSS Register Placeholders
package.json

Let’s preview this in our browser

Sitecore JSS Blog

Next, let’s go ahead and add another component into the other placeholder, first let us add the placeholder to our Layout.

Sitecore JSS Placeholders
Layout.js

Now we will go ahead and update the BlogMainContent, definition as well as the source, the component that we created earlier with Sitecore JSS CLI.

Sitecore JSS BlogMainContent Component Definition
Sitecore JSS BlogMainContent Component Source

Lastly, let’s go ahead and add some data.

Sitecore JSS Data.yml

Let’s check out the browser you should see your changes here

Sitecore JSS Blog Local Disconnected

Now you have a functioning page, and you are able to load and modify the content locally. We will dive deeper in routes and Footer in the next series, please follow me and twitter to get the latest updates and you can get the code for free from my GitHub and use it for your own project.

In the next step, we will be learning How to deploy Sitecore JSS app to Sitecore, so we can see utilizing all the functionality of the platform such as Experience Editor and of course utilize Personalization.

Sitecore JSS Series for Developer: How to Connect to Sitecore Instance (2 of 5)

I hope you had a pleasant time in the first tutorial. How to Setup Sitecore JSS.

In this tutorial, we will learn how to Connect our app built with Sitecore JSS to our Sitecore Instance

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Now since we have setup our sample application, and created a configuration we can continue.

Let’s go ahead and deploy the configuration file to Sitecore.

jss deploy config
How to Connect to Sitecore Instance
Sitecore JSS deploying configuration
Deployed successfully

Now let’s deploy the app to Sitecore. More information about Sitecore JSS CLI

jss deploy app -c -d
JSS app build artifacts
You should receive a success message at the end

Let’s navigate to Content Editor and view our items in the Content Tree

Sitecore JSS app deployed to Sitecore Content Tree
Since my application is called “cv”, this is what I see in my Content Tree

At this time we should have learned the following:

  1. How to setup Sitecore Instance
  2. How to install Sitecore JSS
  3. How to generate and Deploy Configuration to Sitecore Instance
  4. How to deploy our sample application to Sitecore instance

In the next tutorial, we will start developing our application

If you found this post useful please share it. You can always comment on this post, or reach out to Sitecore Slack, or Twitter, or post a question Sitecore Stack Exchange.

Let’s move on to the next step How to build a functioning website with Sitecore JSS

Sitecore JSS Series for Developer: How to Setup JSS (1 of 5)

In this tutorial, we will take a look at how to set up a Sitecore JSS on our Sitecore instance.

The best way to start setting up JSS is to have a Sitecore instance that is compatible with Sitecore JSS services.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Here is a list of Downloads that you will need for this Tutorial

  • Sitecore 9.0 and Sitecore 9.1 is compatible with JSS 11.0 (release notes)
  • Download Sitecore Experience Platform – (link)
  • Download Sitecore JSS (JavaScript Services) – (link)

I am not going to go into details of setting up Sitecore, there are many videos out there how to set up Sitecore.

Once Sitecore is set up follow the directions on the official Sitecore JSS site on how to set up Server (https://jss.sitecore.com/docs/getting-started/jss-server-install#server-components-installation)

Sitecore 9 How to setup Sitecore JSS
Login to Sitecore, go to Desktop, Select Development Tools > Installation Wizard
Sitecore 9 How to setup Sitecore JSS
Select Already Downloaded package
Sitecore 9 How to setup Sitecore JSS
And Install it.
Sitecore 9 How to setup Sitecore JSS
Next Step as described on the official documentation site is to change binding redirect for Newtonsoft.Json

The last step is to verify if everything is working correctly, let’s get back to Sitecore and create an API key, and test it.

Sitecore > Launchpad > Desktop > Content Editor | Switch to core DB, and navigate to

/sitecore/system/Settings/Services/API Keys/jss-application

and create an API Key

Sitecore 9 How to setup Sitecore JSS: Create an API Key
Make sure you are in CORE db
Sitecore 9 How to setup Sitecore JSS: Validate Layout Service is working
Use this url to test:
https://yourhost/sitecore/api/layout/render/jss?item=/&sc_apikey={ItemID}

Next, we will have to set up our application to communicate with the Sitecore instance.

I imagine that at this time you Sitecore JSS CLI is installed, and a sample app has been created.

Sitecore 9 How to setup Sitecore JSS: JSS Setup
In order to generate scjssconfig.json | you need to run jss setup command (read more here)

Lets now proceed to the next tutorial on How to connect to Sitecore Instance

Sitecore JSS Series for Developer

While working on one of my personal projects, I decided to create a series of JSS Blogs, that will allow you to see and get going with the JSS really fast.

In this blog series, you will learn How to build a website with Sitecore JSS, utilizing React and Sitecore Experience Platform and deploying the site to Netlify using Sitelify.

I know it is a mouthful, but trust me at the end of this tutorial series, you will be able to build site quickly.

What tools and resources am I using:

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning web site
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Useful JSS CLI commands:

jss start
jss deploy app -c -d
jss deploy app --acceptCertificate [cert]
jss deploy app -w
jss scaffold

Known Issues

Useful Resources

https://jss.sitecore.com – Official Documentation

Getting Started with JSS
Build your First JSS App

Lets start with How to setup Sitecore JSS