lmarquitan edited this page Jul 13, 2017 · 8 revisions


  1. A current version of Node.js is required to be installed.

  2. You can fetch the cto-sources like this:

    git clone

The project contains the code of the new cto (/_ctoApps) as well as all sources from the old cryptool-online (/_ctoLegacy) that can be used as a reference.


In /_ctoApps you can find i.a. the folders for groups of plugins like Vigenère-based ciphers or codings (it makes sense to put associated code in a seperate group as different plugins can make use of the same modules this way).

Each of the seperate folders contains the file 'package.json' that specifies the needed depenencies. Navigate to the folder you want to work in (e.g. /_ctoApps/codings) and use npm to get everything you need:

npm update

This step is mandatory for each folder you work in.

The actual build process can be done with gulp. It will gather all sources inside the folder and wrap them up into the files that eventually will be uploaded to the server. For a documentation on how to use Vue instead of gulp, please click here.

Run the following command in the same directory as before.


This will create a folder 'dist' which then contains the output files for each plugin. Inside 'dist' will also be two html-files for each plugin that can locally preview the look and the functionalities and that are recommended to use for testing.

Run this command after adding/changing the sources.


If you have completed all of the steps above you can check e.g. /_ctoApps/codings/dist/base64/web-en.html, which should lead to the raw plugin for base64 encoding.

Preparations for new plugins

The best way of adding new plugins is to copy existing directories, delete unnecessary files and adjust the main components. The most extensive base structure is found inside /_ctoApps/vigenere. Copying this folder and giving it a suitable group name is recommended.

Remember that 'npm update' needs to be run in every folder created parallel to /_ctoApps/vigenere.

Now you can prepare the directory for further use:

  1. Navigate to /_ctoApps/*groupname*/src and delete every folder inside but /common, /test and /vigenere. Rename /vigenere to the name of the plugin you want to implement.

  2. Navigate to /_ctoApps/*groupname*/src and delete every .js-file but alphabets.js, base.js, crypt.js, t_crypt.js and vigenere.js.

  3. Replace every single occurance of "vigenere" with the name of the plugin you want to implement (filenames as well; check every file!).

This should prepare the sources well enough that running "gulp" in /_ctoApps/*groupname* will create the 'dist' folder.

Opening the file /_ctoApps/*groupname*/dist/*pluginname*/web-en.html should lead to a working imlementation that behaves like the vigenere plugin.

Next step

If everything worked as expected you can move on to implementing the new plugin by making adjustments at the right places. Take a look at adding plugins using gulp.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.