×
Back to book

C#Bot Custom JavaScript Library

This article walks through custom JavaScript packages and how to add them to your project.

This process is a temporary solution and will be improved in a future release. A future version of C#Bot will resolve this issue. Thank you for your patience.

This article walks through how to add custom JavaScript packages to your project. As an example, we'll be adding axios custom package to project.

You will be required to interact with the following file(s):

File Name Description
package.json This file contains dependencies that are used in the the project

Preface

C#Bot uses React as its client-side framework that makes use of NodeJS and NPM. React uses th package.json configuration file to help npm figure out what and how to install dependencies or packages from the NPM registry. Dependencies can be installed from the command line using npm install [package name], and the node packages manager will add them to React project's package.json. Alternatively, dependencies can first be added to the package.json manually and later install with npm install command.

Custom packages can be added to node modules by running npm install <package name> --save or npm install --save-dev <package name> in production and development environments respectively.

However, as this file is managed by the bot, any npm install ... commands will put new package entries outside of the protected regions, which will be deleted whenever the bot rewrites the project. As such, manual entry of the package is required to ensure that the packages are inside protected regions. The warnings section at the bottom of this article provides more detail.

package.json

Here we will add axios as a new custom package in our React project.

  1. Open package.json located at clientside/package.json
  2. Locate the following code block:
"//": [
    " protected region % [Add custom development dependencies here] off begin "
],
  1. Turn on the protected region by replacing off begin with on begin
  2. Add these lines below the code block:
"axios": "^0.19.0",

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] on begin "
],
"axios": "^0.19.0",
...
  1. Open a new terminal and navigate to clientside.
  2. Run npm install.
  3. You are now able to use 'axios' 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.