Creating a ReactJS Site with Kentico Cloud

Blog: Creating a #ReactJS Site with #KenticoCloud  #HeadlessCMS #Kentico

  • I added a div element to my view to load my ReactJS content.
  • I added references to the data.jsx and ReactJS files (using a CDN) to my shared layout.
  • After entering the score, I switched back over to the site and waited for the ReactJS code to call the HighScores action.
  • To add ReactJS to my solution, I opened the NuGet Package Manager and added the ReactJS packages.
  • In Draft, I created a new content item for my score.

By now, you’ve probably heard a lot about Kentico Cloud and how it presents a new way to develop your applications. One of the greatest benefits of the platform is how you can quickly develop applications in nearly any language and leverage cloud-based content. In this article, I’ll show you how I recently used Kentico Cloud and ReactJS within an MVC site for a tournament website for our booth at CodeMash 2017. Oh, and of course it’s deployed to Azure Web Apps!

@bryan_soltis: Blog: Creating a #ReactJS Site with #KenticoCloud #HeadlessCMS #Kentico

By now, you’ve probably heard a lot about Kentico Cloud and how it presents a new way to develop your applications. One of the greatest benefits of the platform is how you can quickly develop applications in nearly any language and leverage cloud-based content. In this article, I’ll show you how I recently used Kentico Cloud and ReactJS within an MVC site for a tournament website for our booth at CodeMash 2017. Oh, and of course it’s deployed to Azure Web Apps!

As a technical evangelist, I often attend conferences and user groups around the world. I, like many of you, have aimlessly wandered around miles of conference booths and setups looking for the coolest swag and presentations. Most recently, Kentico sponsored CodeMash 2017, and MVP Brian McKeiver and I manned our booth for the conference.

In an effort to set us apart from the other vendors, we decided to set up a Tetris Tournament for the attendees to compete in (who doesn’t love Tetris?!?).  We would record the high scores and reward the winners with some gift cards and other choice prizes. Having the game setup at our booth also gave us the opportunity to talk to several developers about Kentico EMS and Kentico Cloud.  But what would be the best way to start the conversation?

I knew I wanted to have an engaging experience for the conference, and the Tetris game certainly fit the bill. I also wanted to keep track of the scores in a simple way. The answer? Kentico Cloud!  The platform would allow me to easily enter scores, and I could develop a simple application to display them. And to take it a step further, I decided to make the app powered by ReactJS to show how that was possible. With that solution in place, I would have a great way to introduce developers to the product and show them what’s possible.  Even better, I knew I could create a site very easily for the event and be up and running quickly.  Sweet, now I had a plan!

The first step of the process was to create my Kentico Cloud content. Because I would only be storing scores, this meant I only needed a single content type to hold the names and scores.

As players finished their game, we would enter these scores through the Kentico Cloud interface.

With the Kentico Cloud content type in place, I was ready make my application. In Visual Studio, I started with a blank MVC site template.  I knew I would be adding ReactJS, so I didn’t really need another other components.  I added a Home controller and view to hold my code and layout. In the Home view, I added some static HTML for the base layout (Yes, I know my design skills are amazing!).

I added the Kentico Deliver NuGet package to get all the API goodies.

For the Home controller, I needed to add the functionality to pull the high scores using Kentico Deliver. To do this, I created a new class called HighScore.

In my Home controller, I created a List object to hold my scores. 

Then in the constructor, I created an instance of the list.

Next, I created a client to access the Deliver API.

Note that I’m using the Deliver Project ID and Preview API Key to access the service. These can be retrieved by browsing to the Development tab within the Kentico Draft interface. Also, I didn’t publishany of the scores, so I had to include the Preview API Keyto pull un-published items.

Because I knew the ReactJS code would need a way to get the scores, I created a new action called HighScores to get the data from Kentico Draft.

Note: I am using the Deliver API to sort the scores by descending values to get the top scores first.

Lastly, I added a div element to my view to load my ReactJS content.

With that code in place, I was ready to add ReactJS.

To add ReactJS to my solution, I opened the NuGet Package Manager and added the ReactJS packages. These packages would allow me to use .jsx files in my project.

After adding the packages, I created a new file to hold my ReactJS code (data.jsx).  Because my implementation was very simple, I adjust added all of my code into this file.

Note: Instead of explaining every piece, I’ll just show you whole file and add some notes.

In this file, I’m added a few functions:

The ReactJS code to piece it all together is the render function. In this one call, I specify the URL (my HighScores action in the Home controller) and the interval (10000 = 10 seconds).  These two values are passed to the HighScores function are used to set the URL from where the scores are retrieved and how often.

Note: In order to get the /HIghScores page to load, I added the following to RouteCOnfig.cs file.

Lastly, I added references to the data.jsx and ReactJS files (using a CDN) to my shared layout.

With all of the code in place, I was ready to F5 it and see the results. I confirmed the page loaded everything up and the scores were properly retrieved from Kentico Draft.

I then added an epic Tetris score I got, to make sure the ReactJS was working correctly. In Draft, I created a new content item for my score. (Don’t believe my score? Ask Brian McKeiver about it. He said I wasn’t allowed compete in the tournament.)

After entering the score, I switched back over to the site and waited for the ReactJS code to call the HighScores action. Once this completed, I confirmed the site updated with the new values.

I then deployed the site to Azure Web Apps, to get it running quickly. Azure Web Apps are just about the easiest hosting I’ve worked with and I knew it would be a great fit for the site. To deploy it as soon as possible, I clicked Publish on the solution in Visual Studio and targeted my Web App.

If you want to check out the tournament site, view it here.

In case you wondering, here is the list of technologies and other infomration about the site.

In this blog, I showed you how to quickly integrate Kentico Cloud with ReactJS. This solution was perfect for my scenario as I needed to build a site quickly and had some very simple content to display. Through Kentico Draft, I could quickly define my content and enter my scores. Using Kentico Deliver, I easily retrieved the values to display. Then with a little ReactJS functionality, I was able to set up the site to dynamically update scores automatically.

I hope this shows you what’s possible Kentico Cloud and different frameworks. Whether it’s a Chabot, micro-site, a full ReactJS site, or any other application you need to get up and running quickly, Kentico Cloud can help you produce your sites quickly.  And when it comes to making a site for a conference, speed is the key. Now, time to go play some more Tetris. Good luck!

Here is the full Home Controller code.

This blog is intended for informational purposes only and provides an example of one of the many ways to accomplish the described task. Always consult Kentico Documentation for the best practices and additional examples that may be more effective in your specific situation.

Creating a ReactJS Site with Kentico Cloud