1. Aurigma Customer's Canvas 5.0.0
  2. Getting Started

Deploying the Design Atoms Framework

Customer's Canvas 5 represents a software development kit (SDK) that consists of Design Atoms Framework, Design Editor, and UI Framework. This topic dwells on how you can deploy the Design Atoms Framework.

The Design Atoms Framework splits into the back end and font end.

Installing the Back-end Library

The back-end library is the Aurigma.DesignAtoms NuGet package. In your Visual Studio solution, in the NuGet Package Manager, you can search for this package and install it.

Running the Back End

To deploy and run the back end:

  1. Create an ASP.NET Web Application (.NET Framework) project. When creating the project, use the Web API project template.
  2. Install Aurigma.DesignAtoms through the NuGet Package Manager.
  3. Register your license key.
  4. In the Global.asax.cs file:
    • At the beginning of Application_Start, add 
      Aurigma.DesignAtoms.Configuration.Configuration.Setup(enableCors: true);
    • At the end of Application_Start, add 
      Aurigma.DesignAtoms.Licensing.License.Check();
  5. In the WebApiConfig.cs file, remove 
    config.MapHttpAttributeRoutes();
  6. Start your application.

Installing the Front-end Library

The front-end library is the @aurigma/design-atoms Node.js package. First, you need to download and install Node.js. After that, you can install this package through the Node Package Manager. At the command prompt, type

npm install @aurigma/design-atoms --save

Using the Design Atoms Framework

When you have installed the front end, you can use its API as follows:

JavaScript 
import { Product } from "@aurigma/design-atoms/Model/Product";
let product = new Product([new Surface(100, 100)]);

To connect your front end to a back end, you need to specify a running back-end URL when creating your canvas viewer.

JavaScript 
const backendUrl = "http://<yourInstanceUrl>";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

Here, backendUrl may refer to both a custom back end and Customer's Canvas 5, say, deployed in the Aurigma cloud.

See Also

Manual