Skip to main content

Installation & starting a project

Install the Developer CDK​

Download the

macos application from here

.

  • Mount the .dmg
  • Drag the application to the applications folder
  • Run the application from the Applications folder

Starting a new project​

We advise you to use our deck compilation tasks when developing LivePreso content. It has been pre written to automate code compilation of javascript in the hooks directory (Converting es2016+ code to code that can be run in all browsers), compile sass styles, compile Nunjucks, inject HTML, watch for changes, etc.


Check out deck-gulp-tasks for more information on the available features.

To get started with deck-gulp-tasks, you'll need to do the following:

note

Our preferred way of installing node is using nvm as it allows for the installation and management of different versions of node.

If you are on Windows, we recommend NVM for Windows.

  • Install gulp & yarn globally using:

    npm install gulp -g
    npm install yarn -g

From here, choose one of the following approaches: develop based on our supplied 'Starting Point', or start from scratch.

note

The Starting Point deck includes a library of components and supporting documentation developed in-house to assist in content development. We highly recommend this path for the fastest start with LivePreso best practice.

Starting Point deck​

The 'Starting Point' deck is the fastest way to get set up for developing LivePreso content.

This deck includes a number of components that our content developers use across the majority of our decks. These components range from simple helper functions, to form elements and wrappers integrated with LivePreso's Bridge interface - allowing for a more state-based approach to content development. To help you get acquainted, we have included several slides within the deck documenting this functionality.


Download the Starting Point deck:

note

The Starting Point deck has been supplied at the default deck dimensions of 16:9 (1920px x 1080px). If you require a 4:3 version, please contact your LivePreso content development trainer.

Download includes:

  • Basic deck structure
  • Deck-specific documentation
  • Library of commonly used JS components
  • Copy of AMCharts licensed for LivePreso development

Deck-specific docs:

Setting up the deck​

You'll find deck-gulp-tasks has already been included, with the gulpfile.js and package.json files ready to go. From here you'll want to:

  • Add your details to the package.json file
  • Update the deck's project.yaml file with:
    • Deck name
    • Deck key
    • Active servers
    • Maintainer email address
  • Run yarn to build the node_modules
  • Run gulp to compile the dist directories and set up a watcher for deck changes
  • Boot up the Developer CDK
  • Browse to your deck's project.yaml file and select it

You're now ready to go!

info

Windows users:

We include Husky in the starting point deck's package.json for the purpose of running tests, prettify etc. across staged work before it can be committed. If you encounter any trouble with Husky, please first ensure you have Visual Studio Build Tools and Visual C++ Build Tools installed before reaching out.

As deck-gulp-tasks is currently using an older version of node, you may need this Window build tools package to assist in the installation.

Starting from scratch​

  • Create a new folder for your deck. Generate a new package.json file by running: yarn init. Follow the prompts.

  • Install deck gulp tasks by running: yarn add gulp @salespreso/deck-gulp-tasks

  • Create a file called gulpfile.js. Paste inside the following:

    var gulp = require("gulp");
    var deckGulpTasks = require("@salespreso/deck-gulp-tasks");

    deckGulpTasks(gulp, {
    	src: "src/",
    	dist: "dist/",
    	excludes: ["sections/**/*.js"],
    	notifications: {
    		error: true,
    		success: true,
    		sounds: true,
    	},
    });

You're now ready to start creating content!