---
title: "Saving Products"
canonical: https://customerscanvas.com/docs/cc6/saving-products-in-daf.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Atoms .NET"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Saving Products

**Applies to:** Customer's Canvas On-Premises; Design Atoms .NET 6.15.0, 6.x (may differ) · **Archived documentation**
 
The Design Atoms Framework allows you to [save products to state files](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Serialization_IStateFileSerializer.htm.md) for long-term storage. For example, you can transfer these files to another computer for editing and rendering print-ready files.
 
You can also use the client-side and server-side code for serialization and deserialization of the [object model in the JSON format](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Serialization_Json_Product_IProductSerializer.htm.md). For example, you can serialize your object model on the client side and pass it to the server within an HTTP request.
 
## Saving Products to State Files
  
The Design Atoms Framework provides the [State](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_State.htm.md) class to store the internal product representation and the viewer's configuration. You can save these states for long-term storage by using the **IStateFileSerializer** interface. The following example illustrates how you can get an instance of the **StateFileSerializer** and save your state to a file.
 
```csharp
using Aurigma.DesignAtoms.Configuration;
using Aurigma.DesignAtoms.Serialization;
using Newtonsoft.Json;

Injector.CurrentFactory = () => DefaultInjectorFactory.Create();
JsonConvert.DefaultSettings = () => DefaultJsonSettings.Get(Injector.Instance.Resolve<IConfiguration>());

var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
var state = new State(product);
using (var stateStream = File.OpenWrite("state.st"))
{
    stateFileSerializer.Serialize(state, stateStream);
}
```
 
To load a product from a state file, you can use the following code.
 
```csharp
using (var stateStream = File.OpenRead("state.st"))
{
    var state = stateFileSerializer.Deserialize(stateStream);
    var product = state.Product;
}
```
 
## Connecting a Front End to a Back End
  
To connect your front end to a back end, you need to specify a running back-end URL when creating your canvas viewer.
 
```
import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";
// A URL that links to a back-end instance.
const backendUrl = "http://<yourInstanceUrl>";
// An HTML element that contains the viewer.
const holder = document.querySelector(holderId) as HTMLDivElement;
// Initialization of the viewer.
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    surface: product.surfaces.get(0),
    canvasBackground: { color: "white" }
});
```
 
Here, **backendUrl** may refer to both a custom back end and Customer's Canvas 5, for example, deployed in the Aurigma's cloud. The **viewer** appears in a DIV element referenced by **holderId**.
 
To transfer products between the front end and back end, for example, in HTTP requests, you can use the JSON serialization API. To serialize and deserialize a [Product](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_Product.htm.md) object to or from the JSON format, you can use the **JsonProductSerializer** class on the front end and the **IProductSerializer** interface on the back end.
 
For example, on the front end, you can serialize your product as follows:
 
```
import { JsonProductSerializer } from "@aurigma/design-atoms-model/Product/Serializer/JsonProductSerializer";
var serializedProduct = new JsonProductSerializer().serialize(product);
```
 
After that, on the back end, you can deserialize this product as follows:
 
```csharp
using Aurigma.DesignAtoms.Serialization.Json.Product;
var jsonSerializer = Injector.Instance.Resolve<IProductSerializer>();
var product = jsonSerializer.Deserialize(serializedProduct);
```
 
## The Sample
  
This sample illustrates how you can save a product to a state file and then load this state file to render a proof image by using the Design Atoms Framework.
 
```
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 Aurigma.DesignAtoms.Services.Logger;
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[0], 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);
                    }
                }
            }
        }
    }
}
```
 
## See Also
  
### Manual
 
- [Design Atoms Framework Overview](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md)
- [Creating Applications with Design Atoms Framework](https://customerscanvas.com/docs/cc6/deploying-design-atoms.htm.md)
- [Using Dependency Injection](https://customerscanvas.com/docs/cc6/using-dependency-injection.htm.md)
- [Working with the Object Model](https://customerscanvas.com/docs/cc6/using-design-atoms-fw.htm.md)

### Reference
 
- [IStateFileSerializer Class](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Serialization_IStateFileSerializer.htm.md)
- [ProductSerializer Class](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Serialization_Json_Product_ProductSerializer.htm.md)

### Other
 
- [Design Atoms sample project↗](https://github.com/aurigma/DesignAtomsSamples)