Getting Started

Contents:

You can run LiveArt in a several ways: embed demo, run locally or on the server, run with docker.

Embed Demo

To see how LiveArt fits your site you can embed Online Product Design Demo in just one simple step. Add it anywhere you like whether in a static page or dynamic popup. Insert the code below on your page to load latest LiveArt Designer Trial demo with default setup.

<div id="LiveArtIframe">
    <iframe src="https://demo.liveartdesigner.com/release/LAJS100/" style="border:none;"></iframe>
</div>

Tweak the CSS of the LiveArt to adjust size calculations. To fit LiveArt Designer Component into any HTML container — add the following CSS code:

<style>
    #LiveArtIframe {
        /* Responsive width; preserve min 30px margins */
        width: calc(100% - 60px);
        /* Const height */
        height: 653px;
        /* Top, Bottom 30px margins, center horizontally*/
        margin: 30px auto;
        /* Optional shadow */
        box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.3);
    }

    /* LiveArt Designer Component fit it's parent container */
    #LiveArtIframe > iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
</style>

As the result, we have horizontally responsive LiveArt Designer that fits most popular themes. Feel free to adjust #LiveArtIframe styles for your needs.

See the CodePen demo.

Run Locally or on the Server

Prerequisites

Despite LiveArt is a fully client-side component, it is provided with basic backend to save designs and prepare production output. Certain prerequisites are required to run the designer locally or on the server.

  1. PHP 5.5+:
    • Needed to run the server and the sample php services.
    • Ensure it is added to PATH:
      • Run cmd php -version to check manually.
    • What if I ignore the installation?
      • The component will not launch as it requires sample PHP services to function. Please refer to v1.0.0 migration guide for more information.
  2. Inkscape 0.92.3+:
    • Needed to proceed with the order output generation.
    • Ensure it is added to PATH:
      • Run cmd inkscape --version to check manually.
    • What if I ignore the installation?
      • No PNG/PDF production output will be generated.
  3. Ghostscript:
    • Needed to concatenate single-file PDF if multiple locations were designed.
    • Ensure it is added to PATH:
      • Run cmd gs --version to check manually.
    • What if ignore the installation?
      • No PDF output for multiple location products (unless configured merged: false in services/config/output.json).

Running Locally

  1. Clone the repository liveartjs or download ZIP.
  2. Open cmd/terminal in the directory with LiveArt.
  3. Run
    php -S localhost:9000
    
  4. Scripts should have permission to write files into folders /files and /files/uploads (for sample save design, upload image, and make order).
  5. Verify requirements:
  6. Open http://localhost:9000/iframe.html in the browser.

Running on the Server

  1. Map the LiveArt folder to the desired endpoint.
  2. Ensure JSON and WOFF files are served as static. Failing to configure this step may result in malfunctioning designer.
  3. Scripts should have permission to write files into folders /files and /files/uploads (for sample save design, upload image, and make order).
  4. Verify requirements:
    • Open http://_yourserver_/requirements-check/client/index.html in the browser.
    • Verify the requirements are met.

Run with Docker

You can run LiveArt on your server with our default backend, which is based on NodeJS technology. You can use our prepared Docker container to deploy to practically any type of server. The Docker containers allow you to bring up the designer and its admin area without much of a hassle. The deployment will have all the necessary services for the LiveArt operation. Our team will be able to assist with both setup and any piece of advice.

Prerequisites

In order to run the containers, you'll need Docker and Docker Compose installed.

Install Docker:

Verify it Works:

  1. Run docker --version to ensure that you have a version of Docker supported by your platform.
  2. Run docker-compose --version to ensure that you have a version of Docker Compose supported by your platform.

