ivx-story-template v0.0.3

iVX Story Template

In an effort to make and update story experience more effectient, this Story template will help set up and build the necessary components to make creating an experience easier. This template uses gulp for its local build and run environment which depends on nodejs.

##Table of Contents

• Dependencies
• Default Support
• Initializing Project
• Project Structure
  • Initial Project Structure
  • New Story Project Structure
  • Convert Story Project Structure
• Project Specific Commands
  • Importing/Converting a Story
• Running the Dev Build
• Generating Final Build

Dependencies

• nodejs
• gulpjs

  To install gulp using npm: sudo npm install -g gulp

Default Support

• Template Engines * mustache

• CSS Preprocessors * less

Initializing Project

Before running any commands to set up this project make sure of the following:

1. All dependancies are installed
2. All node modules in the package.json file are install

   Run npm install in the root directory

Project Structure

Initial Project Structure

• gulptasks - All gulp tasks and configurations for this project config - All config files for this project tasks - All gulp tasks for this project * util - Utility classes for this project such as parsers, filters, etc.

• node_modules - All node modules

• gulpfile.js - Runs all tasks in this project

• package.json - npm package.json file

New Story Project Structure

Running the command gulp ivx-set-dev --project new or gulp ivx-set-dev the new story project structure will be as follows:

Along with the files in the initial project structure, new folders will be as follows:

• build - Holds the final build for this story

• deps - Contains any dependencies for this project including any that are required to run iVX * iVX - Any dependencies to run this iVX platform

• dev - Holds all dev version of this story

  	* __assets__ - _Audio, Images, or Videos for this story_
  		* __audio__ - _Audio files for this story_
  		* __images__ - _Image files for this story_
  		* __video__ - _Video files for this story_
  
  	* __css__ - _css Files for the dev version of this story_
  		* __lib__ - _External stylesheets for this story_
  		* __styles.css__ - _Main style sheet for this story_
  
  	* __js__ - _js files for the dev version of this story_
  		* __lib__ - _External js files for this story_
  		  > Anything in this file will not be appended to the build's `app.js` 
  		  > file So make sure you have either a CDN copy of these files 
  		  > or put them in the js folder
  		* __app.js__ - _Main js file for this story_
  
  	* __mobile__ - _All mobile versions for this project_

• docs - Contains any documents, schemas or notes about this project notes - Any notes, documents or material for this project schema - Any schemas for this story that were exported from the iVX Platform

• edge-projects - Contains all source code for Edge Animate projects

• views - Holds all views and template files for this project html - Holds all html files for this story mustache - Holds all mustache files for this story

Convert Story Project Structure

Running the command gulp ivx-set-dev --project convert will create the same project structure as "new" but with this file added to the directory

• old-version - Contains previous version of this story running on the older platform desktop - Source files for this older desktop version of this story mobile - Source files for this older mobile version of this story

Project Specific Commands

Importing/Converting a Story

After running gulp ivx-set-dev --project convert and the file directory is made, you can begin setting up this project for importing older stories to the newest platform by following instructions below:

1. Put all older desktop and mobile versions in their respecive folders in the old-version folder.
2. Change the project-name in package.json to the name of this story as it appears in bit-bucket or version control currently used.

3. Edit the import-dev-data.js file in the gulptasks/config folder to match the source files to their respective files in the current version.

   The comments in the file will help you put the right files in the right place

4. Run the command gulp ivx-convert

##Running the Dev Build

Once everything is set up, you can run the development build of this project by running the command: gulp

This will open a new window in your default browser. The project runs on http://localhost:3000 by default.

Everytime you run gulp the gulp plugin, browserSync will create a new window with that instance. Also, it syncs all running builds so if you interact with one, you interact with all which can cause multiple stories to play at once. Before restarting the run, make sure all old instances are closed.

##Generating Final Build ##

1. Configure the ivx-build-data.js config file in gulptasks/config
2. Run the command gulp ivx-build
3. To run this build locally, run the command gulp ivx-run-build