author-ide

Author IDE and Instruction Renderer

To start development

1. Create a .npmrc file from .npmrc.template. Replace <<YOUR_GH_PERSONAL_ACCESS_TOKEN>> with your github personal access token, configured with read package permissions. Make sure to allow SSO with ibm-skills-network. (This is required because author-ide uses the @ibm-skills-network/editor.md package which is not public, so you need authorization in order for npm install to install it)

2. Create a .env file from .env.template.

• Gitlab-related ENV variables (Note, we are going to connect to SN self-hosted giltab runnin on apps-staging cluster):
  • GITLAB_TOKEN can be found here under credential field.(Note this is an api token for SN self-hosted gitlab from staging)
  • Leave GITLAB_URL set to "https://author-gitlab.staging.skills.network/api/v4/" in order to point to the SN self-hosted gitlab from staging.
• Set PORT to 3002 in order to be inline with the default development settings of author-ide for other services like atlas and author-workbench.
• Leave SECRET blank.
• LABS_BASE_URL can be left blank. It should be set only if you need to test iframe communcations between author-ide and the labs ui locally (author-ide is iframed inside labs ui in a typical lab environment). You would have to run labs ui locally and set LABS_BASE_URL to the url of the locally running labs ui (usually http://monocle.localhost:5000)
• LABS_ACCESS_TOKEN can be found here. It needs to be set if you want to test the Test button inside author-ide(to make the Test button work, you also requires theLTI params to be set (see below))
• LTI params can be found here. Note, you're required to set the LTI params only if you want to test the Test button inside author-ide. Note, the LTI credentials provided are for the staging environment, so when a lab is loaded, the author-ide on the left will be from the staging environment and not your local environment.
• AWB_URL should be set to the url of the locally running AWB (usually http://localhost:3000)
• AWB_CLIENT_ID and AWB_CLIENT_SECRET should be generated in locally running AWB at http://localhost:3000/oauth/applications (requires admin role) and create a new application (just give it a name (something like Author IDE) and leave the other fields blank).
• AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, COS_REGION, IBM_COS_ENDPOINT, S3_BUCKET, and S3_BUCKET_PRIVATE can be found here

3. Add this code block to the config/settings/development.local.yml file in author-workbench:

author_ide:
  url: "http://localhost:3002"
  access_token: "<access token>"

where <access token> is generated and displayed as "Admin Token:" in the logs in step 4. after running npm start

author-ide requires author-workbench to be running in order to hit the edit endpoints with valid tokens.

4. Follow the commands below in your shell.

# Use the node version (v16.12.0) designated for this workspace
nvm install
# or
nvm use

# Install deps
npm install

# Start dev server (should hotload code changes)
npm start

You'll mostly be working with the edit/ and render/ endpoints. Read this to get started.

Building an Image

op run -- docker-compose build

Endpoints

• POST /token - Generate a token
• GET /edit?token=<token> - HTML edit page
• GET /render?token=<token> - HTML render page

Read this for more details on the endpoints.

Deployment

See https://wiki.skills.network/en/Team/Development/how-we-develop-services

There is a chance that any public file might be cached by akamai and this may cause errors. It's usually a good idea to purge the akamai cache after deploying a new Author IDE image so this issue doesn't occur.

Follow this guide for clearing the akamai cache and make sure to select the CP Code for skills-network-apps-production

Tokens

Ideally, you shouldn't be creating tokens manually. Author workbench and Labs UI are responsible for generating token for authors and learners.

{
  "atlas_token": <atlas token for a lab and its project>,
  "tool_type": <tool type>,
  "author": {
    "email": <user email>,
    "display_name": <user name>,
    "user_id": <user id>
  },
  "gitlab": {
    "id": <Gitlab project ID>,
    "filename": "<filename>"
  },
  "asset_library_prefix_url": "<asset library prefix url>"
}

e.g.

{
  "atlas_token": "eyJhbGciOiJIUzI1NiJ9.eyJwcm9qZWN0X2lkIjoiMTAyNTciLCJsYWJfaWQiOjk3Nzl9.TXZrPT3qCS5TWg2b9dySJYd0v26awxCS70lZTlj5y3E",
  "tool_type": "instructional-lab",
  "author": {
    "email": "[email protected]",
    "display_name": "Eugene Fedoriv",
    "user_id": 2
  },
  "gitlab": {
    "id": "39771753",
    "filename": "labs/eugene-asdlkasjd.md"
  },
  "asset_library_prefix_url": "https://cf-course-data-dev.s3.us.cloud-object-storage.appdomain.cloud/IBM-GPXX0AISEN",
  "admin": false,
  "iat": 1664382344,
  "exp": 1664468744
}