{"id":37467,"date":"2016-09-28T06:27:56","date_gmt":"2016-09-28T13:27:56","guid":{"rendered":"\/blog\/?p=11916"},"modified":"2025-04-08T13:39:11","modified_gmt":"2025-04-08T11:39:11","slug":"getting-started-with-reactjs-and-exo-platform-portlet-development","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/getting-started-with-reactjs-and-exo-platform-portlet-development\/","title":{"rendered":"Getting started with ReactJS and eXo Platform portlet development"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"37467\" class=\"elementor elementor-37467\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-adc5d92 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"adc5d92\" data-element_type=\"section\" id=\"sec-image-title\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-61eafe6\" data-id=\"61eafe6\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-24cc9dd elementor-align-left elementor-widget elementor-widget-post-info\" data-id=\"24cc9dd\" data-element_type=\"widget\" id=\"author-time\" data-widget_type=\"post-info.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/plugins\/elementor\/assets\/css\/widget-icon-list.min.css\"><link rel=\"stylesheet\" href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/plugins\/elementor-pro\/assets\/css\/widget-theme-elements.min.css\">\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-a070ed2 elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-custom\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"bsf-rt-reading-time\"><span class=\"bsf-rt-display-label\" prefix=\"Reading Time\">\n\t\t<\/span> <span class=\"bsf-rt-display-time\" reading_time=\"8\"><\/span> \n\t\t<span class=\"bsf-rt-display-postfix\" postfix=\"min\"><\/span><\/span>\n\t\t  \n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-c638fde elementor-inline-item\" itemprop=\"author\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/author\/gpicavet\/\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author\">\n\t\t\t\t\t\t\t\t\t\tGr\u00e9gory Picavet\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-f24db26 elementor-inline-item\" itemprop=\"datePublished\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-calendar\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date\">\n\t\t\t\t\t\t\t\t\t\tseptembre 28, 2016\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-1379bea undertitle elementor-widget elementor-widget-heading\" data-id=\"1379bea\" data-element_type=\"widget\" id=\"bigtitle\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\r\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h1 class=\"elementor-heading-title elementor-size-default\">Getting started with ReactJS and eXo Platform portlet development<\/h1>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-629944a elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"629944a\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\r\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-bottom:0;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-divider\">\r\n\t\t\t<span class=\"elementor-divider-separator\">\r\n\t\t\t\t\t\t<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4ae7d27 elementor-widget elementor-widget-text-editor\" data-id=\"4ae7d27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\r\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<blockquote>This article is a repost from <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/gpicavet.github.io\/jekyll\/update\/2016\/09\/17\/getting-started-exo-reactjs.html\" target=\"_blank\" rel=\"noopener\">Gr\u00e9gory Picavet&#8217;s own blog<\/a>. Gr\u00e9gory is the tech lead on collaborative portal projects for a French Ministry, and a web development passionate.<\/blockquote>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f7d80c6 elementor-widget elementor-widget-text-editor\" data-id=\"f7d80c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tTech Lead on a collaborative portal at a French Ministry, and web development passionate\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-fd0d5c5\" data-id=\"fd0d5c5\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-97f7756 elementor-widget elementor-widget-image\" data-id=\"97f7756\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\r\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/ReactJSandeXoPlatformPortlet-_1000x665-q0eg27ciqn9wlxyeqlrwtb546af538emb22v4ym360.jpg\" title=\"ReactJSandeXoPlatformPortlet-_1000x665\" alt=\"ReactJSandeXoPlatformPortlet-_1000x665\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ea5605 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ea5605\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b0ffeed\" data-id=\"b0ffeed\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d5c11a table-content-cs elementor-widget elementor-widget-table-of-contents\" data-id=\"1d5c11a\" data-element_type=\"widget\" id=\"sticky-tds\" data-settings=\"{&quot;exclude_headings_by_selector&quot;:&quot;.am__title,h6&quot;,&quot;marker_view&quot;:&quot;bullets&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;vh&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;headings_by_tags&quot;:[&quot;h2&quot;,&quot;h3&quot;],&quot;_animation&quot;:&quot;none&quot;,&quot;icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;vh&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;vh&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;hierarchical_view&quot;:&quot;yes&quot;}\" data-widget_type=\"table-of-contents.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor-pro - v3.8.2 - 21-11-2022 *\/\n.elementor-widget-table-of-contents .elementor-toc__header-title{color:var(--header-color)}.elementor-widget-table-of-contents.elementor-toc--collapsed .elementor-toc__toggle-button--collapse,.elementor-widget-table-of-contents:not(.elementor-toc--collapsed) .elementor-toc__toggle-button--expand{display:none}.elementor-widget-table-of-contents .elementor-widget-container{min-height:var(--box-min-height);border:var(--box-border-width,1px) solid var(--box-border-color,#a4afb7);border-radius:var(--box-border-radius,3px);background-color:var(--box-background-color);-webkit-transition:min-height .4s;-o-transition:min-height .4s;transition:min-height .4s;overflow:hidden}.elementor-toc__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:var(--box-padding,20px);background-color:var(--header-background-color);border-bottom:var(--separator-width,1px) solid var(--box-border-color,#a4afb7)}.elementor-toc__header-title{font-size:18px;margin:0;color:var(--header-color)}.elementor-toc__toggle-button{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.elementor-toc__toggle-button i{color:var(--toggle-button-color)}.elementor-toc__toggle-button svg{height:1em;width:1em;fill:var(--toggle-button-color)}.elementor-toc__spinner-container{text-align:center}.elementor-toc__spinner{font-size:2em}.elementor-toc__spinner.e-font-icon-svg{height:1em;width:1em}.elementor-toc__body{padding:var(--box-padding,20px);max-height:var(--toc-body-max-height);overflow-y:auto}.elementor-toc__body::-webkit-scrollbar{width:7px}.elementor-toc__body::-webkit-scrollbar-thumb{background-color:#c2cbd2;border-radius:10px}.elementor-toc__list-wrapper{list-style:none;padding:0}.elementor-toc__list-item{margin-bottom:.5em}.elementor-toc__list-item.elementor-item-active{font-weight:700}.elementor-toc__list-item .elementor-toc__list-wrapper{margin-top:.5em;margin-left:var(--nested-list-indent,1em)}.elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}.elementor-toc__list-item-text-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-toc__list-item-text-wrapper:before,.elementor-toc__list-item-text-wrapper i{margin-right:8px;color:var(--marker-color)}.elementor-toc__list-item-text-wrapper svg{margin-right:8px;fill:var(--marker-color);height:var(--marker-size,.5em);width:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper i{font-size:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper:before{font-size:var(--marker-size,1em)}.elementor-toc--content-ellipsis .elementor-toc__list-item-text{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.elementor-toc__list-items--collapsible>.elementor-toc__list-wrapper>.elementor-toc__list-item>.elementor-toc__list-wrapper{display:none}.elementor-toc__heading-anchor{position:absolute}.elementor-toc__body .elementor-toc__list-item-text{color:var(--item-text-color);-webkit-text-decoration:var(--item-text-decoration);text-decoration:var(--item-text-decoration)}.elementor-toc__body .elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}ol.elementor-toc__list-wrapper{counter-reset:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item{counter-increment:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper:before{content:counters(item,\".\") \". \"}<\/style>\t\t<div class=\"elementor-toc__header\">\n\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tContent\t\t\t<\/h4>\n\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<i class=\"elementor-toc__spinner eicon-animation-spin eicon-loading\" aria-hidden=\"true\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-d06692f\" data-id=\"d06692f\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a74a3b1 elementor-widget elementor-widget-text-editor\" data-id=\"a74a3b1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tHere is the first post of what I hope will be many posts dedicated to web development!\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-af52c63 elementor-widget elementor-widget-text-editor\" data-id=\"af52c63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<p>In this article, I would like to share some information about the <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/community.exoplatform.com\/\" target=\"_blank\" rel=\"noopener\">eXo Platform portal<\/a> and ReactJS. You\u2019ll learn how to set up a simple ReactJS and <a href=\"https:\/\/www.aegissofttech.com\/nodejs-development-services.html\" target=\"_blank\" rel=\"noopener\">node.js development<\/a> stack, build a standalone app, and package it all to a portlet. If you&#8217;re looking to develop React.js applications on the Exo Platform, you should consider <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/binary-studio.com\/hire-node-js-developers\" target=\"_blank\" rel=\"noopener\"><u>hiring Node.js developers<\/u><\/a> with experience in both technologies. Learn how to <a href=\"https:\/\/www.dhiwise.com\/post\/from-figma-to-react-and-beyond\" target=\"_blank\" rel=\"noopener\">Create Figma to React<\/a> with this comprehensive tutorial.<\/p>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-6a4b3b9 elementor-widget elementor-widget-text-editor\" data-id=\"6a4b3b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tHow did we get to React? eXo Platform comes with a portlet framework called Juzu that lets developers build interactive client-side UIs. While many developers in my organization have mastered several frameworks, they were not very comfortable with Juzu. At that time, my office was heavily promoting ReactJS. In addition, the eXo Platform portlet does not require any specific technology to build portlets, and you can even use your own! If you don\u2019t know anything about ReactJS, take a look at <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/facebook.github.io\/react\/\" target=\"_blank\" rel=\"noopener\">the site<\/a> first.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-d8e31c6 elementor-widget elementor-widget-text-editor\" data-id=\"d8e31c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<p>To efficiently manage JS library dependencies, we will use <a href=\"https:\/\/www.apriorit.com\/our-expertise\/node-js-development-services\" target=\"_blank\" rel=\"noopener\">node.js development services<\/a> and npm. We\u2019ll then use Maven to build and package the portlet.<\/p>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-81e8c6a elementor-widget elementor-widget-text-editor\" data-id=\"81e8c6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThough JavaScript is cool for simple projects, it\u2019s not Java. It\u2019s more painful to build robust JavaScript mainly because it lacks a static, strong system. Fortunately, some standards have emerged from the mess over the last few years! You can now use languages like CoffeeScript, TypeScript, and ES2015, which also come with syntax improvements. However, these languages will not execute in the browser, except for ES2015 which is the next version of javascript but still only partially supported. ReactJS also comes with a syntax called JSX, which mixes JS and HTML tags, so we\u2019ll have to transpile it as well. Babel will be good for that task, and we\u2019ll use this time with ES2015.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-dd98642 elementor-widget elementor-widget-text-editor\" data-id=\"dd98642\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tIt\u2019s time to open your IDE. If you do not have one, try <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener\">Atom<\/a>. It is lightweight and open source, and it works well with JS. Don\u2019t forget to install the JSX plugin!\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b346687 elementor-widget elementor-widget-text-editor\" data-id=\"b346687\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThe source code is available <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/github.com\/gpicavet\/react-portlet\" target=\"_blank\" rel=\"noopener\">here<\/a>. Please follow the instructions for building and deploying in the portlet section.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-389149e myheader1 elementor-widget elementor-widget-heading\" data-id=\"389149e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">1. node.js stack and standalone application<\/h2>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c7ab085 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"c7ab085\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-divider\">\r\n\t\t\t<span class=\"elementor-divider-separator\">\r\n\t\t\t\t\t\t<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2983eec elementor-widget elementor-widget-text-editor\" data-id=\"2983eec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>As I said before, the stack is based on node.js. First, <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">install<\/a> it on your system. It will come with npm, which you can use to install the JS dependencies (this works like Maven).<\/li>\n \t<li>Create a directory named \u201creact-portlet\u201d and generate an initial package.json file:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f2f9566 elementor-widget elementor-widget-code-highlight\" data-id=\"f2f9566\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm init<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-621e9f5 elementor-widget elementor-widget-text-editor\" data-id=\"621e9f5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tLet the default values for this time be:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-e8a5f41 elementor-widget elementor-widget-text-editor\" data-id=\"e8a5f41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Next, install the React and Moment libraries to deal with the date format later:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-50bf222 elementor-widget elementor-widget-code-highlight\" data-id=\"50bf222\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm install --save react@15.3.1 react-dom@15.3.1 moment<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-633ee1f elementor-widget elementor-widget-text-editor\" data-id=\"633ee1f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: React has a core part and a specific lib to render to DOM.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb1732 elementor-widget elementor-widget-text-editor\" data-id=\"dbb1732\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Install the Babel transpilers as a dev dependency:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-d54302e elementor-widget elementor-widget-code-highlight\" data-id=\"d54302e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-442ff10 elementor-widget elementor-widget-text-editor\" data-id=\"442ff10\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>We will need the webpack library to gather all the JS modules into a bundle file and do some \u201chot rebuilding.\u201d We\u2019ll also install the express HTTP server to quickly test our app in standalone mode.<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b73db13 elementor-widget elementor-widget-code-highlight\" data-id=\"b73db13\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm install \u2013save-dev webpack express<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-defa694 elementor-widget elementor-widget-text-editor\" data-id=\"defa694\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tAt this point, package.json has been updated (with the \u2013save argument), and the node dependencies have been installed in the \u201cnode_modules\u201d directory. package.json must be added to version control so anyone can build your project.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-ca32eb6 elementor-widget elementor-widget-text-editor\" data-id=\"ca32eb6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>The project structure has to be Maven-compliant (keep in mind that we have to build a portlet!):<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-49dae34 elementor-widget elementor-widget-code-highlight\" data-id=\"49dae34\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"show-plain-default:true lang:default decode:true \">\/\r\n\u251c\u2500src\r\n\u2502  \u251c\u2500main\r\n\u2502  \u2502  \u251c\u2500java\r\n\u2502  \u2502  \u251c\u2500js\r\n\u2502  \u2502  \u251c\u2500webapp\r\n\u2502  \u2502      \u251c\u2500css\r\n\u2502  \u2502      \u251c\u2500META-INF\r\n\u2502  \u2502      \u251c\u2500WEB-INF\r\n\u2502  \u251c\u2500static\r\n\u251c\u2500package.json\r\n\u251c\u2500pom.xml<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4298eb5 elementor-widget elementor-widget-text-editor\" data-id=\"4298eb5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Now we can create the first React component, \u201cActivities,\u201d to fetch the user\u2019s activities from the server and transform them into HTML. To use the modularity of React, we will also create a child component to render a single activity. First, create the \u201cActivities.jsx\u201d file in \/src\/main\/js:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4b6c010 elementor-widget elementor-widget-code-highlight\" data-id=\"4b6c010\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {Activity} from '.\/Activity.jsx';\r\n\r\nclass Activities extends React.Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {activities:[]};\r\n  }\r\n\r\n  componentDidMount() {\r\n    fetch(\"\/rest\/v1\/social\/activities?limit=\"+this.props.limit+\"&amp;expand=identity\",\r\n      {credentials: 'include'})\r\n    .then((res) =&gt; {\r\n        return res.json();\r\n      })\r\n    .then((json) =&gt; {\r\n       this.setState(json);\r\n    })\r\n  }\r\n\r\n  render() {\r\n    var list = this.state.activities.map( (act) =&gt; {\r\n      return &lt;Activity key={act.id} {...act} \/&gt;\r\n    });\r\n    return &lt;ul&gt;{list}&lt;\/ul&gt;;\r\n  }\r\n\r\n}\r\n\r\nReactDOM.render(&lt;Activities limit=\"10\"\/&gt;, document.getElementById('app'));<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-230cd48 elementor-widget elementor-widget-text-editor\" data-id=\"230cd48\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThe \u201cActivity.jsx\u201d file in \/src\/main\/js will be:\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4afb521 elementor-widget elementor-widget-code-highlight\" data-id=\"4afb521\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">import React from 'react';\r\nvar moment = require('moment');\r\n\r\nexport class Activity extends React.Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n  }\r\n\r\n  render() {\r\n      var titleHtml = {__html:this.props.title};\r\n      return (\r\n          &lt;li&gt;\r\n              &lt;img src={this.props.identity.profile.avatar===null ? \"\/eXoSkin\/skin\/images\/system\/UserAvtDefault.png\":this.props.identity.profile.avatar} \/&gt;\r\n              &lt;div className=\"block\"&gt;\r\n                &lt;div className=\"header\"&gt;\r\n                  &lt;strong&gt;{this.props.identity.profile.fullname}&lt;\/strong&gt;\r\n                  &lt;br\/&gt;\r\n                  Posted : &lt;span&gt;{moment(new Date(this.props.createDate)).fromNow()}&lt;\/span&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div dangerouslySetInnerHTML={titleHtml}\/&gt;\r\n              &lt;\/div&gt;\r\n             &lt;\/li&gt;);\r\n  }\r\n\r\n}<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-7fc5936 elementor-widget elementor-widget-text-editor\" data-id=\"7fc5936\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tWe are using the ES6\/ES2015 syntax with class inheritance. In short, the React lifecycle will initiate the state, mount the component to the DOM, fetch data from the API, and render it. There\u2019s a method for each lifecycle step. For example, using fetch for componentDidMount is the safest way due to the asynchronous updates.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cc414e6 elementor-widget elementor-widget-text-editor\" data-id=\"cc414e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tWhenever the state is modified, the render method is called, and it checks which part of the DOM has to be updated. In this example, we won\u2019t take any actions, so the state will not be modified. A good React pattern to use whenever possible is to manage the state at the highest-level component (which is Activities here) and pass the data to the child components (which is Activity here) via the \u201cprops.\u201d Thus, we could replace the Activity class with the react <a style=\"color: #2f5e92; text-decoration: underline;\" href=\"https:\/\/facebook.github.io\/react\/docs\/reusable-components.html#stateless-functions\" target=\"_blank\" rel=\"noopener\">stateless function<\/a> pattern to get rid of the useless lifecycle.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-653b4ba elementor-widget elementor-widget-text-editor\" data-id=\"653b4ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tDid you notice the weird attribute \u201cdangerouslySetInnerHTML\u201d? React is XSS-proof, but sometimes you have to inject preformed HTML code. You should do this it the HTML has been sanitized on the server side.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b9602f3 elementor-widget elementor-widget-text-editor\" data-id=\"b9602f3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Now we create index.html in \/src\/static and declare the React mount tag as a simple div:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-fe55217 elementor-widget elementor-widget-code-highlight\" data-id=\"fe55217\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:xhtml decode:true \">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"\/css\/main.css\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"app\" class=\"container\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;script src=\"js\/bundle.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-324cbb0 elementor-widget elementor-widget-text-editor\" data-id=\"324cbb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: We include the \u201cbundle.js\u201d script that will be generated with webpack.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2aa3aed elementor-widget elementor-widget-text-editor\" data-id=\"2aa3aed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>To generate the bundle, we create a \u201c\/src\/main\/js\/index.js\u201d file that will import the root component of our app (which is Activities here):<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-eecae53 elementor-widget elementor-widget-code-highlight\" data-id=\"eecae53\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">import Activities from '.\/Activities.jsx';<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4d55b7b elementor-widget elementor-widget-text-editor\" data-id=\"4d55b7b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: Webpack will use this file as an entry point to pack all the imports.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-e774006 elementor-widget elementor-widget-code-highlight\" data-id=\"e774006\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">var path = require('path');\r\nvar webpack = require('webpack');\r\n\r\nmodule.exports = {\r\n  devtool : 'cheap-module-source-map',\r\n  entry: '.\/src\/main\/js\/index.js',\r\n  output: { path: path.join(__dirname, 'target\/react-portlet\/js'),\r\n\t    filename: 'bundle.js'},\r\n\r\n  module: {\r\n    loaders: [\r\n      {\r\n        test: \/.jsx?$\/,\r\n        loader: 'babel-loader',\r\n        exclude: \/node_modules\/,\r\n        query: {\r\n          presets: ['es2015', 'react']\r\n        }\r\n      }\r\n    ]\r\n  },\r\n\r\n  plugins:[\r\n  new webpack.DefinePlugin({\r\n    'process.env':{\r\n      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)\r\n    }\r\n  })]\r\n};<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b464dbb elementor-widget elementor-widget-text-editor\" data-id=\"b464dbb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tHere we use the \u201cindex.js\u201d file that we just created. Then we define the output folder for bundle.js. This folder corresponds to the Maven target directory (it will be useful later). Then we define the Babel loader, which takes over transpilation. The define plugin just transmits the NODE_ENV variable to the loader parser to prune the dev code in the React lib at build time.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-a95ed43 elementor-widget elementor-widget-text-editor\" data-id=\"a95ed43\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Before we run the app, our static files need to be copied to the target directory as well. This can be done with scripts in \u201c\/package.json\u201d:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-7943db2 elementor-widget elementor-widget-code-highlight\" data-id=\"7943db2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">\"scripts\": {\r\n  \"copy\": \"cp -R src\/static\/* target\/static &amp; cp -R src\/main\/webapp\/css target\/static\"\r\n}<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c8e3e03 elementor-widget elementor-widget-text-editor\" data-id=\"c8e3e03\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: In a real project, you should consider using a library like Gulp to externalize complex build tasks and become OS independent!\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-e8e983a elementor-widget elementor-widget-text-editor\" data-id=\"e8e983a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tCall the script:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-646e8b0 elementor-widget elementor-widget-code-highlight\" data-id=\"646e8b0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm run copy<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-af6d9be elementor-widget elementor-widget-text-editor\" data-id=\"af6d9be\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Next, we create the express HTTP server in the \/server.js file.<\/li>\n \t<li>The express server will manage our standalone mode and serve static files (CSS, JS, HTML) and proxy API requests to static files.<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b84c423 elementor-widget elementor-widget-code-highlight\" data-id=\"b84c423\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">var express    = require('express');        \/\/ call express\r\nvar app        = express();                 \/\/ define our app using express\r\nvar port       = 3000;  \t\t\t      \/\/ set our port\r\n\r\n\/\/ REGISTER STATIC FILES -------------------------------\r\napp.use(express.static(__dirname+\"\/target\/static\/\"));\r\napp.use(express.static(__dirname+\"\/target\/react-portlet\/\"));\r\n\r\n\/\/ ROUTES FOR OUR API\r\n\/\/ =============================================================================\r\nvar router = express.Router();              \/\/ get an instance of the express Router\r\n\r\nrouter.get('\/v1\/social\/activities', function(req, res) {\r\n    res.set('content-type','application\/json; charset=utf8')\r\n    res.sendFile(__dirname+\"\/target\/static\/api\/activities.json\");\r\n});\r\n\r\nrouter.get('\/avatar.png', function(req, res) {\r\n    res.sendFile(__dirname+\"\/target\/static\/avatar.png\");\r\n});\r\n\r\n\/\/ REGISTER OUR ROUTES -------------------------------\r\napp.use('\/rest\/api', router);\r\n\r\n\/\/ START THE SERVER\r\n\/\/ =============================================================================\r\napp.listen(port);<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2af24d8 elementor-widget elementor-widget-text-editor\" data-id=\"2af24d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: You have to record real API responses in static files before (look at the source code for an example).\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-169ee8e elementor-widget elementor-widget-text-editor\" data-id=\"169ee8e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Before starting the server, we also want to start webpack in \u201cwatch mode\u201d to be able to build again on any change. Add a \u201cwatch\u201d script with the following commands in \/package.json:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-bafbc1c elementor-widget elementor-widget-code-highlight\" data-id=\"bafbc1c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">\"scripts\": {\r\n  ...\r\n  \"watch\": \"npm run copy &amp;&amp; node node_modules\/webpack\/bin\/webpack.js --progress --colors --watch -d\"\r\n}<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-ac0e203 elementor-widget elementor-widget-text-editor\" data-id=\"ac0e203\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNow just type:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9c8ab55 elementor-widget elementor-widget-code-highlight\" data-id=\"9c8ab55\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm run watch<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c742e83 elementor-widget elementor-widget-text-editor\" data-id=\"c742e83\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tYou should see something like this:\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f595b7c elementor-widget elementor-widget-code-highlight\" data-id=\"f595b7c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"show-plain-default:true lang:default decode:true \">Hash: 0aed17830ca00bbed3fd\r\nVersion: webpack 1.13.2\r\nTime: 4640ms\r\n        Asset     Size  Chunks             Chunk Names\r\n    bundle.js  1.22 MB       0  [emitted]  main\r\nbundle.js.map  1.43 MB       0  [emitted]  main\r\n    + 278 hidden modules<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f5698a0 elementor-widget elementor-widget-text-editor\" data-id=\"f5698a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tLook at the size. Don\u2019t worry though because it is not optimized yet!\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-25519d2 elementor-widget elementor-widget-text-editor\" data-id=\"25519d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThe map file will map source lines from the generated bundle code to the original ES2015 file. It will be downloaded by the browser only when you open the debugger. Note: Static files are not watched; you have to restart the server. We could improve that by writing a simple Gulp script and adding it to the start script.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-d9156ff elementor-widget elementor-widget-text-editor\" data-id=\"d9156ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Now start the server:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cc733a4 elementor-widget elementor-widget-code-highlight\" data-id=\"cc733a4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">npm start<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b9a32 elementor-widget elementor-widget-text-editor\" data-id=\"b1b9a32\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tand enjoy the results at http:\/\/localhost:3000. It should look like this:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-ae0adee elementor-widget elementor-widget-image\" data-id=\"ae0adee\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"580\" height=\"522\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000.png\" class=\"attachment-large size-large wp-image-11929\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000.png 580w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-300x270.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-526x473.png 526w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-364x328.png 364w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-262x236.png 262w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-146x131.png 146w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-100x90.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2016\/09\/screenshot-localhost-3000-33x30.png 33w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-0a9d24d elementor-widget elementor-widget-text-editor\" data-id=\"0a9d24d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>When you\u2019re ready for release, you can add the following script in \/package.json:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-30be9da elementor-widget elementor-widget-code-highlight\" data-id=\"30be9da\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">\"scripts\": {\r\n  ...\r\n  \"release\": \"export NODE_ENV=production &amp;&amp; webpack -p\"\r\n}<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-3c91f44 elementor-widget elementor-widget-text-editor\" data-id=\"3c91f44\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tWe set NODE_ENV equal to production to disable the React dev mode (it helps a lot since it\u2019s a lot slower) and started webpack with the optimizers.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-589fea6 elementor-widget elementor-widget-text-editor\" data-id=\"589fea6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tAfter optimization, the bundle will be three times smaller:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-1d9a210 elementor-widget elementor-widget-code-highlight\" data-id=\"1d9a210\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"show-plain-default:true lang:default decode:true \">Hash: 958d20ab7b77c17c6474\r\nVersion: webpack 1.13.2\r\nTime: 8955ms\r\n        Asset       Size  Chunks             Chunk Names\r\n    bundle.js     418 kB       0  [emitted]  main\r\nbundle.js.map  219 bytes       0  [emitted]  main\r\n    + 278 hidden modules<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-a33e94a elementor-widget elementor-widget-text-editor\" data-id=\"a33e94a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: Did you notice a few warnings from the optimizer? They occur because the library is not always cleaned.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f81e644 elementor-widget elementor-widget-text-editor\" data-id=\"f81e644\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tImportant: The optimized bundle should not be too big (&lt; 1 Mo), so for large apps, you can look at webpack\u2019s code-splitting feature.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-dc0e292 elementor-widget elementor-widget-text-editor\" data-id=\"dc0e292\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: You can still debug the original files in production since the map file is also updated.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-d8fb4f6 elementor-widget elementor-widget-text-editor\" data-id=\"d8fb4f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNow you\u2019re done with this part! You could use this app outside eXo Platform, but you\u2019ll have to adapt the proxy routes in server.js to the eXo backend (which is easy!) and deal with SSO authentication (which is actually the hard part!).\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ed492d2 elementor-hidden-desktop elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ed492d2\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-367ec7b suppblock\" data-id=\"367ec7b\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-89b8b2a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"89b8b2a\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-87a3ee7\" data-id=\"87a3ee7\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a3a0295\" data-id=\"a3a0295\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6507e68 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6507e68\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0b7d359\" data-id=\"0b7d359\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2bd219 elementor-widget elementor-widget-image\" data-id=\"a2bd219\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"159\" height=\"222\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp.png\" class=\"attachment-large size-large wp-image-40335\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp.png 159w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-94x131.png 94w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-64x90.png 64w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-21x30.png 21w\" sizes=\"(max-width: 159px) 100vw, 159px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-9b858de buttonright\" data-id=\"9b858de\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1e1e401 elementor-widget elementor-widget-image\" data-id=\"1e1e401\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"207\" height=\"34\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1.jpg\" class=\"attachment-large size-large wp-image-38144\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1.jpg 207w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-200x33.jpg 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-100x16.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-70x11.jpg 70w\" sizes=\"(max-width: 207px) 100vw, 207px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f6e882e elementor-widget elementor-widget-heading\" data-id=\"f6e882e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">FREE WHITE PAPER<\/h6>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-a036429 elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"a036429\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tBenefits of Open Source Software <br>for the Enterprise\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-1c89969 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"1c89969\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tOpen source\nen entreprise\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-80fba67 buttonright\" data-id=\"80fba67\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e577e6f elementor-widget elementor-widget-text-editor\" data-id=\"e577e6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThe term open source refers to any solution that has its source code widely accessible to the public for modification and sharing.\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9d9c67f elementor-align-center elementor-widget elementor-widget-button\" data-id=\"9d9c67f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\r\n\t\t\t<a href=\"https:\/\/www.exoplatform.com\/benefits-of-open-source-software-for-the-enterprise-white-paper\/?utm_source=BlogEn&#038;utm_medium=Blog&#038;utm_campaign=Content&#038;utm_content=cta\" class=\"elementor-button-link elementor-button elementor-size-md\" role=\"button\">\r\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\r\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Now<\/span>\r\n\t\t<\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-86a1a8c elementor-hidden-tablet elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"86a1a8c\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2982b7a suppblock\" data-id=\"2982b7a\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-2801ff0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2801ff0\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-42c2528\" data-id=\"42c2528\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-85cc81d\" data-id=\"85cc81d\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-929f9ca elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"929f9ca\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-1aef2e1\" data-id=\"1aef2e1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6a0645 elementor-widget elementor-widget-image\" data-id=\"a6a0645\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"159\" height=\"222\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp.png\" class=\"attachment-large size-large wp-image-40335\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp.png 159w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-94x131.png 94w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-64x90.png 64w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/open-source-wp-21x30.png 21w\" sizes=\"(max-width: 159px) 100vw, 159px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-daac20c buttonright\" data-id=\"daac20c\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-158970d elementor-widget elementor-widget-image\" data-id=\"158970d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"207\" height=\"34\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1.jpg\" class=\"attachment-large size-large wp-image-38144\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1.jpg 207w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-200x33.jpg 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-100x16.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/white-1-70x11.jpg 70w\" sizes=\"(max-width: 207px) 100vw, 207px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-5b50c52 elementor-widget elementor-widget-heading\" data-id=\"5b50c52\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">FREE WHITE PAPER<\/h6>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-0a2bd28 elementor-widget elementor-widget-text-editor\" data-id=\"0a2bd28\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tBenefits of Open Source Software <br>for the Enterprise\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-6148b06 buttonright\" data-id=\"6148b06\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7928de2 elementor-widget elementor-widget-text-editor\" data-id=\"7928de2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThe term open source refers to any solution that has its source code widely accessible to the public for modification and sharing.\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9345651 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"9345651\" data-element_type=\"widget\" data-widget_type=\"button.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\r\n\t\t\t<a href=\"https:\/\/www.exoplatform.com\/benefits-of-open-source-software-for-the-enterprise-white-paper\/?utm_source=BlogEn&#038;utm_medium=Blog&#038;utm_campaign=Content&#038;utm_content=cta\" class=\"elementor-button-link elementor-button elementor-size-md\" role=\"button\">\r\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\r\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Now<\/span>\r\n\t\t<\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c7bf23d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c7bf23d\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-bc30e90\" data-id=\"bc30e90\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b652c89\" data-id=\"b652c89\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9d00616 myheader1 elementor-widget elementor-widget-heading\" data-id=\"9d00616\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">2. Portlet Integration<\/h2>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9f44c8c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9f44c8c\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-divider\">\r\n\t\t\t<span class=\"elementor-divider-separator\">\r\n\t\t\t\t\t\t<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-0138e9a elementor-widget elementor-widget-text-editor\" data-id=\"0138e9a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>To get started, you can pick some resources from the sample available at https:\/\/github.com\/exo-samples\/docs-samples\/tree\/4.3.x\/portlet\/js. It\u2019s a simple javax.portlet that forwards to an index.jsp (the view part of the portlet).<\/li>\n \t<li>Modify index.jsp and only declare an HTML fragment with the \u201capp\u201d mount point:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-566ac76 elementor-widget elementor-widget-code-highlight\" data-id=\"566ac76\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:xhtml decode:true \">&lt;div class='react-portlet'&gt;\r\n  &lt;div id=\"app\" class=\"container\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c1b379c elementor-widget elementor-widget-text-editor\" data-id=\"c1b379c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Open webapp\/WEB-INF\/gatein-resources.xml to declare both the bunderle.js, as a JS module, and the main.css stylesheet:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-498825f elementor-widget elementor-widget-code-highlight\" data-id=\"498825f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:xhtml decode:true \">&lt;portlet&gt;\r\n  &lt;name&gt;reactsample&lt;\/name&gt;\r\n  &lt;module&gt;\r\n    &lt;script&gt;\r\n      &lt;path&gt;\/js\/bundle.js&lt;\/path&gt;\r\n    &lt;\/script&gt;\r\n  &lt;\/module&gt;\r\n&lt;\/portlet&gt;\r\n\r\n&lt;portlet-skin&gt;\r\n  &lt;application-name&gt;react-portlet&lt;\/application-name&gt;\r\n  &lt;portlet-name&gt;reactsample&lt;\/portlet-name&gt;\r\n  &lt;skin-name&gt;Default&lt;\/skin-name&gt;\r\n  &lt;css-path&gt;\/css\/main.css&lt;\/css-path&gt;\r\n&lt;\/portlet-skin&gt;<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-738cf8b elementor-widget elementor-widget-text-editor\" data-id=\"738cf8b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: These modules will be automatically loaded by eXo Platform when you load the portlet.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c8822cf elementor-widget elementor-widget-text-editor\" data-id=\"c8822cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<p>There are two main module styles in JavaScript: AMD and CommonJS. When transpiling ES2015 to ES5, Babel replaces imports with the CommonJS style. Because Exo uses AMD modules, it will automatically adapt them. However, some libraries require manual adaptation. This would be the case with React if we had to load it separately from bundle.js. When you need to <a href=\"https:\/\/procoders.tech\/hire-react-js-developers\/\" target=\"_blank\" rel=\"noopener\">hire ReactJS developers<\/a>, ensuring they understand module styles and library adaptations is crucial.<\/p>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4b4c3de elementor-widget elementor-widget-text-editor\" data-id=\"4b4c3de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Now we get to the the build part. When we build the portlet, it would be interesting to 1) install JS dependencies and 2) do a webpack release. The Maven exec plugin will do the job. In \u201c\/pom.xml\u201d:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cd78b30 elementor-widget elementor-widget-code-highlight\" data-id=\"cd78b30\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:xhtml decode:true \">&lt;plugins&gt;\r\n  &lt;plugin&gt;\r\n    &lt;groupId&gt;org.codehaus.mojo&lt;\/groupId&gt;\r\n    &lt;artifactId&gt;exec-maven-plugin&lt;\/artifactId&gt;\r\n    &lt;version&gt;1.5.0&lt;\/version&gt;\r\n    &lt;executions&gt;\r\n      &lt;execution&gt;\r\n        &lt;id&gt;npm install&lt;\/id&gt;\r\n        &lt;phase&gt;generate-resources&lt;\/phase&gt;\r\n        &lt;goals&gt;\r\n          &lt;goal&gt;exec&lt;\/goal&gt;\r\n        &lt;\/goals&gt;\r\n        &lt;configuration&gt;\r\n          &lt;executable&gt;npm&lt;\/executable&gt;\r\n          &lt;arguments&gt;\r\n            &lt;argument&gt;install&lt;\/argument&gt;\r\n          &lt;\/arguments&gt;\r\n        &lt;\/configuration&gt;\r\n      &lt;\/execution&gt;\r\n      &lt;execution&gt;\r\n      &lt;id&gt;npm release&lt;\/id&gt;\r\n      &lt;phase&gt;generate-resources&lt;\/phase&gt;\r\n      &lt;goals&gt;\r\n        &lt;goal&gt;exec&lt;\/goal&gt;\r\n      &lt;\/goals&gt;\r\n      &lt;configuration&gt;\r\n      &lt;executable&gt;npm&lt;\/executable&gt;\r\n        &lt;arguments&gt;\r\n          &lt;argument&gt;run&lt;\/argument&gt;\r\n          &lt;argument&gt;${webpack.release}&lt;\/argument&gt;\r\n        &lt;\/arguments&gt;\r\n      &lt;\/configuration&gt;\r\n      &lt;\/execution&gt;\r\n    &lt;\/executions&gt;\r\n  &lt;\/plugin&gt;\r\n&lt;\/plugins&gt;<\/pre>\r\nThen simply type:\r\n<pre class=\"lang:default decode:true \">mvn clean install<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-65712fc elementor-widget elementor-widget-text-editor\" data-id=\"65712fc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThis will build in dev mode (webpack.release=release-debug)\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-719784e elementor-widget elementor-widget-text-editor\" data-id=\"719784e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tJust add a profile to build in production mode (set webpack.release=release), so:\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-904d8af elementor-widget elementor-widget-code-highlight\" data-id=\"904d8af\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:default decode:true \">mvn clean install -Pproduction<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-17f3f34 elementor-widget elementor-widget-heading\" data-id=\"17f3f34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Incompatibility with the GateIn minifier<\/h3>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-a4a9668 elementor-widget elementor-widget-text-editor\" data-id=\"a4a9668\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>You\u2019ll quickly notice that the non-minified version of React can\u2019t deal with the GateIn minifier (uses the Google Closure minifier)!<\/li>\n \t<li>Actually, the only way to disable the GateIn minifier is to run eXo in dev mode, which is not great. But there\u2019s weird thing: When you minify your bundle with \u201cwebpack -p,\u201d the GateIn minifier works! So the simplest solution is to use the minified version of our bundle.js with eXo\u2019s normal mode and use the non-minified version in eXo\u2019s dev mode! There is some bad news though: You will lose the source mapping because of the double minification.<\/li>\n \t<li>Another solution is to disable the minifier on some libs and build and supply the minified and map files. Actually, you can override the UIPortalApplication.gtmpl script in the portal module, filter the JS paths, and remove the \u201c-min\u201d when you need to but it\u2019s tricky. It would be great if eXo and GateIn could come up with a parameter for module definition!<\/li>\n \t<li>I\u2019ve heard about <a href=\"http:\/\/www.webjars.org\/\" target=\"_blank\" rel=\"noopener\">webjars<\/a>, and they\u2019re probably a more elegant way to do all this. I\u2019ll have to look at them in the future.<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-3101b14 elementor-widget elementor-widget-heading\" data-id=\"3101b14\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Deploying<\/h3>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2760f82 elementor-widget elementor-widget-text-editor\" data-id=\"2760f82\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tThose who are used to eXo can skip this part.\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-8bf1ae7 elementor-widget elementor-widget-text-editor\" data-id=\"8bf1ae7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>You must have an exo account and JDK 8 installed.<\/li>\n \t<li>Then <a href=\"https:\/\/community.exoplatform.com\/portal\/intranet\/downloads\" target=\"_blank\" rel=\"noopener\">download<\/a> the latest community edition of eXo (4.3+), unzip it, and launch the start_eXo script.<\/li>\n \t<li>Simply copy the target\/react-portlet.war in the webapps directory and wait for deployment.<\/li>\n \t<li>Log into eXo and create a \u201ctest\u201d site.<\/li>\n \t<li>Go to the site, edit the page layout, and add the portlet.<\/li>\n \t<li>You should see something very similar to standalone mode, but it should be dynamic (for this, you must have created some activities before).<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c8500af elementor-widget elementor-widget-heading\" data-id=\"c8500af\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">A note on the docker<\/h3>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-4c8112a elementor-widget elementor-widget-text-editor\" data-id=\"4c8112a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Sorry\u2014it doesn\u2019t work in an eXo container unless you start it in debug mode. I\u2019ll have to look into this.<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-d58957e elementor-widget elementor-widget-heading\" data-id=\"d58957e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Sharing common modules<\/h3>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cdddcc4 elementor-widget elementor-widget-text-editor\" data-id=\"cdddcc4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>When you\u2019re developing several portlets, it\u2019s okay to reuse some libs (like React). You may already know that GateIn allows you to share modules.<\/li>\n \t<li>Before we edit webpack.config.js, we have to tell webpack to gather the React, ReactDOM, and moment libs in another bundle, which we\u2019ll call the \u201cvendor\u201d bundle:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-c500bf5 elementor-widget elementor-widget-code-highlight\" data-id=\"c500bf5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">entry: {\r\n  bundle:'.\/src\/main\/js\/index.js',\r\n  'vendor-bundle': [\r\n    'react',\r\n    'react-dom',\r\n    'moment'\r\n  ]\r\n}\r\n...\r\nplugins:[\r\n ...\r\n  new webpack.optimize.CommonsChunkPlugin({\r\n    name: 'vendor-bundle',\r\n    filename: 'vendor-bundle.js',\r\n    minChunks: Infinity\r\n  })\r\n]<\/pre><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-60031ed elementor-widget elementor-widget-text-editor\" data-id=\"60031ed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\tNote: Take a look at chunking. It\u2019s a powerful way to optimize web apps when they first load!\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b593e42 elementor-widget elementor-widget-text-editor\" data-id=\"b593e42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>After rebuilding, you\u2019ll see the new size of your bundle!<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-7b9e975 elementor-widget elementor-widget-code-highlight\" data-id=\"7b9e975\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"show-plain-default:true lang:default decode:true \">Hash: 837db454da54d24ded16\r\nVersion: webpack 1.13.2\r\nTime: 6187ms\r\n               Asset     Size  Chunks             Chunk Names\r\n           bundle.js  7.13 kB       0  [emitted]  bundle\r\n    vendor-bundle.js  1.21 MB       1  [emitted]  vendor-bundle\r\n       bundle.js.map  3.69 kB       0  [emitted]  bundle\r\nvendor-bundle.js.map  1.44 MB       1  [emitted]  vendor-bundle\r\n   [0] multi vendor-bundle 52 bytes {1} [built]\r\n    + 278 hidden modules<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-19e34fa elementor-widget elementor-widget-text-editor\" data-id=\"19e34fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>Set vendor-bundle.js as a shared module. To keep things simple, we set it in our portlet. Otherwise, you could package it into another war:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-55272e6 elementor-widget elementor-widget-code-highlight\" data-id=\"55272e6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:xhtml decode:true \">&lt;module&gt;\r\n    &lt;name&gt;vendor&lt;\/name&gt;\r\n    &lt;script&gt;\r\n      &lt;path&gt;\/js\/vendor-bundle.js&lt;\/path&gt;\r\n    &lt;\/script&gt;\r\n&lt;\/module&gt;\r\n\r\n&lt;portlet&gt;\r\n  &lt;name&gt;reactsample&lt;\/name&gt;\r\n  &lt;module&gt;\r\n    &lt;script&gt;\r\n      &lt;path&gt;\/js\/bundle.js&lt;\/path&gt;\r\n    &lt;\/script&gt;\r\n    &lt;depends&gt;\r\n      &lt;module&gt;vendor&lt;\/module&gt;\r\n  &lt;\/depends&gt;\r\n  &lt;\/module&gt;\r\n&lt;\/portlet&gt;<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-86f1939 elementor-widget elementor-widget-text-editor\" data-id=\"86f1939\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul>\n \t<li>Now when you look at the <a href=\"http:\/\/localhost:8080\/portal\/scripts\/4.3.0\/PORTLET\/react-portlet:reactsample.js\" target=\"_blank\" rel=\"noopener\">reactsample.js<\/a> resource downloaded by the portlet, it will depend on the shared module:<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-3057f9c elementor-widget elementor-widget-code-highlight\" data-id=\"3057f9c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><pre class=\"lang:js decode:true \">define('PORTLET\/react-portlet\/reactsample', [\"SHARED\/vendor\"], function(vendor) {\r\n  ...<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f157968 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f157968\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-45b5739\" data-id=\"45b5739\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-df47831\" data-id=\"df47831\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ac6124c myheader1 elementor-widget elementor-widget-heading\" data-id=\"ac6124c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-7db03a1 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7db03a1\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-divider\">\r\n\t\t\t<span class=\"elementor-divider-separator\">\r\n\t\t\t\t\t\t<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2a06c9d elementor-widget elementor-widget-text-editor\" data-id=\"2a06c9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<ul style=\"list-style: disc; margin-left: 20px!important;\">\n \t<li>We learned how to set up a standalone JS app based on React and built with a node.js\/npm\/ES2015\/Babel\/webpack stack. There\u2019s a lot of choices here, and you could replace some of elements of the stack, e.g., bower instead of npm, typescript instead of ES2015, browserify instead of webpack. Each has some pros and cons that you should be aware of when you are choosing.<\/li>\n \t<li>We learned how to simply integrate npm and Maven to build a portlet on top of a standalone app.<\/li>\n \t<li>Unfortunately, the eXo GateIn minifier hates your React code. Even if there\u2019s a workaround, GateIn should really permit lib exclusions from the minifier.<\/li>\n \t<li>Last words: On a real project, you\u2019ll have to deal with unit testing. For the record, we&#8217;re currently using <a href=\"https:\/\/mochajs.org\/\" target=\"_blank\" rel=\"noopener\">Mocha<\/a> to write tests, <a href=\"http:\/\/phantomjs.org\/\" target=\"_blank\" rel=\"noopener\">Phantomjs<\/a> as a runtime platform, and Istanbul as a coverage tool. To manage complex build tasks, you should use a lib like Gulp or Grunt.<\/li>\n<\/ul>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-328944b elementor-widget elementor-widget-testimonial\" data-id=\"328944b\" data-element_type=\"widget\" data-widget_type=\"testimonial.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\r\n.elementor-testimonial-wrapper{overflow:hidden;text-align:center}.elementor-testimonial-wrapper .elementor-testimonial-content{font-size:1.3em;margin-bottom:20px}.elementor-testimonial-wrapper .elementor-testimonial-name{line-height:1.5;display:block}.elementor-testimonial-wrapper .elementor-testimonial-job{font-size:.85em;display:block}.elementor-testimonial-wrapper .elementor-testimonial-meta{width:100%;line-height:1}.elementor-testimonial-wrapper .elementor-testimonial-meta-inner{display:inline-block}.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-details,.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-image{display:table-cell;vertical-align:middle}.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-image img{width:60px;height:60px;border-radius:50%;-o-object-fit:cover;object-fit:cover;max-width:none}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-aside .elementor-testimonial-image{padding-right:15px}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-aside .elementor-testimonial-details{text-align:left}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-details,.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-image{display:block}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-image{margin-bottom:20px}<\/style>\t\t<div class=\"elementor-testimonial-wrapper\">\r\n\t\t\t\t\t\t\t<div class=\"elementor-testimonial-content\"><blockquote>Thanks again to <a href=\"https:\/\/gpicavet.github.io\" target=\"_blank\" rel=\"noopener\">Gr\u00e9gory Picavet<\/a> for this great post. Make sure to check his original article and <a href=\"https:\/\/gpicavet.github.io\" target=\"_blank\" rel=\"noopener\">his blog<\/a> for new articles.<\/blockquote><\/div>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53063af dow1-cl elementor-reverse-tablet elementor-reverse-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53063af\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-f1a0d83\" data-id=\"f1a0d83\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-35e89f2\" data-id=\"35e89f2\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-418c650 elementor-cta--skin-cover elementor-cta--valign-middle elementor-widget elementor-widget-call-to-action\" data-id=\"418c650\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"call-to-action.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/plugins\/elementor-pro\/assets\/css\/widget-call-to-action.min.css\">\t\t<div class=\"elementor-cta\">\n\t\t\t\t\t<div class=\"elementor-cta__bg-wrapper\">\n\t\t\t\t<div class=\"elementor-cta__bg elementor-bg\" style=\"background-image: url(https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2022\/12\/cta-datasheet-exo-6-9.png);\"><\/div>\n\t\t\t\t<div class=\"elementor-cta__bg-overlay\"><\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-cta__content\">\n\t\t\t\t\n\t\t\t\t<div class=\"elementor-cta__title elementor-cta__content-item elementor-content-item\">eXo Platform 6 Free Datasheet\u200b\u200b<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__description elementor-cta__content-item elementor-content-item\">\n\t\t\t\t\t\tDownload the eXo Platform 6 Datasheet and <br>discover all the features and benefits\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__button-wrapper elementor-cta__content-item elementor-content-item \">\n\t\t\t\t\t<a class=\"elementor-cta__button elementor-button elementor-size-md\" href=\"https:\/\/www.exoplatform.com\/datasheet-exo-platform-6\/?utm_source=BlogEn&#038;utm_medium=Blog&#038;utm_campaign=Content&#038;utm_content=cta\">\n\t\t\t\t\t\tDownload Now\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a0b41f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a0b41f\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6a3fc01\" data-id=\"6a3fc01\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-08e0981 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"08e0981\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8bfd69d\" data-id=\"8bfd69d\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7360dfe elementor-align-left tags_class_element elementor-widget elementor-widget-post-info\" data-id=\"7360dfe\" data-element_type=\"widget\" data-widget_type=\"post-info.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-4f61546\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-tags\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t<span class=\"elementor-post-info__item-prefix\">Tags:<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/exo\/\" class=\"elementor-post-info__terms-list-item\">eXo<\/a>, <a href=\"https:\/\/www.exoplatform.com\/blog\/tutorial\/\" class=\"elementor-post-info__terms-list-item\">Tutorial<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-105f90f\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-custom\">\n\t\t\t\t\t\t\t\t\t\t&nbsp;\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b96f268\" data-id=\"b96f268\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6002295 elementor-widget elementor-widget-shortcode\" data-id=\"6002295\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n<div class=\"kk-star-ratings kksr-shortcode\"\n    data-payload='{&quot;id&quot;:&quot;37467&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;shortcode&quot;,&quot;align&quot;:&quot;&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;valign&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;width&quot;:&quot;142.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 142.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-074f488 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"074f488\" data-element_type=\"section\" id=\"end-tet\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-d63f37e\" data-id=\"d63f37e\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eb2d247 elementor-widget__width-inherit elementor-widget elementor-widget-testimonial\" data-id=\"eb2d247\" data-element_type=\"widget\" data-widget_type=\"testimonial.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-testimonial-wrapper\">\r\n\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-testimonial-meta elementor-has-image elementor-testimonial-image-position-top\">\r\n\t\t\t\t<div class=\"elementor-testimonial-meta-inner\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-testimonial-image\">\r\n\t\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/author\/gpicavet\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/9abce033c0c2e03ab0c4bd2fffce6060?s=96&amp;d=mm&amp;r=g\" title=\"\" alt=\"\" loading=\"lazy\" \/><\/a>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-testimonial-details\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-testimonial-name\" href=\"https:\/\/www.exoplatform.com\/blog\/author\/gpicavet\/\" target=\"_blank\">Gr\u00e9gory Picavet<\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-0cb31e6\" data-id=\"0cb31e6\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fc17fc3 elementor-widget elementor-widget-testimonial\" data-id=\"fc17fc3\" data-element_type=\"widget\" data-widget_type=\"testimonial.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-testimonial-wrapper\">\r\n\t\t\t\t\t\t\t<div class=\"elementor-testimonial-content\">\n  <figcaption>\n  <\/figcaption>\n<\/div>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a7ae78a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a7ae78a\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-23ae05c\" data-id=\"23ae05c\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bd612a7 faq-id elementor-widget elementor-widget-heading\" data-id=\"bd612a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Related posts<\/h6>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-b5d2a25 emp-cat elementor-widget elementor-widget-shortcode\" data-id=\"b5d2a25\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-shortcode\">\n\t<div class=\"am_ajax_post_grid_wrap\"  style=\"background-color: transparent !important; \" data-pagination_type=\"load_more\" data-am_ajax_post_grid='{\"show_filter\":\"yes\",\"btn_all\":\"yes\",\"initial\":\"-1\",\"layout\":\"1\",\"post_type\":\"post\",\"posts_per_page\":\"3\",\"cat\":\"\",\"terms\":\"\",\"paginate\":\"no\",\"hide_empty\":\"true\",\"orderby\":\"date\",\"order\":\"ASC\",\"pagination_type\":\"load_more\",\"infinite_scroll\":\"\",\"animation\":\"\",\"grid_id\":\"\"}'>\r\n\r\n\t\t\t\t\t<div class=\"asr-filter-div\" data-layout=\"1\"><ul>\r\n\t\t\t\t\t\t\t\t\t<li \r\n\r\n\r\n\r\n \r\n   class=\"asr_texonomy active\" style=\"font-weight:bold;\"data_id=\"-1\" style=\"background-color: transparent !important;\">All<\/li>\r\n\t\t\t\t\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1302\">eXo<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"508\">eXo<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"642\">eXo<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1407\">Anerkennung der Mitarbeiter<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"454\">Digital workplace<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"500\">Digital workplace<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1337\">Arbeitsplatz<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"462\">Employee engagement<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"616\">Engagement collaborateur<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1465\">Branchentrends<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"486\">Open source<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"506\">Open source<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"620\">Avenir du travail<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1411\">Cartoon<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"504\">Future of work<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1137\">Actualit\u00e9s<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1366\">Change Management<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"460\">Internal communication<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"492\">Collaboration<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"458\">Collaboration<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1287\">Digital Workplace<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1323\">Digitale Transformation<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"496\">Exp\u00e9rience collaborateur<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"705\">News<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"452\">intranet<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1135\">intranet<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"494\">Communication interne<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1311\">Infografik<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"409\">workplace<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1294\">interne Kommunikation<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"456\">Knowledge management<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"618\">onboarding<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"512\">Employee experience<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"490\">Gestion des connaissances<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1281\">intranet<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"502\">Conduite de changement<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"514\">Employee productivity<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1329\">Kollaboration<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1451\">Leadership<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1187\">Leadership<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"614\">onboarding<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1183\">Cartoon<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"518\">Employee recognition<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1331\">Leitfaden<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1181\">Astuces et bonnes pratiques<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"516\">Change management<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1292\">Mitarbeiter engagement<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"813\">Cartoon<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"411\">Etudes de cas<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1339\">Mitarbeiter Erfahrung<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"622\">Digital transformation<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1175\">Guide<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1317\">Nachrichten<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"799\">Infographic<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1185\">Infographie<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1403\">Onboarding<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1300\">Open source<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"510\">Remote work<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"498\">Productivit\u00e9<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1173\">T\u00e9l\u00e9travail<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"488\">Transformation digitale<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1179\">Tutoriel<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1443\">Actualit\u00e9s produit<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1562\">Extranet<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1461\">Industry trends<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1445\">Product News<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1447\">Produkt Nachrichten<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1309\">Produktivit\u00e4t<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1405\">Reconnaissance des employ\u00e9s<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1307\">Telearbeit<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1463\">Tendances<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1449\">Thought leadership<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1345\">Tipps und Tricks<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"780\">Tips &amp; Tricks<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"819\">Tutorial<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1269\">Uncategorized<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"699\">Uncategorized<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1378\">Wissensmanagement<\/li>\r\n\t\t        \t\t            <li class=\"asr_texonomy\" data_id=\"1304\">Zukunft der Arbeit<\/li>\r\n\t\t        \t        <\/ul><\/div>\r\n\t    \r\n\t    <div class=\"asr-ajax-container\" style=\"background-color: transparent !important;\">\r\n\t\t    <div class=\"asr-loader\">\r\n\t\t    \t<div class=\"lds-dual-ring\"><\/div>\r\n\t\t    <\/div>\r\n\t\t    <div class=\"asrafp-filter-result\">\r\n\t\t    \t<div class=\"am-postgrid-wrapper\">\r\n\r\n\t\t<div class=\"am_post_grid am__col-3 am_layout_1  \">\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"am_grid_col\">\r\n\t\t\t\t<div class=\"am_single_grid\">\r\n\t\t\t\t\t<div class=\"am_thumb\">\r\n\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/manage-projects-within-exo-platfom\/\">\r\n\t\t\t\t\t\t<img width=\"800\" height=\"533\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1.jpeg\" class=\"attachment-full size-full wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1.jpeg 800w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-300x200.jpeg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-768x512.jpeg 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-710x473.jpeg 710w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-492x328.jpeg 492w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-354x236.jpeg 354w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-197x131.jpeg 197w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-100x67.jpeg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/09\/800x533-1-45x30.jpeg 45w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t<\/a>\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"am_cont\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/manage-projects-within-exo-platfom\/\"><h2 class=\"am__title\">Manage projects within eXo Platfom<\/h2><\/a>\r\n\t\t\t\t\t\t<div class=\"am__excerpt\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/manage-projects-within-exo-platfom\/\">Manage projects within eXo Platfom Project management has always been a vital\u2026<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/manage-projects-within-exo-platfom\/\" class=\"am__readmore\">Read More<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"post_tags\"><a href=\"https:\/\/www.exoplatform.com\/blog\/tutorial\/\" title=\"Tutorial Tag\" class=\"tutorial\">Tutorial<\/a> <\/div>\t\t\t\t\t<div class=\"am_time\">\r\n\t\t\t\t\t\t<span class=\"bsf-rt-reading-time\"><span class=\"bsf-rt-display-label\" prefix=\"Reading Time\">\n\t\t<\/span> <span class=\"bsf-rt-display-time\" reading_time=\"7\"><\/span> \n\t\t<span class=\"bsf-rt-display-postfix\" postfix=\"min\"><\/span><\/span> \r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"am_grid_col\">\r\n\t\t\t\t<div class=\"am_single_grid\">\r\n\t\t\t\t\t<div class=\"am_thumb\">\r\n\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/guide-to-integrate-linkedin-2-0-connect-with-the-exo-platform-sign-in-mechanism\/\">\r\n\t\t\t\t\t\t<img width=\"768\" height=\"512\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1.jpg 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-300x200.jpg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-710x473.jpg 710w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-492x328.jpg 492w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-354x236.jpg 354w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-197x131.jpg 197w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-100x67.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-45x30.jpg 45w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2021\/03\/linkedin-800x533-768x512-1-640x427.jpg 640w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t<\/a>\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"am_cont\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/guide-to-integrate-linkedin-2-0-connect-with-the-exo-platform-sign-in-mechanism\/\"><h2 class=\"am__title\">Guide to Integrate LinkedIn 2.0 Connect with the eXo Platform Sign-In Mechanism<\/h2><\/a>\r\n\t\t\t\t\t\t<div class=\"am__excerpt\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/guide-to-integrate-linkedin-2-0-connect-with-the-exo-platform-sign-in-mechanism\/\">Guide to Integrate LinkedIn 2.0 Connect with the eXo Platform Sign-In Mechanism\u2026<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/guide-to-integrate-linkedin-2-0-connect-with-the-exo-platform-sign-in-mechanism\/\" class=\"am__readmore\">Read More<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"post_tags\"><a href=\"https:\/\/www.exoplatform.com\/blog\/exo\/\" title=\"eXo Tag\" class=\"exo\">eXo<\/a> <\/div>\t\t\t\t\t<div class=\"am_time\">\r\n\t\t\t\t\t\t<span class=\"bsf-rt-reading-time\"><span class=\"bsf-rt-display-label\" prefix=\"Reading Time\">\n\t\t<\/span> <span class=\"bsf-rt-display-time\" reading_time=\"5\"><\/span> \n\t\t<span class=\"bsf-rt-display-postfix\" postfix=\"min\"><\/span><\/span> \r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"am_grid_col\">\r\n\t\t\t\t<div class=\"am_single_grid\">\r\n\t\t\t\t\t<div class=\"am_thumb\">\r\n\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/30-digital-collaboration-terms-that-you-should-know-about\/\">\r\n\t\t\t\t\t\t<img width=\"800\" height=\"533\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"digital collaboration terms\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms.jpg 800w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-300x200.jpg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-768x512.jpg 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-710x473.jpg 710w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-492x328.jpg 492w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-354x236.jpg 354w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-197x131.jpg 197w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-100x67.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2020\/03\/30-digital-collaboration-terms-45x30.jpg 45w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t<\/a>\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"am_cont\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/30-digital-collaboration-terms-that-you-should-know-about\/\"><h2 class=\"am__title\">30 digital collaboration terms that you should know about<\/h2><\/a>\r\n\t\t\t\t\t\t<div class=\"am__excerpt\">\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/30-digital-collaboration-terms-that-you-should-know-about\/\">30 digital collaboration terms that you should know about Enterprise software has\u2026<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<a href=\"https:\/\/www.exoplatform.com\/blog\/30-digital-collaboration-terms-that-you-should-know-about\/\" class=\"am__readmore\">Read More<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"post_tags\"><a href=\"https:\/\/www.exoplatform.com\/blog\/digital-workplace-en\/\" title=\"Digital workplace Tag\" class=\"digital-workplace-en\">Digital workplace<\/a> <\/div>\t\t\t\t\t<div class=\"am_time\">\r\n\t\t\t\t\t\t<span class=\"bsf-rt-reading-time\"><span class=\"bsf-rt-display-label\" prefix=\"Reading Time\">\n\t\t<\/span> <span class=\"bsf-rt-display-time\" reading_time=\"8\"><\/span> \n\t\t<span class=\"bsf-rt-display-postfix\" postfix=\"min\"><\/span><\/span> \r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"am_posts_navigation\">\r\n\t\t<button type='button' data-paged='1' data-next='2' class=' am-post-grid-load-more '>Voir Plus<\/button>\t\t<\/div>\r\n\r\n\t\t<\/div>\t\t    <\/div>\r\n\t    <\/div>\r\n    <\/div>\r\n\r\n\t\n\n\n\n\t\t\t\n\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a3cb4b5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a3cb4b5\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-559dd7a\" data-id=\"559dd7a\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-b4a3308 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b4a3308\" data-element_type=\"section\">\r\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7c1b3f3\" data-id=\"7c1b3f3\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a27d8cd elementor-widget elementor-widget-heading\" data-id=\"a27d8cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Leave a Reply<\/h6>\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-28e89fe\" data-id=\"28e89fe\" data-element_type=\"column\">\r\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-50977fb elementor-widget elementor-widget-text-editor\" data-id=\"50977fb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t\t\t<p>( Your e-mail address will not be published)<\/p>\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t<div class=\"elementor-element elementor-element-8aa7c5e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8aa7c5e\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\r\n\t\t\t\t<div class=\"elementor-widget-container\">\r\n\t\t\t\t\t<div class=\"elementor-divider\">\r\n\t\t\t<span class=\"elementor-divider-separator\">\r\n\t\t\t\t\t\t<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/section>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t","protected":false},"excerpt":{"rendered":"Getting started with ReactJS and eXo Platform portlet development This article is a repost from Gr\u00e9gory Picavet&#8217;s own blog. Gr\u00e9gory is the tech lead on collaborative portal projects for a French Ministry, and a web development passionate. Tech Lead on a collaborative portal at a French Ministry, and web development passionate Content Here is the [&hellip;]","protected":false},"author":83,"featured_media":35323,"comment_status":"open","ping_status":"open","sticky":false,"template":"main1-article.php","format":"image","meta":[],"categories":[819,508],"tags":[606,769,767,528],"lang":"en","translations":{"en":37467},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37467"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=37467"}],"version-history":[{"count":4,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37467\/revisions"}],"predecessor-version":[{"id":61839,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37467\/revisions\/61839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media\/35323"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=37467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=37467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=37467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}