Custom JavaScript Library with SpringBot

This article walks through custom JavaScript packages and how to add them to your project. Specifically, it will guide you through adding ThreeJS into your project.

SpringBot uses Angular as its client-side framework, which in turn makes use of NodeJS and NPM. Dependencies can be added to Angular project via package.json, which is a configuration file that informs NPM what and how to install packages from the NPM registry.

File name: package.json
Relative Path: clientside/package.json
Purpose: This file holds various metadata relevant to the project and dependency handling.

Implementation

Task: Add ThreeJS as a new custom package into your Angular project.

You will be required to interact with the following files to complete this task.

1. Open package.json located at clientside/package.json

2. Locate the following code block:

   "//": [
    " protected region % [Add custom development dependencies here] off begin "
   ],
   

3. Turn on the protected region by replacing off begin with on begin

4. Add these lines below the code block:

   "@minininja/threejs": "^1.0.5",
   "three.js": "^0.77.1",
   

These version numbers are the latest at the time of writing. Your versions may vary.

1. Your package.json should now look like this:

   ...
   "//": [
    " protected region % [Add custom development dependencies here] off begin "
   ],
   "@minininja/threejs": "^1.0.5",
   "three.js": "^0.77.1",
   ...
   

2. Open a new terminal and navigate to clientside.
3. Run npm install --no-save.
4. You are now able to use ThreeJS in your application code.

Warnings

There are a few things to be careful of when adding a new custom package:

• Running npm install <package name> can cause unexpected behaviour with protected regions, such as clearing them. Instead, add the package manually via the steps outlined in this article. This also applies to npm install --save-dev <package name>.
• Package versions as outlined in the package.json file are officially supported. Thus any modification to these versions may cause unexpected bugs or errors due to version or dependency conflicts. Instead, try updating your bot version to get the latest versions.
• Due to some limitations of the bot, protected regions in JSON files come in blocks instead of lines like other file types. As such, any modification must be made below the block as outlined in Step 4 of this article.

Video