Skip to main content

Sitecore

XM Cloud Deployments: Static site deployment using Netlify CLI

In my previous post (XM Cloud Deployments: Static site deployment using Vercel CLI), I created a Sitecore XM Cloud deploy script to use the Vercel CLI. In this next challenge, I will be looking at doing the same in Netlify.
A little background:
Netlify and Vercel are two major competitors in the JamStack space. Both services are cloudbased  platforms that offer Server Side Rendering (SSR) and Static Site Generation (SSG) hosting  which has gained recent popularity. One can see close feature parity between the two platforms, which make them tough choices when deciding which JamStack platform to choose.
To get started, please make sure that you have access to:

Netlify UI deployment

Connect to XM Cloud environment

Let’s make a note of our chosen environment ID that contains the site we are going to deploy.
Next, we need to figure out the environment variables that we will use to deploy our site in Netlify. For this, we will need:
  • GRAPH_QL_ENDPOINT
    • – XM Cloud edge URL(i.e. https://edge.sitecorecloud.io/api/graph/v1)
  • JSS_APP_NAME
    • – the Site name in Sitecore
  • PUBLIC_URL
    • Value of this is will be the generated URL when you setup your site in Netlify below
  • SITECORE_API_KEY
    • Speaking of how to generate the access token (New-EdgeToken.ps1 script found in the repo above)

Create Netlify Account

Creating an account in Netlify is straightforward, and for this POC, I created a free account. Once the account is created, go ahead and create a site and select the option “Import an existing project”.

Netlify Exisiting Account

Select the GitHub repo for you XM Cloud instance you want to connect to. With this option we setup a CI/CD relationship:
  1. Netlify will pull the latest of that branch, when you trigger a deploy in Netlify or in the CLI.
  2. Deploys are triggered in Netlify from Github whenever changes are made to the selected branch

Build Settings

The build setting instructs Netlify what commands to issue when conducting the build.

Netlifybuildsettings

Environment variables

Next we will have to create the environment variables noted above

Netlifyenvironment Variables

*Since this is a free account I am not able to set the scopes/contexts these variables.
Once all is setup you will now have generated URL similar to  <sitename>.netlify.app, in my case https://sxastarter.netlify.app/.
This is also what we will use as our PUBLIC_URL variable
At this point, all things should be in place to “Trigger deploy” found under the deploy menu.

Netlifytriggerdeploy

If successful you should see a  deploy log similar to to the following.

Netlifydeploylog

If there were any issues, the log would report failed and a complete stacktrace of the error, which i find quite useful.

Local Deployment

For local deployment we will be doing most of our work in the static site folder, i.e. /src/sxastarter.
What basically happens here is that we will be using the Netlify CLI to manually build the local folder and assets, then push that build up to the Netlify cloud account for deployment.
  1. Install Netlify CLi by running this at command line
  npm install -g netlify-cli - netlify
  1. Connect to our account in netlify by running (you will be asked a few questions about your Netlify account, i.e. sites to use ..etc)
    ntl init or netlify init

    Ntlinit

  2. Build local folder and assets, which requires the same settings as mentioned above in the build settings on the Netlify website (you will maybe asked about what build command to use and the deployed folder, in my case it was
    npm run next:build  and .next  respectively.
    Build and deploy to Netlify account
    ntl deploy --build --prod or netlify deploy --build --prod

    NetlifybuildcliNtldeploy

Now you should be able to view your deployed website on the Netlify generated URL

Netlifyurl

A script for this type of deployment may look like this
$netlifyTOken="xxxxxxxxxxxxxxxx"

# Check if the Netlify CLI is installed
if (-not (Get-Command netlify -ErrorAction SilentlyContinue)) {
    # Install the Vercel CLI using npm
    npm install -g netlify-cli
}


# Deploy the project using the Netlify CLI
netlify deploy --build --prod  --auth $netlifyTOken

Note: the $netlifyTOken can be created in the Netlify UI in the instance you need to authenticate

Hopefully this was a useful walkthrough of creating local and cloud deploys in Netlify. As mentioned above, this was similar to my previous work with Vercel and it was pretty straight forward, given the feature parity between both platforms. Next I will be tackling XM Cloud deployment on the Amplify platform, till then, stay curious!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Karega Anglin

Software Engineer with over 10 years of experience in all things Software Development and Architecture. A humanitarian passionate about building things to improve society and people's lives. “Looking forward to the future, learning from the past, and enjoying working in the present.”

More from this Author

Follow Us