---
title: "Getting started | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-cs/getting-started/"
---

# Getting started

> Here, you will find some information how to get started with Design Atoms - add it to your .NET application, properly configure the dependency injection. After that you will be able to use Design Atoms classes to load designs, manipulate object model, save results, render, etc.

## Prerequisites

1.  Download and install [Microsoft Visual C++ Redistributable Package x64 (latest supported)](https://aka.ms/vs/17/release/vc_redist.x64.exe).
2.  Download and install [Microsoft .NET Framework 4.8](https://dotnet.microsoft.com/en-us/download/dotnet-framework/thank-you/net48-developer-pack-offline-installer) or higher.
3.  Download [Visual Studio 2022](https://learn.microsoft.com/en-us/visualstudio/releases/2022/release-notes) or higher and install it with the ASP.NET and web development and Node.js development workloads enabled.

    ![ASP.NET and web development workload.](images/VSWorkloads.png)

4.  Download and install [TypeScript SDK 3.8.2 for Visual Studio](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.typescript-382). Note that you may receive compilation errors if you install a different version of TypeScript.
5.  Download and install [node.js 17.9.1 (x64)](https://nodejs.org/en/download/) or higher.

## Creating an Application

To create a Web application:

1.  In Visual Studio, create a new project **ASP.NET Web Application (.NET Framework)** using the **Web API** project template.
2.  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**.
3.  Install the NuGet package. There are two ways to perform this:
    -   On the menu, click **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution**, search for **`Aurigma.DesignAtoms`** and install it for the application.
    -   Open **Tools** > **NuGet Package Manager** > **Package Manager Console**, then type and run:

        ```shell
        Install-Package Aurigma.DesignAtoms
        ```

4.  [Register your license key](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/install/license-keys.md#registering-the-license-keys) for Customer's Canvas.

To create a Console application, create a new project **Console App (.NET Framework)** and follow the previous procedure starting from Step 3.

Now, you can start using this framework and refer to [Working with the object model](https://customerscanvas.com/docs/on-premises/design-atoms-cs/howto/working-with-object-model.md) for more details.

## Using Dependency Injection

The Design Atoms Framework allows you to work with its components through Dependency Injection (DI). You can use a static class [Injector](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration/Injector.md) to instantiate services and pass all necessary dependencies to it. The [Injector.Instance](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration/Injector.md#Instance) property returns an object containing the `Resolve<TDependency>` method, which in turn instantiates the service registered in the Design Atoms Framework. You can set up DI in your application as follows:

```csharp title="Using Dependency Injection"
using Aurigma.DesignAtoms.Configuration;
Injector.CurrentFactory = () => DefaultInjectorFactory.Create();
```

Then, for example, to parse PSD templates and convert them to [products](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Product.md), you can create and use an instance of the [ITemplateParser](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Convert/ITemplateParser.md) interface as follows:

```csharp title="Parsing PSD templates"
using Aurigma.DesignAtoms.Convert;
var parser = Injector.Instance.Resolve<ITemplateParser>();
var product = parser.FromFile("nameplate.psd");
```

In this way, you can use such components as:

-   `IStateFileSerializer` to store product states
-   `IProductRenderer` to render products
-   `IFileCache` to get rendered outputs
-   `IImageLoader` to load images
-   `IConfiguration` to configure the viewer

## Dependency Injection Sample

This sample illustrates how you can instantiate the `IStateFileSerializer` and `IProductRenderer` interfaces to work with state files and to render products.

```csharp title="Program.cs"
using System.IO;
using Aurigma.DesignAtoms.Configuration;
using Aurigma.DesignAtoms.Configuration.RenderingConfig;
using Aurigma.DesignAtoms.Model;
using Aurigma.DesignAtoms.Rendering;
using Aurigma.DesignAtoms.Serialization;
using Autofac;
using Newtonsoft.Json;

namespace DesignAtomsConsole
{
    class Program
    {
        static void Main(string[] args)
        {
            // Setting up the dependency injection.
            Injector.CurrentFactory = () => DefaultInjectorFactory.Create();
            // Setting up the serialization.
            JsonConvert.DefaultSettings = () => DefaultJsonSettings.Get(Injector.Instance.Resolve<IConfiguration>());

            CreateState(@"C:\CustomersCanvas\states\one-page.st");
            RenderState(@"C:\CustomersCanvas\states\one-page.st", @"C:\CustomersCanvas\previews\one-page.jpg");
        }

        static void CreateState(string newStateFile)
        {
            // Create a product.
            var product = new Product();
            var surface = new Surface(330, 600);
            product.Surfaces.Add(surface);

            // Instantiate IStateFileSerializer.
            var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
            var state = new Aurigma.DesignAtoms.Model.State(product);
            using (var stateStream = File.OpenWrite(newStateFile))
            {
                // Save the product to a state file.
                stateFileSerializer.Serialize(state, stateStream);
            }
        }

        static void RenderState(string stateFileName, string resultFileName)
        {
            using (var fstream = File.OpenRead(stateFileName))
            {
                // Instantiate IStateFileSerializer.
                var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
                // Load a product from a state file. 
                var state = stateFileSerializer.Deserialize(fstream);
                var product = state.Product;

                // Instantiate IProductRenderer.
                var productRenderer = Injector.Instance.Resolve<IProductRenderer>();
                using (var memoryStream = new MemoryStream())
                {
                    // Render the product to a stream.
                    productRenderer.RenderProof(memoryStream, product.Surfaces.First(), RenderingConfig.GetDefault());
                    // Write the resulting memory stream to a file.
                    memoryStream.Position = 0;
                    using (FileStream outputStream = File.OpenWrite(resultFileName))
                    {
                        outputStream.Write(memoryStream.GetBuffer(), 0, (int)memoryStream.Length);
                    }
                }
            }
        }
    }
}
```