X

The Digital Experience Platform blog covers the latest in innovative technologies to help you transform your business.

Build your blog site using React JS and Oracle Content Management

Ankur Saxena
Principal Product Manager

Here is a way to build your Website using React JS and headless content management system. In this blog I will be talking about how you can use headless Oracle Content Management and build your Blog Site in React JS.

A high level overview  of our blog site samples is available in my previous blog “Introducing a Blog Site sample in your favorite technology using Oracle Content Management as a Headless CMS”. Using Oracle Content Management as a headless CMS enables developers to focus on the website development which only needs to be done once and then moving forward content contributors just focus on writing blogs with rich content.

To go deeper into the React JS, we have also created a video to provide you with more details and internals on React JS blog sample

 This blog post explains how you can download the oce-react-blog-sample from GitHub and try it yourself,

The first step is to clone the sample into your existing local directory folder and then change the directory to the one you have just cloned.

username@user-dir ~/projects> git clone https://github.com/oracle/ oce-react-blog-sample

username@user-dir ~/projects> cd oce-react-blog-sample

username@user-dir ~/p/oce-react-blog-sample>

Before we proceed, make sure you install all the dependencies involved to run this project by running the npm install command.

username@user-dir ~/p/oce-jet-blog-sample> npm install

Once you open the codebase that you have just cloned in your machine in a code editor, you will see the following directory structure (Atom code editor)

Go to src /.env file and provide the serverUrl and channelToken. We have placed Oracle hosted public serverUrl and channelToken for this sample to run easily. When you are ready with your own Oracle Content Management account, you can replace the server URL to your own instance and provide token for your own channel.

Next, we need to spin up a server.

First let’s go ahead and run a Build by typing a npm run build command to put together a server bundle and client bundle to make our universal react sample to be available on our local machine.

username@user-dir ~/p/oce-react-blog-sample> npm run build

Now, we just need to run the npm run start command.

username@user-dir ~/p/oce-react-blog-sample> npm run start

 

Our universal React JS sample will start running in a browser @ localhost:8000.

The sample contains a list of blog topics and when we navigate into these topics, we can see a list of blog articles written on the respective topic. Furthermore, user can then tap on any of the blog tiles to read the full blog article.

All the content displayed by the sample is dynamic and is fetched at runtime from Oracle Content Management.

To dive deeper into how it works we have created a detailed video to provide you with more information on the internals of the code. You can also check out the tutorial, Build a Blog in JavaScript with Headless Oracle Content and Experience.

If you are interested in trying out more samples using various technologies, check out the Oracle Content Management Samples page.

Before starting with the tutorials, if you have not set up an Oracle Content Management account yet, please have a look at our Quick Start Guide. To learn more abour Oracle Content Management, you can read overview of Oracle Content Management and if you are interested in headless development you will want to have a look at Oracle Content Management as Headless CMS.

Conclusion

Developers can simplify the creation of Blog Sites using headless Oracle Content Management and can quickly build Blog Sites. Now, developers can easily download and try oce-react-blog-sample. They also can go through oce-react-blog-sample tutorial and learn how to fetch content from Oracle Content asset repository.

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.