Project Structure

Now that you’ve checked out a project, you have a directory with your project’s code. Let’s get to know what’s there.

Entry Point

The entry point of projects is src/js/app.js, which upon creation will look something like this:

import playerOptions from '../config/playerOptions.json';

export default {
    onLoad: function(ctx) { },
    onInit: function(player, ctx) { },
    playerOptions
};

Its onInit hook will be called by Eko’s delivery platform once the player is ready.

Note that it also imports playerOptions.json and exports it as part of the project. This file is used to specify custom configuration for the player. You can read more about it here.

You can edit the app.js file either in Eko Studio’s code panel or directly in your development environment. Local edits to app.js that are pushed to your project’s repo will be reflected in Eko Studio Code Panel upon reload. Edits made to the Code Panel and pushed in Eko Studio will overwrite your local edits to app.js (but will be in your git history for easy reversions).

You can also define your head node based on some logic in app.js, see dynamic head node.

Projects are built using webpack, thus their structure must conform to the ES6 Modules specification; all files must be imported via the import statement.

src/js/

The src/js directory contains your code. This is where the JavaScript modules you write should be saved. You can organize your code in any subdirectories structure under the src/js directory.
For example, js/subdir1/subdir2/myModule.js might look like this:

function doSomethingPublic() {
    // ...
}
function doSomethingPrivate() {
    // ...
}

export default {
    doSomethingPublic
};

Later, it is imported in src/js/app.js as you’d do with any JavaScript project:

import myModule from 'js/subdir1/subdir2/myModule';

export default function onInit(player, ctx) {
    myModule.doSomethingPublic();
};

src/templates/

Under templates you will find the embed.html file - this is the entry point of the project’s page and is what is embedded in the Eko environment. You can modify it if necessary, but make sure not to remove its existing content (the HTML partials ekoHead inside the <head> tag and ekoBody inside the <body> tag).

src/_eko_/

The _eko_/ directory contains auto-generated files created by Eko Studio.

Do not edit files in the _eko_ directory. Changes made to files in this directory will be overriden by Eko Studio.

Rate this page: X
Tell us more!