EPiServer Headless Content Api Demo with ReactJS

During the last couple of days I was working with the new EPiServer Content Delivery APIs, I have all code shared to a Github repo

There is a Visual Studio Project configured to serve as a Headless CMS, built on top of Alloy MVC template. Also a ReactJS basic app built with react-create-app and consuming the EPiServer Content Delivery Apis.

Below I will take you through the Process of setting it up:

• git clone https://github.com/sunnyuff/EPiServer-React-ContentApi-Demo 
• cd EPiServer-React-ContentApi-Demo
• cd react-interface
• npm start  -- Now react app is running, Api is not availabe as we need to run the EPiServer VS Project
• Open Visual Studio and open project
• go to the folder EpiserverPOC and open EpiserverPOC.sln
• Run the app.
• Reload React App

At this point you should be able to see the React app running and the homepage should be similar to episerver front-page (Not all blocks and components are added for demo purposes.)

Other pages just exists to demonstrate Routing in react, so just few items from page.

Remember to get output from the Api, header information is very important, otherwise you will get below:

{ Error: { Code: "NotFound", Message: "Content was not found" } }  

EPiServer Content Delivery API - Part I

EPiServer Content Delivery API - Part II

Besides these, I would like to add that in the react app you see I am doing a lot of promise based calls recursively, actually I found a better way, you can use expand=[item you want to be expanded or have detail info] 

Have a look at the below two api calls...

• http://[serverurl:port]/api/episerver/v1.0/content/5
• http://[serverurl:port]/api/episerver/v1.0/content/5?expand=ProductPageLinks

And thanks to @dmbowen, @slamtitan & @davidknipe for sharing great posts and information, really helped!

Please get in touch if there is something you need my help with,

Thanks,

Sun.