Using React and Redux inside Alfresco Share

Using React and Redux inside Alfresco Share

Sergey Palyukh
10. Jul ‘20


The article for Alfresco developers that describes how to inject React and Redux into custom Alfresco Share page. It is a step by step guide which covers requirements for using React in Alfresco Share, a description of how to compile jsx files and how to define React components via Dojo

1. Add surf-module to your Alfresco Share add-on

You can introduce with extension modules by the link (as for example, path to the file with extension can be ${path_to_your_share_module}/src/main/resources/alfresco/web-extension/site-data/extensions/share-reactsample-customization.xml)

Code module snippet below:


2. Download required React libraries

You must download the following libraries:

  • react.js
  • redux.js
  • react-redux.js
  • react-dom.js

You can find libs on this site

Then put files into ${path_to_your_share_module}/src/main/resources/web/js/lib folder, also create an empty folder called react-components there (we will use it later for our custom .jsx files).

3. Implement your business logic in jsx files

By way of example, we have implemented pretty straightforward logic which allows to watch the list of portfolio items and search by name. Copy content of the files bellow into ${path_to_your_share_module}/src/main/resources/web/js/lib/react-components folder or implement you own business logic based on these examples.

  • Form.jsx:

const Form = (React,
              Search) => {
  return {

    action(type, value, selectedName) {
      return { type: type, [selectedName]: value};

    onSearch(searchTerm) {
      store.dispatch(this.action("SEARCH_SET", searchTerm, 'searchTerm'));

    filterArticle(searchTerm, articles) {
      let includes = articles.filter(article => article.title.toLowerCase().includes(searchTerm.toLowerCase()));

      if (searchTerm === '' && includes.length === 0 ) {
        includes = articles;

      store.dispatch(this.action("UPDATE_ARTICLE_SET", includes, 'articles'));

      return includes;

    render() {
      const Form = this.props;

      return (


); } } }; define([ 'dojo/_base/declare', 'react', "redux", "react-redux", "react-components/Store", "react-components/article/Articles", "react-components/search/Search", ], function (declare, React, Redux, ReactRedux, Store, Articles, Search) { const mapStateToProps = state => ({ initArticles: state.articlesState.initArticles, searchTerm: state.searchState.searchTerm, }); let store = Store.prototype; let FormDeclared = declare( "Form", [React.Component], Form(React, store, Articles, Search)); return ReactRedux.connect(mapStateToProps)(FormDeclared) });
  • Reducer.jsx

], function (declare,
             SearchReducer) {

  return declare("Reducer", null, {
    rootReducer: function rootReducer() {
      let articleReducer = ArticleReducer.prototype.articleReducer;
      let searchReducer = SearchReducer.prototype.searchReducer;

      return redux.combineReducers({
        articlesState: articleReducer,
        searchState: searchReducer

  • Runner.jsx

], function (React, ReactDOM, Redux, ReactRedux, Form, Store) {

  let store = Store.prototype;

, document.getElementById('reactRender') ); });
  • Store.jsx

  "react-components/Reducer"], function (declare,
                                    Reducer) {

  const store = Redux.createStore(Reducer.prototype.rootReducer());

  return declare("Store", null, store);


  • article/Article.jsx

define(['dojo/_base/declare','react'], function (declare, React) {

  return declare("Article", [React.Component], {

    render() {
      return (

  • article/Articles.jsx

const Articles = (
              Article) => {
  return {

    render() {
      const articles = this.props;
      return (
    { =>
  • )}
); } } }; define([ 'dojo/_base/declare', 'react', "redux", "react-redux", "react-components/article/Article" ], function (declare, React, Redux, ReactRedux, Article) { return declare( "Articles", [React.Component], Articles(React, Article)); });
  • article/ArticleReducer.jsx

define(['dojo/_base/declare'], function (declare) {

  const INITIAL_STATE = {
    initArticles: [
      { id: '0', title: 'EXTRA DASHBOARD LAYOUTS ', url: '' },
      { id: '1', title: 'DOCPROCESSOR INTEGRATION ADD-ON', url: '' },
      { id: '2', title: 'ALFRESCO MULTIDASHBOARDS ADD-ON', url: '' },
      { id: '3', title: 'RESET PASSWORD ADD-ON', url: '' },
      { id: '4', title: 'ALFRESCO SITES LOGO CHANGER', url: '' },
      { id: '5', title: 'ALFRESCO SOCIAL LOGIN ADD-ON', url: '' },
      { id: '6', title: 'SELF REGISTRATION ADD-ON', url: '' },
      { id: '7', title: 'ALFRESCO SHARE THEME BUILDER', url: '' },
      { id: '8', title: 'VIEWCOVID', url: '' },
      { id: '9', title: 'INTERCHANGE', url: '' },
      { id: '10', title: 'RUBBYHASUI', url: '' },
      { id: '11', title: 'DOCPROCESSOR', url: '' },

  return declare("ArticleReducer", null, {

    articleReducer: function articleReducer(state = INITIAL_STATE, action) {
      switch (action.type) {
        case 'UPDATE_ARTICLE_SET':
          return {...state, articles: action.articles};
        case 'RESET' :
          return state = INITIAL_STATE
          return state;


  • search/Search.jsx

define(['dojo/_base/declare','react'], function (declare, React) {

  return declare("Search", [React.Component], {

    render() {
      return (
{this.props.children} this.props.onSearch(} type="text" className={"flex-input"}/>
); } }); });
  • search/SearchReducer.jsx

define(['dojo/_base/declare'], function (declare) {

  const INITIAL_STATE = {
    searchTerm: '',

  return declare("SearchReducer", null, {

    searchReducer: function searchReducer(state = INITIAL_STATE, action) {
      switch (action.type) {
        case 'SEARCH_SET':
          return {...state, searchTerm: action.searchTerm};
          return state;


The declare function is defined in the dojo/_base/declare module. declare accepts three arguments: `className`, `superClass`, and `properties`.

The className as an example ('Form', 'Articles') argument represents the name of the class, including the namespace, to be created. Named classes are placed within the global scope. The className can also represent the inheritance chain via the namespace.

As an example class Form has an inheritance from React.Component. An array of classes signifies multiple inheritances. Properties and methods are inherited from left to right. The first class in the array serves as the base prototype, then the subsequent classes are mixins to that class.

If a property or method is specified in more than one inherited class, the property or method from the last inherited class is used.

4. Install Babel

The babel is required for compilation of jsx files. Execute the following commands from the root folder of your extension (pay attention that Node.js must be already installed on your computer):

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

5. Compile .jsx files

Those files above must be compiled with Babel. Run the following command from ${path_to_your_share_module}/src/main/resources/web/js/lib/react-components:

npx babel ./ -d ./ --presets react-app/prod

6. Initialize Alfresco Share page

Next we need to configure a page where our React application will be rendered. To do we have to create 3 files: page descriptor, template instance, page template.

  • ${path_to_your_share_module}/src/main/resources/alfresco/web-extension/site-data/pages/react-sample.xml

    React Sample
    React Sample with Redux(store,connect)

  • ${path_to_your_share_module}/src/main/resources/alfresco/web-extension/site-data/template-instances/react-sample.xml




  • ${path_to_your_share_module}/src/main/resources/alfresco/web-extension/templates/org/alfresco/react-sample.ftl

<#include "include/alfresco-template.ftl" />

    <@link rel="stylesheet" type="text/css" href="${url.context}/res/share-reactsample/react-sample/style.css" />
    <@script type="text/javascript" src="${url.context}/res/js/lib/react-components/Runner.js">


    <@markup id="alf-hd">
<@region scope="global" id="share-header" chromeless="true"/>
<@markup id="bd">
<@templateFooter> <@markup id="alf-ft">
<@region id="footer" scope="global" />

Pay attention to the div with id reactRender. It is the main div where our react app will be rendered

The whole project structure is shown on the image below:

That's all what you need to do. Then just compile amp and deploy it to your Alfresco Share. New page will be available by the following URL - http://localhost:8080share/page/react-sample. The final result is presented on the screenshot below:

Source Code

The source code of the module you can clone from our GitHub repo -

Have any questions? Don't hesitate to contact us, we are here and ready to help!