Developing a React Application

Running an existing React app on Liferay DXP makes the app available as a widget for using on site pages. You can adapt your existing React app, but this doesn’t give you access to the bundler and its various loaders to develop your project further in Liferay DXP. To have access to all of Liferay DXP’s features, you must use the Liferay JS Generator and Liferay npm Bundler to merge your files into a portlet bundle, update your static resource paths, and deploy your bundle.

Figure 1: Apps like this Guestbook app are easy to migrate to Liferay DXP.

Figure 1: Apps like this Guestbook app are easy to migrate to Liferay DXP.

Follow these steps:

  1. Using npm, install the Liferay JS Generator:

    npm install -g yo generator-liferay-js
    
  2. Generate a React based portlet bundle project for deploying your app to your Liferay DXP installation.

    yo liferay-js
    

    Select React based portlet and opt for generating sample code. Here’s the bundle’s structure:

    • my-react-portlet-bundle
      • assets/ → CSS and resources
        • css/ → CSS files
          • styles.css → Default CSS file
      • features/ → Liferay DXP bundle features
        • localization → Resource bundles
          • Language.properties → Default language keys
      • src/ → JavaScript and React component files
        • AppComponent.js → Sample React component that you can remove
        • index.js → Main module used to initialize the portlet
      • .babelrc → Babel configuration
      • .npmbuildrc → Build configuration
      • .npmbundlerrc → Bundler configuration
      • package.json → npm bundle configuration
      • README.md
  3. Copy your app files, matching the types listed below, into your new project.

    File typeDestinationComments
    CSSassets/css/Overwrite styles.css.
    JavaScriptsrc/Merge with all files except index.js—the main module merge is explained in a later step.
    Static resourcesassets/Include resources such as image files here
  4. Update your bundle to use portlet-level styling.

    • Import all component CSS files through the CSS file (default is styles.css) your bundle’s package.json file sets for your portlet. Here’s the default setting:
     "portlet": {
    	    "com.liferay.portlet.header-portlet-css": "/css/styles.css",
         ...
     }
    
    • Remove any CSS imports you have in your JS files
  5. Update any static resource references to use the web-context value declared in your project’s .npmbundlerrc file, and remove any imports for the resource. For example, if you have an image file called logo.png in your assets folder, you would use the format below. Note that the assets folder is not included in the path.

    Here is the format:

    /o/[web-context]/[resource]
    

    Here’s an example image resource:

    <img alt="React logo" src="/o/react-guestbook-migrated/logo.png">
    
  6. Merge your entry module with src/index.js, configuring it to dynamically load components.

    • Use the HashRouter for routing between component views, as Liferay DXP requires hash routing for proper portal navigation:
     import { HashRouter as Router } from 'react-router-dom';
    
    • Place your code inside the main() function.

    • Render your app inside the portletElementId element that is passed in the main() function. This is required to render the React app inside the portlet.

    Your entry module index.js should look like this.

    import React from 'react';
    import ReactDOM from 'react-dom';
    //import './index.css';//removed for Portal Migration
    import App from './App';
    import { HashRouter as Router } from 'react-router-dom';
    
    export default function main({portletNamespace, contextPath, 
    portletElementId}) {
          ReactDOM.render((
            <Router>
              <App/>
            </Router>
          ), document.getElementById(portletElementId));
    }
    
  7. Merge your app package.json file’s dependencies and devDependencies into the bundle’s package.json.

  8. Finally, deploy your bundle:

    npm run deploy
    

Congratulations! Your React app is deployed and now available as a widget that you can add to site pages.

The Liferay npm Bundler confirms the deployment:

Report written to liferay-npm-bundler-report.html
Deployed my-react-guestbook-1.0.0.jar to c:\git\bundles

The Liferay DXP console confirms your bundle started:

2019-03-22 20:17:53.181 INFO  
[fileinstall-C:/git/bundles/osgi/modules][BundleStartStopLogger:39] 
STARTED my-react-guestbook_1.0.0 [1695]

To Find your widget, click the Add icon (Add), navigate to Widgets and then the category you specified to the Liferay Bundle Generator (Sample is the default category).

Web Services

Service Builder

Localization

« Developing an Angular ApplicationDeveloping a Vue Application »
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 3