Creating a Library

When creating a series of projects you would sometimes want to reuse your code across different projects without duplicating it. By reusing the same code base, you can guarantee that changes / fixes to it are delivered to all projects that use this base code. In this tutorial we’ll explore how to do this by creating and using Eko Packages.

When do we want to do this?

Let’s say we have created custom UI (a set of buttons, timers, scoreboards, …) for the first episode of our series. We did this by checking out the project, and adding our custom code.

Now when we start working on the second project we want to use the same UI code from the first project. How would we do that? To explain we’ll follow a simple example. Let’s assume that our UI module looks something like this:

function MyButton(options) { }
function MyTimer(options) { }
function MyScoreBoard(options) { }

export { MyButton, MyTimer, MyScoreBoard };

We want to access the compononets in every project by writing:

import { MyButton } from 'my-ui-module';

So how do we do that?

This is a good time to mention that this tutorial assumes you already have a project checked out on your machine. If this isn’t the case you should probably perform the checkout tutorial first.

Creating Packages

So the first step is to create a package using the eko-cli. We’ll do this by running the following command, in some folder outside the project folder:

eko package create --name=my-ui-module

This will create an empty package on Eko’s Git Service, create a sub-folder called my-ui-module and download it there.

my-ui-module needs to be a unique name (meaning if someone already picked this name for their package - tough luck), and can only contain lowercase letters, numbers and hyphens (-).

Updating Packages

First we want to copy our UI code to the my-ui-module folder.
Now that we’ve updated our package with our UI code, we want to push this update to Eko’s Git Service so that it will be updated in projects that use it. We do this in the same way we push updates to our project - using git.

You can use any git client you want to perform git push, or run the following commands in the command line from the packages folder:

git add .
git commit -m "some commit message"
git push

Great! Now your package is updated on Eko. Let’s include it in our project

Developing and Testing

If we’re developing a package, we would probably want to use npm link, to link between the package folder and the project. In our case, this would mean running the following command inside the package directory, in this case in the my-ui-module folder:

npm link

Followed by running this command in the project folder:

npm link my-ui-module

npm link only works inside directories that are npm packages (those that contain a package.json). If your project folder is not yet an npm package, run npm init to make it so.

Using npm link ensures that whenever your package is updated in the package folder, that change will be reflected in the project folder.

Now that the project is linked to the package, we want to use the package in our code. Since your Eko Package is essentially an npm package, you can use it as if it were any other module imported from npm. For example:

import { MyButton } from 'my-ui-module'

While Eko Packages are installed using npm, they are not published in npm and are accessible only via Eko.

Adding Packages to Projects

Once the package is finished, we need to add it to the project in a way that will be reflected once the project is pushed to Eko’s Git Service. We’ll do this by running the command in the project folder:

eko studio add --package=my-ui-module

This will update the package.json file of the project with a link to the package url. If your project didn’t have a package.json yet, it will create one.

You’ll need to commit package.json so this change will take effect when the project is published in Eko Studio.

Now when you push the project with the updated package.json file, the package will be included when the project is previewed or published on Eko Studio.

Rate this page: X
Tell us more!