1. Customer's Canvas 6.13.1
  2. APIs
  3. Design Atoms Framework
This is an old documentation. Go to the latest Customer's Canvas docs

Creating Applications with Design Atoms Framework

This topic describes how you can create a web application and what packages you need to install for the Design Atoms Framework. You can refer to a sample application demonstrating how you can use the Design Atoms Framework in the following GitHub repository:

DesignAtomsSamples

Now, let us see how to create an application using the Design Atoms Framework from scratch.

Prerequisites

  1. Download and install Microsoft Visual C++ 2017 Redistributable Package (x64).
  2. Download and install Microsoft .NET Framework 4.6.2 or higher.
  3. Download Visual Studio 2017 or higher and install it with the ASP.NET and web development and Node.js development workloads enabled.

    ASP.NET and web development workload.

  4. Download and install TypeScript SDK 3.8.2 for Visual Studio. Note that you may receive compilation errors if you install a different version of TypeScript.
  5. Download and install node.js 10.15.3 (x64) or higher.

Creating a Web Application

  1. In Visual Studio, create a new project ASP.NET Web Application (.NET Framework).

    Creating an ASP.NET project.

  2. When creating the project, use the Web API project template.

    Creating an ASP.NET project using the Web API template.

  3. Select the 64 bit version of IIS Express:
    • On the menu, click Tools > Projects and Solutions > Web Projects.
    • Select Use the 64 bit version of IIS Express for web sites and projects.
  4. Install the NuGet package. There are two ways to perform this:
    • On the menu, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution and search for Aurigma.DesignAtoms.
    • Open Tools > NuGet Package Manager > Package Manager Console and type: 
      Install-Package Aurigma.DesignAtoms
  5. Install the Node.js package. At the command prompt, navigate to your project folder and type: 
    npm install @aurigma/design-atoms --save
  6. Register your license key for Customer's Canvas as described in Registering Production License Keys.
  7. 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();
  8. In the App_Start\WebApiConfig.cs file, remove this line: 
    config.MapHttpAttributeRoutes();
    Note

    You don't need to call HttpConfigurationExtensions.MapHttpAttributeRoutes() here, because Aurigma.DesignAtoms.Configuration.Configuration.Setup calls this method.

  9. Start your application.

Now, you can start using this framework and refer to the following topic for more details.

See Also

Manual

Other