Run the Demo

  1. Clone the repository TBD or download ZIP.

  2. In the command line navigate to the folder and run:

    docker-compose -f liveartjs-lacp.d-compose.yml up
    

    Note 1: The command might require running with sudo depending on the running system and user.

    Note 2: The command might require to clean-up current containers and pull last changes - see Troubleshooting > "Get the latest images".

  3. The services will be available at the following default URL's:

  4. Create index.html file or update the page of your site where you want to see the LiveArt:

    • Include Live Art API library:
      <script type="text/javascript" src="lib/iframe-loader.js"></script>
      
    • Add HTML container for the editor:
      <main id="LiveArtIframe"></main>
      
    • Add styles for the iframe and it's container:
      <style>
            #LiveArtIframe {
                /* Responsive width; preserve min 30px margins */
                width: calc(100% - 60px);
                /* Const height */
                height: 653px;
                /* Top, Bottom 30px margins, center horizontally*/
                margin: 30px auto;
                /* Optional shadow */
                box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.3);
            }
      
            /* LiveArt Designer Component fit it's parent container */
            #LiveArtIframe > iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
      </style>
      
    • Add embed script (with the link to the docker container) to finally initialize LiveArt editor:
      <script type="text/javascript">
          window.onload = function () {
            //Link to the configuration
            var config = {
                base: "http://localhost:3000/api/liveart/configuration"
            };
      
            // LiveArt component url
            var url = "http://localhost:9000/index.html?iframe=true";
      
            window.liveArtIframeLoader.load("#LiveArtIframe", "http://localhost:9000/liveart.html");
          }
      </script>
      
    • All together the page should look like:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>LiveArt HTML5 iframe</title>
    
        <!-- Live Art API script-->
        <script type="text/javascript" src="lib/iframe-loader.js"></script>
    
        <!-- Live Art API CSS -->
        <style>
            #LiveArtIframe {
                /* Responsive width; preserve min 30px margins */
                width: calc(100% - 60px);
                /* Const height */
                height: 653px;
                /* Top, Bottom 30px margins, center horizontally*/
                margin: 30px auto;
                /* Optional shadow */
                box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.3);
            }
    
            /* LiveArt Designer Component fit it's parent container */
            #LiveArtIframe > iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        </style>
    
        <!-- Live Art API sample -->
        <script type="text/javascript">
            window.onload = function () {
                //Link to the configuration
                var config = {
                    base: "http://localhost:3000/api/liveart/configuration"
                };
    
                // LiveArt component url
                var url = "http://localhost:9000/index.html?iframe=true";
    
                // Init LiveArt iframe
                window.liveArtIframeLoader.load("#LiveArtIframe", url, config);
            }
        </script>
    </head>
    <body>
        <!-- LiveArt Iframe container  -->
        <main id="LiveArtIframe"></main>
    </body>
    </html>
    

Demos Limitations

All data will be lost after demos are closed (although not constantly).

System Requirements

End-User's Device

LiveArt is a web component that runs natively in all widely used browsers that have JavaScript enabled. The minimum browser requirements are listed below. Whichever browser you prefer, we recommend using the most up-to-date version available for the best experience.

  • Chrome (and all chrome based browsers) 40+
  • Firefox 46+
  • Safari 9.1+
  • Internet Explorer 11
  • Microsoft Edge 14+
  • Opera 27+

If LiveArt does not start for your specific browser or device, please welcome to write us about it mentioning versions of both device and browser you have used.

Server Requirements

  • Linux OS: CentOS or Ubuntu
  • Minimally 1-2Gb RAM (3-4 Gb if run with Docker)
  • If assets stored locally, at least 50-60GB of HDD
    • Core system up to 2Gb
    • DB up to 2Gb
    • 10Gb reserve for temporary files
    • Orders: 1Gb for 50 Orders (Production files)

Troubleshooting

"This site can't be reached" issue

  1. Check if some software (firewall, antivirus) blocks docker and/or used ports.
  2. Docker Toolbox uses docker machine with its own ip address.

Get the latest images from Docker Hub (if you loaded images before)

  1. Run docker pull liveart/admin-area
  2. Run docker pull liveart/designer