Compiling Customer's Canvas from Source Code

You can request the Customer's Canvas source code if you purchased the on-premises version. The Customer's Canvas source code is a Visual Studio solution designed for Visual Studio 2017.

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 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.0.1 for Visual Studio. Note that you may obtain compilation errors if you install a different version of TypeScript.
  5. Download and install node.js 10.15.3 (x64) or higher.

Compiling the Application

To build the solution:

  1. Extract the CustomersCanvasSrc.zip archive to your file system.
  2. Open \src\CustomersCanvas.sln in Visual Studio.
  3. Navigate to Tools > Options > Projects and Solutions > Web Package Management > External Web Tools and move $(PATH) above the .\node_modules\.bin internal path.

    Set up external paths.

  4. Click Web Projects and select Use the 64 bit version of IIS Express.

    Enable the 64 bit version of IIS Express.

  5. Select Release on the Solution Configurations menu and Any CPU in Solution Platforms.

    The list of available configurations.

    • Note

      As an alternative to steps 6 - 8, you can run a script performing the same actions:

      • Run Windows PowerShell.
      • Navigate to the \BuildUtils\ folder.
      • At the command prompt, type & ".\BuildAll.ps1"
  6. Install Nuget packages:

    On the menu, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution > Restore to get NuGet packages.

    Restore NuGet packages.

  7. Build the ResourceBundler project:

    In Solution Explorer, right-click ResourceBundler and click Build.

  8. Install NodeJS packages and build the following FrontEnd projects:

    The front-end projects.

    • design-atoms:
    • At the command prompt, navigate to the \src\design-atoms folder.
    • At the command prompt, type npm install.
    • In Solution Explorer, right-click design-atoms and click Build.
    • design-editor-base:
    • At the command prompt, navigate to the \src\design-editor-base folder.
    • At the command prompt, type npm install.
    • In Solution Explorer, right-click design-editor-base and click Build.
    • design-editor-iframe-api:
    • At the command prompt, navigate to the \src\design-editor-iframe-api folder.
    • At the command prompt, type npm install.
    • In Solution Explorer, right-click design-editor-iframe-api and click Build.
    • At the command prompt, type npm run build:release+copy.
    • design-editor:
    • At the command prompt, navigate to the \src\design-editor folder.
    • At the command prompt, type npm install.
    • In Solution Explorer, right-click design-editor and click Build.
    • At the command prompt, type npm run build-all:release+copy.
    • design-editor-demo-pages:
    • At the command prompt, navigate to the \src\design-editor-demo-pages folder.
    • At the command prompt, type npm install.
    • In Solution Explorer, right-click design-editor-demo-pages and click Build.
    • At the command prompt, type npm run build:release+copy.
  9. Build the solution: press Ctrl+Shift+B or click Build > Build Solution on the menu.
  10. Copy your license file (Aurigma.GraphicsMill.lic) to the \src\Aurigma.DesignEditor\bin\ folder or use an alternative way of registering your license keys.
  11. Include the license file in the project; this way the license file will be sent to the server when the project is published. To include the file in the project, perform the following steps:
    • Click the Show All Files icon in the Solution Explorer.

      Show All Files in Solution Explorer.

    • Open the \bin\ folder, find Aurigma.GraphicsMill.lic, right-click it, and then click Include In Project.

      Including Aurigma.GraphicsMill.lic to the project.

  12. Set Aurigma.DesignEditor as a startup project: right-click Aurigma.DesignEditor in Solution Explorer and click Set as StartUp Project.

    Setting as StartUp Project.

  13. Start the project: press Ctrl+F5 or click Debug > Start Without Debugging on the menu. In your browser, you should see a demo page containing the web-to-print designer.

If you run Visual Studio as an administrator, you can deploy this application: right-click Aurigma.DesignEditor in Solution Explorer and click Publish. You can find more information on the deployment in the Deploying Customer's Canvas to Windows Servers topic.

If you face a compilation problem, refer to the Troubleshooting topic for a solution.

See Also

Manual

Other