I want know initial set processs. I am trying to create a React application as a Client Extension (CX) in Liferay DXP 7.4 using Vite. My goal is to integrate the React app as a custom element portlet that can be added to Liferay pages.

I want know initial set processs. I am trying to create a React application as a Client Extension (CX) in Liferay DXP 7.4 using Vite. My goal is to integrate the React app as a custom element portlet that can be added to Liferay pages.

• liferay

Share Improve this question Follow asked Mar 25 at 10:43 Ks 1374Ks 1374 1 1

• 1 Please take the tour and read How to Ask. Note that questions for a tutorial or similar are off-topic (see help center) on stackoverflow, and just querying for react in Liferay's documentation gives you a couple of references. – Olaf Kock Commented Mar 25 at 16:41

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

We have one tutorial that explain this, just follow it

Creating, Running, and Deploying a Custom Element Client Extension [React]Creating a Custom Element Client Extension1. Navigate to Your Liferay Workspace
You must run the following commands inside a Liferay workspace. For example:

cdt && cd workspaces/liferay-learn-workspace/client-extensions/

2. Create a React Project Using Vite
Inside your client-extensions directory, create a React project using Vite and follow the steps, giving it a name. Example:

npm create vite@latest

Project Structure
After setting up your project, the structure should look like this:

client-extensions/
└── project-name-custom-element/
    ├── src/
    │   ├── index.scss
    │   ├── main.jsx
    │   └── Routes.jsx
    ├── client-extension.yaml
    ├── package.json
    ├── index.html
    └── vite.config.js

3. Create client-extension.yaml

assemble:
    - from: build/vite
      into: static
project-name-custom-element:
    cssURLs:
        - "**/index*.css"
    friendlyURLMapping: project-name-custom-element
    htmlElementName: project-name-custom-element
    instanceable: true
    name: Project Name
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - main.js
    useESM: true

4. Configure main.jsx

import { createRoot } from 'react-dom/client';
import Routes from './Routes';
import './index.scss';

class WebComponent extends HTMLElement {
    connectedCallback() {
        if (!this.root) {
            this.root = createRoot(this);
            this.root.render(
                <Routes path={this.getAttribute('path')} />
            );
        }
    }
}

const ELEMENT_ID = 'project-name-custom-element';
if (!customElements.get(ELEMENT_ID)) {
    customElements.define(ELEMENT_ID, WebComponent);
}

5. Configure Routes.jsx

import React, { Suspense } from 'react';

const lazyRoutes = {
    'component-a': React.lazy(() => import('./components/ComponentA')),
    'component-b': React.lazy(() => import('./components/ComponentB')),
    'component-c': React.lazy(() => import('./components/ComponentC')),
};

export default function Routes({ path, properties }) {
    const Route = lazyRoutes[path];
    if (!Route) {
        return <h1>Page not found</h1>;
    }
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Route properties={properties} />
        </Suspense>
    );
}

6. Configure vite.config.js

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig, splitVendorChunkPlugin } from 'vite';

export default defineConfig({
    build: {
        outDir: 'build/vite',
        rollupOptions: {
            output: {
                assetFileNames: 'assets/[name][extname]',
                chunkFileNames: '[name]-[hash].js',
                entryFileNames: 'main.js',
            },
        },
    },
    experimental: {
        renderBuiltUrl(filename) {
            return `/o/project-name-custom-element/${filename}`;
        },
    },
    plugins: [react(), splitVendorChunkPlugin()],
    resolve: {
        alias: {
            '~': path.resolve(__dirname, './src/'),
        },
    },
    server: {
        origin: 'http://localhost:5173',
    },
});

Deploying a Custom Element Client Extension1. Run a Liferay DXP Instance with Docker
Use Docker to run a Liferay DXP instance. Using Liferay Docker Images2. Deploy Your Custom Element
Deploy your Custom Element into your Docker container:

cd ~/project-workspace/client-extensions/project-name-custom-element
blade gw clean deploy -Ddeploy.docker.container.id=$(docker ps -q --filter name=$LIFERAY_CONTAINER)

3. Configure and Use Your Custom Element
After deployment, drag and drop the client extension in Liferay, and add the path in the configuration section. Example:

path='component-a'

Running a Custom Element Client Extension (Hot Reload)1. Create client-extension.dev.yaml
Create a client-extension.dev.yaml file in the root of your custom element:

liferay-learn-custom-element:
    urls:
        - http://localhost:5173/@vite/client
        - http://localhost:5173/@vite/refresh.jsx
        - http://localhost:5173/src/main.jsx

2. Create @vite/refresh.jsx
Inside the root of your custom element, create a @vite directory and inside it, create refresh.jsx for hot reload:

import RefreshRuntime from '/@react-refresh';

RefreshRuntime.injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;

3. Deploy with deployDev

cd ~/project-workspace/client-extensions/project-name-custom-element
blade gw clean deployDev -Ddeploy.docker.container.id=$(docker ps -q --filter name=$LIFERAY_CONTAINER)

4. Run Your Custom Element in Development Mode
Now, you can run your React custom element project in real time:

yarn dev