Your JSS app — Create Deployment pipeline in Vercel and handle SSG efficiently via publish-webhook
Hi guys
Today I am going to set up our JSS deployment pipeline to Vercel platform. The reason why I am going to use Vercel is that it works nicely with nextjs as well as it allows us to create a deployment webhook.
My experiment for today will be as below:
> Create deployment pipeline in Vercel
> Use Sitecore’s publish webhook to manage our SSG efficiently via Vercel
Create deployment pipeline in Vercel:
This part is quite easy. I recommend you to visit “https://vercel.com/” and create an account. Once it’s done, you can connect your repository via different platforms i.e “GitHub”, “bitbucket” etc. You will easily get it from the available widget it has.
Question: Since your Sitecore instance is running in your local, how is it possible for “Vercel” to communicate to this instance?
I have solved this problem via “ngrok”. A nice tool (without any dependency), which can be used to expose any of your local websites to the outer world.
I highly recommend visiting “https://ngrok.com/” this site and know how to do this. It’s basically as simple as
.\ngrok http -host-header=rewrite spacexhistoryapp.dev.local:80
So, basically, I have a site running in my local: “http://spacexhistoryapp.dev.local”, which I try to expose to the public via “ngrok’s” tunnel. You will see how does it map the local URL to the public URL from the below screenshot.
I think that’s all.
Use Sitecore’s publish webhook to manage our SSG efficiently via Vercel
For this, you need to create a deployment webhook using your connected repository from above. The step is quite easy. Just go to your Vercel project (that you just created via connecting your repo from above in Vercel) and find the settings button from the top menu. From there, you will be able to find create a webhook as below (under Git):
You would have seen, I have already created one called “jss_deploy_hook”. That’s it. Copy this URL to use further inside your Sitecore configuration.
The second step is to configure your Sitecore host to be able to trigger the webhook. This is quite easy. Just need to go to “[yoursitecorerootpath]/App_Config\Sitecore\JavaScriptServices\” and find a file called “Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.example”. Open this file and replace the URL as below:
So, here I have updated the URL with my deployment webhook (which I got from the Vercel from above). Remove the “.example” extension and it will automatically be deployed to your Sitecore instance.
Experiment time
Let’s open your site first in Vercel. For me, it’s like this below (after my initial deployment)
Now, let’s go to Sitecore and try to update the header which says: “SpaceX landing history” to “Welcome to SpaceX History — Updated” as below:
Now, try to publish this item. Before publishing, go to the “Review” tab and make sure it’s not locked. Tick the “publish” in case it’s locked. Now, just publish this item. As soon as the publish is completed, Sitecore “publish_end” event will trigger and this will callback the webhook (that we configured in Sitecore). If all good, then you can verify whether or not Vercel’s deployment pipeline is started or not
For me, I immediately see it’s triggered. You will also be able to see the static contents are generated and updated part of the build as below:
All good then. Now try to test our changes get affected or not. Try to reload the site and hola !!!
You see my header is updated successfully.
Why this is so important?:
This way, we can be able to manage our static content quite efficiently. We don’t need to trigger a deployment manually. As soon as there are any changes in content and we do publish in Sitecore, our content will be updated automatically (via a new deployment in the background). So cool !!!!!!!!!!!
That’s all for today.
If you want to see my repo, you can see this here: “https://github.com/mdarifuzzaman/SpaceXHistory”
Cheers, and thank you.
Arif
Twitter: @Arif44166141
LinkedIn: “https://www.linkedin.com/in/mdarifuzzaman/”
