create-liferay-react-cx 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +80 -288
  3. package/bin/index.js +10 -10
  4. package/package.json +11 -8
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Laxit Khanpara
3
+ Copyright (c) 2026 Laxit Khanpara
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
18
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,288 +1,80 @@
1
- # create-liferay-react-cx
2
-
3
- > ⚡ Zero-config CLI scaffold for **Liferay React Client Extensions** (custom element type).
4
- > Powered by [Vite](https://vitejs.dev/) · Compatible with **Liferay 7.4 / DXP 2024.Q1+**
5
-
6
- [![npm version](https://img.shields.io/npm/v/create-liferay-react-cx?color=8B5CF6&label=npm)](https://www.npmjs.com/package/create-liferay-react-cx)
7
- [![license](https://img.shields.io/npm/l/create-liferay-react-cx?color=8B5CF6)](./LICENSE)
8
- [![node](https://img.shields.io/node/v/create-liferay-react-cx?color=8B5CF6)](https://nodejs.org)
9
-
10
- ---
11
-
12
- ## Table of Contents
13
-
14
- - [What is a Liferay Client Extension?](#what-is-a-liferay-client-extension)
15
- - [Requirements](#requirements)
16
- - [Quick Start](#quick-start)
17
- - [All Ways to Use This CLI](#all-ways-to-use-this-cli)
18
- - [Method 1 — npm create (Recommended)](#method-1--npm-create-recommended)
19
- - [Method 2 — npx (No Install)](#method-2--npx-no-install)
20
- - [Method 3 Global Install](#method-3--global-install)
21
- - [Options & Flags](#options--flags)
22
- - [Interactive Mode](#interactive-mode)
23
- - [Generated Project Structure](#generated-project-structure)
24
- - [Development Workflow](#development-workflow)
25
- - [React Version Compatibility](#react-version-compatibility)
26
- - [Contributing](#contributing)
27
- - [License](#license)
28
-
29
- ---
30
-
31
- ## What is a Liferay Client Extension?
32
-
33
- A **Client Extension (CE)** is the modern, decoupled way to extend Liferay DXP / Community Edition — no Java, no OSGi, no portal restarts required.
34
-
35
- A **Custom Element** CE wraps your React app as a standard Web Component (`<my-widget />`), which Liferay embeds directly on any page. This CLI scaffolds everything you need to build, preview, and deploy one in seconds.
36
-
37
- ---
38
-
39
- ## Requirements
40
-
41
- Before you start, make sure you have:
42
-
43
- | Requirement | Version |
44
- |---|---|
45
- | Node.js | ≥ 18.0.0 |
46
- | npm | 9.0.0 |
47
- | [Liferay Workspace](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html) | For `gradlew deploy` |
48
-
49
- > **Note:** The generated project must sit inside a Liferay Workspace at `[workspace]/client-extensions/my-widget/` for Gradle deployment to work.
50
-
51
- ---
52
-
53
- ## Quick Start
54
-
55
- ```bash
56
- npm create liferay-react-cx my-widget
57
- cd my-widget
58
- ../../gradlew deploy
59
- ```
60
-
61
- That's it. Your custom element is live in Liferay. 🚀
62
-
63
- ---
64
-
65
- ## All Ways to Use This CLI
66
-
67
- ### Method 1 — `npm create` (Recommended)
68
-
69
- `npm create` is the standard npm convention for scaffolding tools (like `npm create vite`, `npm create react-app`). It automatically resolves `create-liferay-react-cx` under the hood.
70
-
71
- **With a project name (fastest):**
72
- ```bash
73
- npm create liferay-react-cx my-widget
74
- ```
75
-
76
- **With a specific React version:**
77
- ```bash
78
- npm create liferay-react-cx -- --name my-widget --react-version 18.2.0
79
- ```
80
- > ⚠️ Note the `--` before flags — this is required when using `npm create` with named options, so npm passes them through to the CLI correctly.
81
-
82
- **Interactive wizard (no arguments):**
83
- ```bash
84
- npm create liferay-react-cx
85
- ```
86
-
87
- ---
88
-
89
- ### Method 2 — `npx` (No Install)
90
-
91
- Use `npx` to run the CLI directly without installing anything globally. The full package name `create-liferay-react-cx` is used here.
92
-
93
- **With a project name:**
94
- ```bash
95
- npx create-liferay-react-cx my-widget
96
- ```
97
-
98
- **With a specific React version:**
99
- ```bash
100
- npx create-liferay-react-cx --name my-widget --react-version 18.2.0
101
- ```
102
-
103
- **Interactive wizard:**
104
- ```bash
105
- npx create-liferay-react-cx
106
- ```
107
-
108
- ---
109
-
110
- ### Method 3 — Global Install
111
-
112
- Install once, use anywhere. After a global install, you can use the short alias `liferay-react-cx` from any directory.
113
-
114
- **Step 1 — Install globally:**
115
- ```bash
116
- npm install -g create-liferay-react-cx
117
- ```
118
-
119
- **Step 2 — Use it:**
120
- ```bash
121
- liferay-react-cx my-widget
122
- liferay-react-cx --name my-widget --react-version 18.2.0
123
- liferay-react-cx --help
124
- ```
125
-
126
- > **Tip:** To update a globally installed version later, run `npm update -g create-liferay-react-cx`.
127
-
128
- ---
129
-
130
- ## Options & Flags
131
-
132
- | Flag | Short | Description | Default |
133
- |------|-------|-------------|---------|
134
- | `--name` | `-n` | App name in **kebab-case** | _(prompted)_ |
135
- | `--react-version` | `-r` | React version to scaffold with | `16.12.0` |
136
- | `--help` | `-h` | Print help and exit | — |
137
- | `--version` | `-v` | Print version and exit | — |
138
-
139
- **App name rules:** lowercase letters, numbers, and hyphens only. Must start with a letter. Examples: `my-widget`, `employee-portal`, `news-feed`.
140
-
141
- ---
142
-
143
- ## Interactive Mode
144
-
145
- Run the CLI with no arguments to enter the interactive wizard:
146
-
147
- ```bash
148
- npm create liferay-react-cx
149
- # or
150
- npx create-liferay-react-cx
151
- ```
152
-
153
- You will be asked:
154
-
155
- 1. **App name** — enter a kebab-case name for your widget
156
- 2. **React version** — choose from a list or enter a custom version:
157
- - `16.12.0` — Liferay 7.4 / DXP classic
158
- - `18.2.0` — Liferay 7.4 U45+ / DXP 2024.Q1+
159
- - `Custom` — enter any valid semver (e.g. `17.0.2`)
160
- 3. **Install dependencies now?** — yes/no confirm
161
-
162
- ---
163
-
164
- ## Generated Project Structure
165
-
166
- Running the CLI creates the following layout:
167
-
168
- ```
169
- my-widget/
170
- ├── client-extension.yaml ← Liferay CE descriptor (auto-configured)
171
- ├── index.html ← Vite dev-server entry point
172
- ├── package.json ← Project dependencies & scripts
173
- ├── vite.config.js ← Vite build config
174
- ├── eslint.config.js ← ESLint flat config
175
- └── src/
176
- ├── main.jsx ← Web Component registration (HTMLElement)
177
- ├── App.jsx ← Your React component — start editing here
178
- ├── index.css ← Global reset (shadow DOM scoped)
179
- └── assets/
180
- └── style.css ← Component styles (shadow DOM isolated)
181
- ```
182
-
183
- ### What `client-extension.yaml` does
184
-
185
- This file tells Liferay how to register and display your widget:
186
-
187
- ```yaml
188
- my-widget:
189
- type: customElement # renders as <my-widget> on Liferay pages
190
- htmlElementName: my-widget # the HTML tag name
191
- urls:
192
- - assets/*.js # built JS bundle from vite-build/
193
- cssURLs:
194
- - assets/*.css # built CSS bundle from vite-build/
195
- useESM: true # ES module support
196
- instanceable: false # one instance per page
197
- portletCategoryName: category.client-extensions
198
- ```
199
-
200
- All values are automatically replaced with your app name during scaffolding.
201
-
202
- ---
203
-
204
- ## Development Workflow
205
-
206
- ### ✅ Deploying to Liferay (Standard Workflow)
207
-
208
- When working inside a Liferay Workspace, **you only need one command**. Gradle handles the npm install, Vite build, and deployment automatically — no manual `npm run build` needed.
209
-
210
- **1. Navigate into your project:**
211
- ```bash
212
- cd my-widget
213
- ```
214
-
215
- **2. Deploy directly to Liferay** (from the Liferay Workspace root):
216
- ```bash
217
- ../../gradlew deploy
218
- ```
219
-
220
- That's it. Under the hood, Gradle will:
221
- - Run `npm install` (if `node_modules` is missing)
222
- - Run `npm run build` (Vite compiles to `vite-build/`)
223
- - Copy the output into Liferay's deploy folder
224
- - Hot-reload the bundle in your running Liferay instance
225
-
226
- > After deployment, go to **Liferay Admin → Fragments and Resources → Client Extensions** to find and add your widget to a page.
227
-
228
- ---
229
-
230
- ### 🖥️ Local Preview (Optional)
231
-
232
- If you want to preview your React component in a browser **outside of Liferay** during development (faster feedback, hot reload), you can use Vite's dev server:
233
-
234
- ```bash
235
- npm install # only needed once
236
- npm run dev # starts at http://localhost:5173
237
- ```
238
-
239
- > This is purely optional and useful for rapid UI development. The component will render standalone — not inside Liferay's portal context.
240
-
241
- ---
242
-
243
- ## React Version Compatibility
244
-
245
- | React Version | Liferay Compatibility | Notes |
246
- |:---:|:---|:---|
247
- | `16.12.0` | Liferay 7.4 GA / DXP classic | Uses Liferay's bundled React. Smaller bundle. |
248
- | `18.2.0` | Liferay 7.4 U45+ / DXP 2024.Q1+ | Fully isolated in shadow DOM. Concurrent features. |
249
-
250
- Not sure which to pick? Use `16.12.0` for maximum compatibility with older Liferay instances, or `18.2.0` for newer deployments that support isolated client extensions.
251
-
252
- ---
253
-
254
- ## Contributing
255
-
256
- Contributions, issues, and feature requests are welcome!
257
-
258
- ```bash
259
- # 1. Clone the repo
260
- git clone https://github.com/laxitkhanpara/liferay-react-ce.git
261
- cd liferay-react-cx
262
-
263
- # 2. Install dependencies
264
- npm install
265
-
266
- # 3. Test locally
267
- node bin/index.js my-test-app
268
-
269
- # 4. Clean up
270
- rm -rf my-test-app
271
- ```
272
-
273
- Please open an [issue](https://github.com/laxitkhanpara/liferay-react-ce/issues) first to discuss any significant changes.
274
-
275
- ---
276
-
277
- ## License
278
-
279
- [MIT](./LICENSE) © [Laxit Khanpara](https://github.com/laxitkhanpara)
280
-
281
- ---
282
-
283
- ## Links
284
-
285
- - 📦 [npm package](https://www.npmjs.com/package/create-liferay-react-cx)
286
- - 🐛 [Report a bug](https://github.com/laxitkhanpara/liferay-react-ce/issues)
287
- - 📖 [Liferay Client Extensions docs](https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html)
288
- - 🏗️ [Liferay Workspace docs](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html)
1
+ # create-liferay-react-cx
2
+
3
+ **Zero-config CLI** to scaffold **Liferay React Client Extensions** in seconds.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/create-liferay-react-cx)](https://www.npmjs.com/package/create-liferay-react-cx)
6
+ [![license](https://img.shields.io/npm/l/create-liferay-react-cx)](https://github.com/laxitkhanpara/create-liferay-react-cx/blob/main/LICENSE)
7
+
8
+ ---
9
+
10
+ ## Quick Start
11
+
12
+ ```bash
13
+ npx create-liferay-react-cx my-widget
14
+ cd my-widget
15
+ ../../gradlew deploy
16
+ ```
17
+
18
+ ## What You Get
19
+
20
+ - **Vite-powered** React project (fast builds, HMR)
21
+ - **client-extension.yaml** pre-configured
22
+ - **Shadow DOM** isolated styles
23
+ - **Ready to deploy** to Liferay 7.4+ / DXP
24
+
25
+ ## Usage
26
+
27
+ ### Interactive Mode
28
+ ```bash
29
+ npx create-liferay-react-cx
30
+ ```
31
+
32
+ ### With Arguments
33
+ ```bash
34
+ npx create-liferay-react-cx my-widget --react-version 18.2.0
35
+ ```
36
+
37
+ ### Using npm create
38
+ ```bash
39
+ npm create liferay-react-cx my-widget
40
+ ```
41
+
42
+ ## Options
43
+
44
+ | Flag | Description | Default |
45
+ |------|-------------|---------|
46
+ | `--name, -n` | App name (kebab-case) | _(prompted)_ |
47
+ | `--react-version, -r` | React version | `16.12.0` |
48
+ | `--help, -h` | Show help | — |
49
+ | `--version, -v` | Show version | |
50
+
51
+ ## Requirements
52
+
53
+ - **Node.js** ≥ 18.0.0
54
+ - **npm** ≥ 9.0.0
55
+ - **Liferay Workspace** (for deployment)
56
+
57
+ ## React Version Guide
58
+
59
+ - **16.12.0** → Liferay 7.4 GA / DXP classic
60
+ - **18.2.0** → Liferay 7.4 U45+ / DXP 2024.Q1+
61
+
62
+ ## After Scaffolding
63
+
64
+ 1. Navigate into your project: `cd my-widget`
65
+ 2. Deploy to Liferay: `../../gradlew deploy`
66
+ 3. Add widget to a page in **Liferay Admin → Client Extensions**
67
+
68
+ ## Documentation
69
+
70
+ 📖 Full documentation: [GitHub Repository](https://github.com/laxitkhanpara/create-liferay-react-cx)
71
+
72
+ ## Links
73
+
74
+ - [GitHub](https://github.com/laxitkhanpara/create-liferay-react-cx)
75
+ - [Issues](https://github.com/laxitkhanpara/create-liferay-react-cx/issues)
76
+ - [Liferay Docs](https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html)
77
+
78
+ ## License
79
+
80
+ MIT © [Laxit Khanpara](https://github.com/laxitkhanpara)
package/bin/index.js CHANGED
@@ -10,9 +10,9 @@ import { execa } from 'execa';
10
10
  const __filename = fileURLToPath(import.meta.url);
11
11
  const __dirname = path.dirname(__filename);
12
12
 
13
- const commandName = 'liferay-react-cx';
13
+ const commandName = 'create-liferay-react-cx';
14
14
 
15
- const PKG_VERSION = '1.0.1';
15
+ const PKG_VERSION = '1.0.3';
16
16
 
17
17
  // ─── Helpers ────────────────────────────────────────────────────────────────
18
18
 
@@ -87,32 +87,32 @@ function printBanner() {
87
87
  // ─── Version / Help ──────────────────────────────────────────────────────────
88
88
 
89
89
  if (hasFlag(['--version', '-v'])) {
90
- console.log(`liferay-react-cx v${PKG_VERSION}`);
90
+ console.log(`create-liferay-react-cx v${PKG_VERSION}`);
91
91
  process.exit(0);
92
92
  }
93
93
 
94
94
  if (hasFlag(['--help', '-h'])) {
95
95
  console.log(`
96
- ${chalk.bold('liferay-react-cx')} — Scaffold a Liferay React Client Extension
96
+ ${chalk.bold('create-liferay-react-cx')} — Scaffold a Liferay React Client Extension
97
97
 
98
98
  ${chalk.bold('USAGE')}
99
- liferay-react-cx [app-name] [react-version]
100
- liferay-react-cx --name <app-name> [--react-version <version>]
99
+ create-liferay-react-cx [app-name] [react-version]
100
+ create-liferay-react-cx --name <app-name> [--react-version <version>]
101
101
  -n, --name App name in kebab-case (e.g. my-widget)
102
102
  -r, --react-version React version to use (default: 16.12.0)
103
103
  -v, --version Print version
104
104
  -h, --help Show this help
105
105
 
106
106
  ${chalk.bold('EXAMPLES')}
107
- npm create liferay-react-cx my-widget
108
- npm create liferay-react-cx -- --name my-widget --react-version 18.2.0
109
- npm create liferay-react-cx # interactive mode
107
+ npx create-liferay-react-cx my-widget
108
+ npx create-liferay-react-cx --name my-widget --react-version 18.2.0
109
+ npx create-liferay-react-cx # interactive mode
110
110
 
111
111
  ${chalk.bold('AFTER SCAFFOLDING')}
112
112
  cd <app-name>
113
113
  ../../gradlew deploy # deploy to Liferay
114
114
 
115
- ${chalk.dim('https://github.com/laxitkhanpara/liferay-react-ce')}
115
+ ${chalk.dim('https://github.com/laxitkhanpara/create-liferay-react-cx')}
116
116
  `);
117
117
  process.exit(0);
118
118
  }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "create-liferay-react-cx",
3
- "version": "1.0.1",
4
- "description": "CLI scaffold tool to generate Liferay React Client Extension (custom element) projects zero-config, Vite-powered, Liferay 7.4+ compatible.",
3
+ "version": "1.0.3",
4
+ "description": "Zero-config CLI to scaffold Liferay React Client Extensions (custom element) — Vite-powered, shadow DOM isolated, ready to deploy.",
5
5
  "type": "module",
6
6
  "main": "./bin/index.js",
7
7
  "bin": {
8
- "create-liferay-react-cx": "./bin/index.js",
9
- "liferay-react-cx": "./bin/index.js"
8
+ "create-liferay-react-cx": "bin/index.js"
10
9
  },
10
+ "preferGlobal": false,
11
11
  "keywords": [
12
12
  "liferay",
13
13
  "client-extension",
@@ -16,9 +16,12 @@
16
16
  "vite",
17
17
  "scaffold",
18
18
  "cli",
19
+ "generator",
19
20
  "liferay-dxp",
20
21
  "liferay-portal",
21
- "web-component"
22
+ "web-component",
23
+ "create",
24
+ "boilerplate"
22
25
  ],
23
26
  "author": {
24
27
  "name": "Laxit Khanpara",
@@ -28,12 +31,12 @@
28
31
  "license": "MIT",
29
32
  "repository": {
30
33
  "type": "git",
31
- "url": "git+https://github.com/laxitkhanpara/liferay-react-ce.git"
34
+ "url": "git+https://github.com/laxitkhanpara/create-liferay-react-cx.git"
32
35
  },
33
36
  "bugs": {
34
- "url": "https://github.com/laxitkhanpara/liferay-react-ce/issues"
37
+ "url": "https://github.com/laxitkhanpara/create-liferay-react-cx/issues"
35
38
  },
36
- "homepage": "https://github.com/laxitkhanpara/liferay-react-ce#readme",
39
+ "homepage": "https://github.com/laxitkhanpara/create-liferay-react-cx#readme",
37
40
  "engines": {
38
41
  "node": ">=18.0.0",
39
42
  "npm": ">=9.0.0"