Bundling a React Component library to be used in non-React application - Hosting and testing on Apache server (Part - III)

In this part-III of the series, we will host and test the component library using Apache server.

Hosting the component library on Apache server

As we have bundled our html, css and js/jsx Carousel.css and Carousel.js ready, lets host them on Apache server.

I have already downloaded, installed and configured apache server. Refer the Apache official site for download as per your choice and platform.

To configure your apache server on Windows, refer the steps mentioned here.

Post configuration, copy the index.html, my-carousel.css and my-carousel.js files to the htdocs/site folder and run the server.

In your browser's address bar, type in http://localhost:PORT_NUMBER. In my case, I have hosted it default to 80. Hence my url is http://localhost:80/. 

Voila! Your site is rendered!

Quick Check 

Lets quickly check if our react component is working or not. As we haven't yet integrated React carousel component with other application, we can leverage our HTML to suggest if it will work or not. If you have setup HTML, you would be able to see carousel in the browser by following below steps:

• Go to Console and type getReactCarouselRenderer and check if it is initialized

• If so, type in let carouselRenderer = getReactCarouselRenderer()

• create a list of items that you want to show on carousel, ex., books and initalized the list

• call carouselRenderer takes 2 parameters, first is carousel items and second is id of the element where you want that carousel to be displayed

• 
  
  

• In my case, id of the element is root and array containing the carousel items is myBooks. 
• The moment we run carouselRenderer(myBooks, "root"), we could see a functioning carousel component!
•