Using Preview in Kentico Kontent on your Local Development Site

With a lot of teams working remotely, being able to share what you're working on with your team easily is increasingly important. If you're working on some new features for a project, you don't really want to screen share whenever another team member needs to check out your progress. You also don't want to push something into source control just so that your CI pipeline produces a new version of your app from someone them to view.

Lets assume your project is a website and you're working on adding an e-commerce capability - this is brand new work and there is nothing like it on your existing website. How can you let your colleagues see your new changes to the website? Well, if you're working Kentico Kontent allows you to have Preview URLs setup in your project.

What are Preview URLs?

The Preview URLs allow you to provide a different URL structure for each content type. These URLs expose a couple of macros to allow key identifiers from your content to be added to your URL. This includes the URL slug, language variant, the codename and the ID of a content item.

So on our site for example, a preview URL for a product might be as follows

https://example.com/products/{Codename}

If the preview URL is publicly available, then anyone who has access can see it. With a local development environment you need to create a 'tunnel' in order to be able to give someone outside your home or office network access.

Creating a tunnel to your environment

In order to create a tunnel to the development environment, we're going to use a service called ngrok.

ngrok is an application that exposes your local development server through a secure tunnel via the ngrok cloud service. The tunnel is exposed via a URL on a subdomain of ngrok.io. The ngrok application on your local machine then forwards the request to your local development server and returns the response back to the service. The short story being that you can expose your local development machine over the net to anyone who wants/needs to see it. It also gives some nice features like being able to see all requests and responses, as well as re-running requests as needed (which is great for testing).

Using the .NET boilerplate template for Kentico Kontent and performing a dotnet run will start up a local server and make it available on the following two bindings by default:

1. Port 5000 for HTTP (http://localhost:5000)
2. Port 5001 for HTTPS (https://localhost:5001)

When we test out site, we really want to be using HTTPS, so we'll want to tell ngrok to use that port number. In order to specify a port number, we need a signed-up account with ngrok. That doesn't cost us anything as long as we can accept the random generated subdomain. In our case this is fine, but upgrading to the basic plan with ngrok will allow you to use a fixed sub-domain.

To illustrate this, I make a screen capture of me running a .NET application from the command line and then making this accessible on the web.

As you can see from the above video, to create the tunnel we just need to run the following command from the terminal:

ngrok http https://localhost:5001

This then lists out the URLs that the ngrok service is listening for. We can take the HTTPS URL and then add this to the Preview URL settings in Kentico Kontent.

Updating Kentico Kontent

Updating Kentico Kontent with the required URLs is as simple as navigating to the project settings and modifying the URLs for the content types that you want to preview.

Once this has been set, Kentico Kontent will allow you to click the preview URL button, which will open the page in a new tab/window in your browser.

Quick summary

You can use ngrok to expose your local development environment in order to give access to other members of your team. By adding the addresses to the Preview URL configuration for your project/feature environment in Kentico Kontent you can enable other project members to see your work using the Kentico Kontent administration interface with minimal effort. 💪

The setup here is pretty simple, but it can work to facilitate collaboration during the early phases of a project where you really are not ready to push anything up to your build server. It's worth noting that the same principal also exists for web hooks. I you want to test that your cache is correctly flushed or debug that the Azure Function that you're working on, ngrok can be a great help.

What next?

This article has shown how to set up basic preview URLs in your Kentico Kontent project on your local development environment using ngrok to give access to remote team members. Given our level of remote working in 2020 😷, that's a pretty useful thing to have set. But this is not the end of the story. In September 2020, Kentico Kontent also released the Web Spotlight feature, which closes the gap between a headless CMS and the desire of marketers and content editors to be able to easily and visually maintain and create content. I'm really excited about Web Spotlight, but sadly have not used it yet, so that is my next project 😃

Cover photo by Thought Catalog