Skip to content

Clone GitHub Angular Project

This guide will walk you through downloading and running a pre-built CreativeEditor SDK (CE.SDK) Angular integration project from GitHub. It’s the quickest way to get started with CE.SDK without having to build anything from the ground up.

Who Is This Guide For?

This guide is intended for developers who:

  • Want to explore CE.SDK without the complexity of setting up a custom environment.
  • Prefer starting with a pre-configured Angular sample project.
  • Are comfortable with Git and Node.js for configuring local development environments.

What You’ll Achieve

By following this tutorial, you will:

  • Clone the CE.SDK Angular integration project from GitHub.
  • Install the necessary dependencies and run the project locally.
  • Launch a fully functional image and video editor directly in your browser.

Prerequisites

Before you get started, ensure you have the following:

  • Git: Required to clone the ready-made project from GitHub. Download Git.
  • The latest LTS version of Node.js and npm: Necessary for installing dependencies and running the local server. Download Node.js.
  • A valid CE.SDK license key: Needed to use CE.SDK. Obtain one by starting a free trial.

Step 1: Clone the GitHub Repository

First, clone the CE.SDK examples repository from GitHub:

Terminal window
git clone https://github.com/imgly/cesdk-web-examples.git

Then navigate to the Angular integration folder:

Terminal window
cd cesdk-web-examples/integrate-with-angular

Step 2: Install the Dependencies

Install the project’s dependencies using npm:

Terminal window
npm install

This will download and install all the packages listed in the package.json file.

Step 3: Set Your CE.SDK License Key

Open the src/app/app.component.ts file and replace the placeholder license key with your valid CE.SDK license:

const config: Configuration = {
  license: '<YOUR_CE_SDK_LICENSE>, // replace this with your CE.SDL license key
  // ...
};

Step 4: Run the Project

Start the local Angular development server with:

Terminal window
npm run start

By default, the Angular application will be available on your localhost at http://localhost:4200/. Open that URL in your browser to view the creative editor in action.

Troubleshooting & Common Issues

❌ Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

  • Double-check that you ran npm install before executing npm run start.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

  • Verify that your CE.SDK license key is valid, hasn’t expired, and has been correctly assigned to the CreativeEditor component’s props.

❌ Issue: The editor doesn’t load

  • Check the browser console for any error messages that may provide more details.

Next Steps

Congratulations! You’ve successfully integrated CE.SDK with Angular. Now, feel free to explore the SDK and proceed to the next steps: