Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions concepts/Common/Licensing/09 Obtain Your License Key.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<iframe width="100%" height="476" src="https://www.youtube-nocookie.com/embed/PYxeMcTQk5s?si=k-7BWyTX_AiTXKne" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br>
Log in to the [DevExpress Download Manager](https://www.devexpress.com/ClientCenter/DownloadManager/) to obtain your license key. For full step-by-step instructions (including how to register the key on your machine and configure DevExtreme to use it), refer to the following article:

Log in to the [DevExpress Download Manager](https://www.devexpress.com/ClientCenter/DownloadManager/). Find your **DevExtreme Subscription** license in the product list (even if you have a Universal, DXperience, or ASP.NET and Blazor (includes DevExtreme) subscription, the key is under the **DevExtreme Subscription** line item). Expand this line item to access available downloads and additional information. Follow the on-screen instructions to copy your key.

![DevExtreme Download Manager](/images/Common/licensing-key@2x.png)
[License Key for DevExpress Products](https://docs.devexpress.com/GeneralInformation/405494/trial-register/set-up-your-dev-express-license-key#manual-registration-obtain-and-register-your-key)

[note] Every developer on your team must obtain and use their own key. Your DevExpress account manager should [Assign Licenses](https://www.devexpress.com/ClientCenter/LicenseManager) to developers.
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
To use DevExtreme in a licensed project, you must register a valid license key in your application. The process involves two steps:

1. [Obtain your DevExpress license key](/concepts/Common/Licensing/09%20Obtain%20Your%20License%20Key.md '/Documentation/Guide/Common/Licensing/#Obtain_Your_License_Key') from the DevExpress Download Manager.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better to say 3 steps

  1. Obtain your DevExpress license key
  2. Register the key on your machine
  3. Use the devextreme-license CLI tool ...

or we can merge 1 & 2 to make it similar with the general licensing topic

  1. Obtain your DevExpress license key and register the key on your machine
  2. Use the devextreme-license CLI tool ...

2. Use the `devextreme-license` CLI tool to generate a DevExtreme-compatible runtime key and register it in your application.

For complete instructions for all supported frameworks and environments, refer to the following article:

[License Key for DevExpress Products — Additional Step for JS/TS Developers (DevExtreme)](https://docs.devexpress.com/GeneralInformation/405494/trial-register/set-up-your-dev-express-license-key#manual-registration-additional-step-for-jsts-developers-devextreme)
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
After you obtain your DevExpress license key, use the `devextreme-license` CLI tool to generate a DevExtreme-compatible runtime key and register it in your application. Configuration differs based on whether your project is *modular* (files added via `import`/`require` statements) or *non-modular* (files referenced via `<script>` tags).
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After you obtain your DevExpress license key, ... and register it on your machine

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are talking here about two main approaches we can provide the exact link for each of them
modular
Non-Modular


For complete instructions, refer to the following article:

[License Key for DevExpress Products — Additional Step for JS/TS Developers (DevExtreme)](https://docs.devexpress.com/GeneralInformation/405494/trial-register/set-up-your-dev-express-license-key#manual-registration-additional-step-for-jsts-developers-devextreme)

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,48 +1,9 @@
In a [Module Federation](https://www.npmjs.com/package/@angular-architects/module_federation) setup, configure the license key in all applications (host and remotes) that use DevExtreme components.
In a Module Federation setup, configure the license key in all applications (host and remotes) that use DevExtreme components.

Call the `config()` method early in your application, typically in the `AppModule` constructor or a dedicated service:
For full instructions on setting up the license key with Angular Module Federation, refer to the following article:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { config } from 'devextreme/core/config';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {
constructor() {
config({ licenseKey: 'DEVELOPER_LICENSE_KEY' });
}
}

For remote applications using DevExtreme components, **repeat this step** in the remote's `AppModule`.

To manage the license configuration, create a shared utility file. Use this utility in both the host and remote `AppModule`:

<!-- tab: src/shared/devextreme.config.ts -->
import { config } from 'devextreme/core/config';

export function configureDevExtremeLicense() {
config({ licenseKey: 'DEVELOPER_LICENSE_KEY' });
}

<!-- tab: app.module.ts -->
import { configureDevExtremeLicense } from './path-to-shared/devextreme.config';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {
constructor() {
configureDevExtremeLicense();
}
}
[License Key for DevExpress Products — Angular Apps with Module Federation](https://docs.devexpress.com/GeneralInformation/405494/trial-register/set-up-your-dev-express-license-key#option-5-angular---apps-with-module-federation)
Comment thread
vladaskorohodova marked this conversation as resolved.

If the `config()` method cannot be called, [store the license key in a global window object](/concepts/Common/Licensing/10%20Validate%20Your%20License%20Key/20%20Storing%20the%20License%20Key%20in%20a%20Global%20Window%20Object.md '/Documentation/Guide/Common/Licensing/#Validate_Your_License_Key/Storing_the_License_Key_in_a_Global_Window_Object').

[tags] angular
[tags] angular
Original file line number Diff line number Diff line change
@@ -1,43 +1,9 @@
DevExtreme components function on the client side, which requires a license check during the client-side code execution. Follow these steps:
DevExtreme components function on the client side, which requires a license check during client-side code execution. Create a `ClientComponent` that registers the assigned license key, and run it in the `RootLayout` section before rendering any content.

- Create a `ClientComponent` with the assigned license.
- Run this component in the `RootLayout` section before rendering any content.
For full instructions on setting up the license key in a Next.js application, refer to the following article:

[note] Avoid calling the `config()` method within the `useEffect` callback. This callback triggers after component creation, making it too late to set the license.

<!-- tab: ClientComponent-->
"use client";
import config from "devextreme/core/config";

const LicenseCheckComponent = () => {
if (typeof window !== "undefined") {
config({ // DO NOT CALL INSIDE useEffect
licenseKey:
"DEVELOPER_LICENSE_KEY",
});
}
return null;
};

export default LicenseCheckComponent;

<!-- tab: layout.tsx -->
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {

return (
<html lang="en">
<body>
<LicenseCheckComponent />
{children}
</body>
</html>
);
}
[License Key for DevExpress Products — React Apps that Use Next.js](https://docs.devexpress.com/GeneralInformation/405494/trial-register/set-up-your-dev-express-license-key#option-4-react---apps-that-use-nextjs)
Comment thread
vladaskorohodova marked this conversation as resolved.

If the `config()` method cannot be called, [store the license key in a global window object](/concepts/Common/Licensing/10%20Validate%20Your%20License%20Key/20%20Storing%20the%20License%20Key%20in%20a%20Global%20Window%20Object.md '/Documentation/Guide/Common/Licensing/#Validate_Your_License_Key/Storing_the_License_Key_in_a_Global_Window_Object').

[tags] react
[tags] react
Loading
Loading