React JS front end working with Umbraco REST API

Posted 14 November 2018 by Darren Welch

Umbraco & React

I had been playing with the idea of having Umbraco feed a front end application built in one of the Javascript heavyweights

Angular
React
Vue

I had previously used Angular and enjoyed it.  So for this I choose React, as it also gave me the opportunity to learn the basics of React.

 

Umbraco Headless

The first place I turned to was Umbraco Headless but I choose against it for the following reasons:

  • Firstly and most importantly.  It's not available yet
  • It will initially only be available for Umbraco Cloud.

 

Umbraco REST API
Next I looked at Umbraco REST API.  Unfortunately this is unsupported by Umbraco HQ, but the code is freely available on Github.

 

I decided to use this.  I'm not going to add a step by step guide on my page, as there is already a brilliant explanation by Marcin Zajkowski on 24days.in

 

Following that guide it is very easy to set up Umbraco API.  Then all you have to do is create your front end application, authorise and load the data.  

 

I created a React front end to load the content from my Umbraco API.  

 

Umbraco Backoffice

 

and this is the end solution (this is just a proof of concept, there are plenty more things I want to do with this.)

TIPS

  • To load images it's easier if you use the file upload tool.
  • To load HTML from the richtext editor, you need to explicitly allow it by using the 
    dangerouslySetInnerHTML.

 

USEFUL LINKS





Darren Welch

By

Darren Welch


  14 November 2018


Contact me online

Advertisment


Tags


webapi api umbraco rest react vue angular javascript

Has this helped?


If this has saved you time and you are feeling generous, why not buy me a coffee.

Thank You cup of coffee

Related Content