1046482: Updated Getting Started with Syncfusion CLI for React Angular Vue

Document-Processing-toc.html

@@ -749,6 +749,7 @@
 						<ul>
 							<li>Getting Started
 								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/setup-with-syncfusion-cli">with Syncfusion CLI</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started">with Standalone PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
@@ -1308,6 +1309,7 @@
 							<li>
 								<a href="/document-processing/pdf/pdf-viewer/react/getting-started-overview">Getting Started</a>
 								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/setup-with-syncfusion-cli">with Syncfusion CLI</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
@@ -1632,6 +1634,7 @@
 						<ul>
 							<li>Getting Started
 								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/setup-with-syncfusion-cli">with Syncfusion CLI</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started">with Standalone PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-application">Vue 3</a></li>

Document-Processing/PDF/PDF-Viewer/angular/setup-with-syncfusion-cli.md

@@ -0,0 +1,142 @@
+---
+layout: post
+title: Set Up Angular PDF Viewer Using Syncfusion CLI | Syncfusion
+description: Learn how to set up an Angular PDF Viewer project quickly using the Syncfusion CLI. This guide covers both non-interactive and interactive setup modes with step-by-step instructions for developers.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Set Up Angular PDF Viewer Using Syncfusion CLI
+
+This guide shows you how to set up an Angular PDF Viewer project using the Syncfusion CLI in minutes. The Syncfusion CLI automates project scaffolding with predefined templates, themes, and styling formats.
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+- **Node.js 24+ (LTS recommended)** — [Download Node.js](https://nodejs.org/)
+- A command-line terminal (PowerShell, Terminal, or Command Prompt)
+- Basic familiarity with npm and Angular
+
+## Step 1: Configure npm Registry
+
+The Syncfusion CLI requires access to the Syncfusion development registry. Create a `.npmrc` file in your project folder with the following configuration:
+
+```
+registry=https://registry.npmjs.org/
+@syncfusion:registry=https://nexus.syncfusioninternal.com/repository/ej2-development
+```
+
+This file tells npm where to download Syncfusion packages from.
+
+## Step 2: Create package.json and Install Syncfusion CLI
+
+Create a `package.json` file in your project directory with the following content:
+
+```json
+{
+  "name": "pdf-viewer-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@syncfusion/cli": "*"
+  }
+}
+```
+
+Then install the Syncfusion CLI by running:
+
+```bash
+npm install
+```
+
+Or install directly:
+
+```bash
+npm install @syncfusion/cli
+```
+
+## Step 3: Create an Angular PDF Viewer Project
+
+The Syncfusion CLI provides two ways to create a project: **non-interactive** and **interactive** mode.
+
+### Option A: Non-interactive Mode
+
+Create a project directly with a single command:
+
+```bash
+npx sf new my-pdf-viewer-app --framework angular --template pdf-viewer
+```
+
+This command instantly creates an Angular application configured with the EJ2 PDF Viewer component. Replace `my-pdf-viewer-app` with your desired project name.
+
+### Option B: Interactive Mode
+
+For a guided setup, run the CLI in interactive mode:
+
+```bash
+npx sf
+```
+
+The CLI will prompt you to select your project configuration. Follow these steps:
+
+1. **Project name** — Enter your project name (e.g., `my-pdf-viewer-app`)
+2. **Framework** — Select `Angular`
+3. **Build Tool** — Select `Webpack` or your preferred build tool
+4. **Language** — Select `TypeScript` or `JavaScript`
+5. **Template** — Select `PDF Viewer`
+6. **Theme** — Choose your preferred theme (e.g., `Material3`)
+7. **Style Format** — Select `CSS`, `SCSS`, or `Tailwind CSS`
+8. **Syncfusion MCP Server** — Choose `yes` or `no` (for AI-powered development)
+9. **Component Skills** — Choose `yes` or `no` (for AI-powered features)
+10. **Install dependencies and start app?** — Select `yes` to run immediately, or `no` to set up manually
+
+Example output:
+
+```
+✓ Project name? ... my-pdf-viewer-app
+✓ Choose Framework: » Angular 
+✓ Choose Build Tool: » Webpack 
+✓ Choose Language: » TypeScript 
+✓ Choose Template: » PDF Viewer 
+✓ Choose Theme: » Material3 
+✓ Choose Style Format: » CSS 
+✓ Would you like to integrate the Syncfusion MCP Server? ... no 
+✓ Would you like to install Component Skills? ... no 
+✓ Install dependencies and start app now? ... yes
+```
+
+## Step 4: Run Your Project
+
+If you selected `no` for automatic setup, navigate to your project and start the development server:
+
+```bash
+cd my-pdf-viewer-app
+npm install
+npm start
+```
+
+Your Angular PDF Viewer application will start on `http://localhost:4200` (or the next available port). The browser will automatically open with your project.
+
+After the application starts, you will see the Angular PDF Viewer in the browser with the sample PDF loaded and all toolbar controls ready to use. The output will appear as follows:
+
+![Angular PDF Viewer Application](images/angular-cli-pdfviewer.png)
+
+The Syncfusion CLI creates a fully configured project with a predefined PDF Viewer template. The component files contain a basic PDF Viewer component initialized with all essential services (toolbar, annotations, search, form fields, etc.) and ready to use.
+
+## Next Steps
+
+After completing this guide, you will have a working Angular PDF Viewer project. You can now:
+
+- **Customize the PDF Viewer** — See [Customize Toolbar](./toolbar-customization) to modify toolbars and controls
+- **Handle Events** — Learn about PDF Viewer events in [Event Handling](./events)
+- **Add Annotations** — Explore annotation features in [Annotation](./annotation/overview)
+- **Open PDF Files** — See [Open PDF Files](./open-pdf-files) for file handling
+- **Deploy Your App** — Refer to [Deployment Integration](./deployment-integration/overview) for production setup
+
+For more information, visit the [Getting Started with Angular PDF Viewer](./getting-started) guide or the [PDF Viewer Overview](../overview).
+

Document-Processing/PDF/PDF-Viewer/react/setup-with-syncfusion-cli.md

@@ -0,0 +1,142 @@
+---
+layout: post
+title: Set Up React PDF Viewer Using Syncfusion CLI | Syncfusion
+description: Learn how to set up a React PDF Viewer project quickly using the Syncfusion CLI. This guide covers both non-interactive and interactive setup modes with step-by-step instructions for developers.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Set Up React PDF Viewer Using Syncfusion CLI
+
+This guide shows you how to set up a React PDF Viewer project using the Syncfusion CLI in minutes. The Syncfusion CLI automates project scaffolding with predefined templates, themes, and styling formats.
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+- **Node.js 24+ (LTS recommended)** — [Download Node.js](https://nodejs.org/)
+- A command-line terminal (PowerShell, Terminal, or Command Prompt)
+- Basic familiarity with npm and React
+
+## Step 1: Configure npm Registry
+
+The Syncfusion CLI requires access to the Syncfusion development registry. Create a `.npmrc` file in your project folder with the following configuration:
+
+```
+registry=https://registry.npmjs.org/
+@syncfusion:registry=https://nexus.syncfusioninternal.com/repository/ej2-development
+```
+
+This file tells npm where to download Syncfusion packages from.
+
+## Step 2: Create package.json and Install Syncfusion CLI
+
+Create a `package.json` file in your project directory with the following content:
+
+```json
+{
+  "name": "pdf-viewer-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@syncfusion/cli": "*"
+  }
+}
+```
+
+Then install the Syncfusion CLI by running:
+
+```bash
+npm install
+```
+
+Or install directly:
+
+```bash
+npm install @syncfusion/cli
+```
+
+## Step 3: Create a React PDF Viewer Project
+
+The Syncfusion CLI provides two ways to create a project: **non-interactive** and **interactive** mode.
+
+### Option A: Non-interactive Mode
+
+Create a project directly with a single command:
+
+```bash
+npx sf new my-pdf-viewer-app --framework react --template pdf-viewer
+```
+
+This command instantly creates a React Vite application configured with the EJ2 PDF Viewer component. Replace `my-pdf-viewer-app` with your desired project name.
+
+### Option B: Interactive Mode
+
+For a guided setup, run the CLI in interactive mode:
+
+```bash
+npx sf
+```
+
+The CLI will prompt you to select your project configuration. Follow these steps:
+
+1. **Project name** — Enter your project name (e.g., `my-pdf-viewer-app`)
+2. **Framework** — Select `React`
+3. **Build Tool** — Select `Vite`
+4. **Language** — Select `JavaScript` or `TypeScript`
+5. **Template** — Select `PDF Viewer`
+6. **Theme** — Choose your preferred theme (e.g., `Material3`)
+7. **Style Format** — Select `CSS`, `SCSS`, or `Tailwind CSS`
+8. **Syncfusion MCP Server** — Choose `yes` or `no` (for AI-powered development)
+9. **Component Skills** — Choose `yes` or `no` (for AI-powered features)
+10. **Install dependencies and start app?** — Select `yes` to run immediately, or `no` to set up manually
+
+Example output:
+
+```
+✓ Project name? ... my-pdf-viewer-app
+✓ Choose Framework: » React 
+✓ Choose Build Tool: » Vite 
+✓ Choose Language: » JavaScript 
+✓ Choose Template: » PDF Viewer 
+✓ Choose Theme: » Material3 
+✓ Choose Style Format: » CSS 
+✓ Would you like to integrate the Syncfusion MCP Server? ... no 
+✓ Would you like to install Component Skills? ... no 
+✓ Install dependencies and start app now? ... yes
+```
+
+## Step 4: Run Your Project
+
+If you selected `no` for automatic setup, navigate to your project and start the development server:
+
+```bash
+cd my-pdf-viewer-app
+npm install
+npm run dev
+```
+
+Your React PDF Viewer application will start on `http://localhost:5173` (or the next available port). The browser will automatically open with your project.
+
+After the application starts, you will see the React PDF Viewer in the browser with the sample PDF loaded and all toolbar controls ready to use. The output will appear as follows:
+
+![React PDF Viewer Application](images/react-cli-pdfviewer.png)
+
+The Syncfusion CLI creates a fully configured project with a predefined PDF Viewer template. The `App.jsx` file contains a basic PDF Viewer component initialized with all essential services (toolbar, annotations, search, form fields, etc.) and ready to use.
+
+## Next Steps
+
+After completing this guide, you will have a working React PDF Viewer project. You can now:
+
+- **Customize the PDF Viewer** — See [Customize Toolbar](./toolbar-customization) to modify toolbars and controls
+- **Handle Events** — Learn about PDF Viewer events in [Event Handling](./events)
+- **Add Annotations** — Explore annotation features in [Annotations](./annotation/overview)
+- **Open PDF Files** — See [Open PDF Files](./open-pdf-files) for file handling
+- **Deploy Your App** — Refer to [Deployment Integration](./depoyment-integration/overview) for production setup
+
+For more information, visit the [Getting Started with React PDF Viewer](./getting-started) guide or the [PDF Viewer Overview](../overview).
+