Skip to main content

Use a library providing Olympe bricks

Once you have created a library of bricks, you will want to import it within another project. We will also see how to develop both the library and the project in parallel.

Use a library in a "consumer" project#

Initiate your "consumer" project#

Create a project named Consumer using the previously used Olympe Yeoman project-generator. In the process, your project gets installed (npm i). Here we assume that your project will be a consumer of the local String Utils library.

Using a locally linked library#

To link your Consumer project with the library string-utils, first make sure that the later is available for linking in your globals. That is, run this command

npm list -g --depth=0

or even more explicitly

npm list -g string-utils

If the library is correctly linked, npm should display where the links points to. Make sure it points onto a dist directory and not onto the root repository of the library.

Then, make sure that your current directory is the root of Consumer and type

npm link string-utils

Important: if you are already using one or more linked libraries, you must provide the full list of all the libraries you want to link, otherwise previously established links will be removed.

Then, open the package.json file and add as the first line of the dependencies section this line:


Do not forget the semicolon at the end of the line.

Important: you have to perform this last operation manually. Hence, the olympe dependency system requires your library to be listed in the package.json. However, adding it using npm add or npm install might overwrite your link. If you have to re-install your dependencies or update the list, then remove your manually added lines, perform any npm i operations, then add your linked dependencies back.

Finally, to formally include your library into your Consumer project, run

npm run postadd

During this last operation, you'll be prompted for

  • a snapshot: it is highly recommended to perform it to avoid losing possible changes made in DRAW in your Consumer project.
  • a reset: Here as well, it is recommended to perform it, since it is the only way to ensure that the most recent version of the library is included in the consumer project. In particular, it is the only way to make newly introduced bricks visible in DRAW. On that, when performing this reset, you should see in the logs that the patches of the library have been loaded (in the following image, the patches of the library "String Lib Examples" have been loaded) resetLog

Once these operations over, type the usual

npm run serve

which will "serve" DRAW on localhost:8888.

Use your library bricks in the consumer project#

When opening or reloading DRAW, you will see that both the library and the project are available on the data cloud. If not, try to reload the page.


From now on, you can use in the consumer project function String Spacer provided by the library. The first time you use a brick provided by a specific library, DRAW will ask you to confirm that you actually want to make this library a dependency of the consumer project. You can see the dependencies of the project in the Dependencies tab at the project root in DRAW.

drawImportDependency drawProjectDependency

Work on the two projects in parallel#

It is possible to work on the two projects in parallel. The only requirement is on the library side, which must be re-built after every modification with the command

npm run build:lib

Important: it is key to understand that even if you run the npm run serve command inside the Consumer project, you can absolutely modify the String Utils project in DRAW. However, when you perform a npm run snapshot in the Consumer root repo, you will snapshot the consumer project only. Therefore, always think twice before instructing the tool to perform a reset, be it withing the npm run postadd or via the npm run reset command.