{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/executing-markdown-codeblocks-with-github-actions","result":{"data":{"markdownRemark":{"excerpt":"Let's get started, so you might say what are we going to do? Let's break it down:- We are going to create a GithubAction which will extract…","html":"

Let's get started, so you might say what are we going to do? Let's break it down:-

\n

We are going to create a GithubAction which will extract the markdown codeblock\n(js) from the specified repo's issues and then execute the javascript and add a comment with the output.

\n

\n \n \n \n \n \n \n
GithubAction automatically executes the code
\n

\n

Setting Up

\n

Let's start simply by installing all the required dependencies first.

\n

Initialize NPM:

\n
npm init
\n

Installing dependencies:

\n\n

We are going to use @octokit/rest for fetching all the issues and for\ncommenting on the issues. octokit/rest provides a very nice wrapper around\nGithub's API.

\n
npm i @octokit/rest
\n

To parse the markdown and extract the codeblock we are also going to install\nmarkdown-parser.

\n
npm i markdown-parser
\n

Now maybe the most crucial package for this project, vm2.

\n

vm2 is a sandbox that can run untrusted code with whitelisted Node's built-in modules. Securely!

\n
\n

If you don't use vm2 then, someone could actually log your environment variables and get your access token and also execute any malicious code.

\n
\n
npm i vm2
\n

Okay! Now we have everything set up nicely, let's get started.

\n

Setting up environment variables

\n

To use Github's API to create comments and fetch the issues we are going to need a Personal Access Token\n(PERSONAL_TOKEN)

\n

Here's how you can\ncreate your Personal Access Token

\n
\n

You should not upload, share, or give Personal Access Tokens to anyone. Otherwise, someone could get access to your\nGitHub account.

\n
\n

Using personal access token in local development:

\n

For this, we are going to use dotenv

\n

In your root directory create a file called .env (without extension) and add this line to it with your personal token\nwhich you generated previously.

\n

After that, you should also create a\n.gitignore file so that your .env wont\nget uploaded in GitHub.

\n
PERSONAL_TOKEN=yourtoken123
\n

And then, in index.js file require the dotenv module.

\n
// index.js\nrequire('dotenv').config();
\n

You might say okay that would work in my local machine but how will GitHub know about my personal access token then?\nThe answer is GitHub secrets.

\n

To add a secret env variable to your GitHub repo go to your repo settings and you'll see a secrets tab like this and\nClick \"Add a new secret\".

\n

\n \n \n \n \n \n \n
Github, adding a new repo secret (click to enlarge)
\n

\n

After clicking \"Add a new secret\" add a name of the secret \"PERSONAL_TOKEN\" and in value field, add your token.

\n

\n \n \n \n \n \n \n
Github, adding a new repo secret 2 (click to enlarge)
\n

\n

Now we are all good to go, let's get started with the coding now.

\n

Let's Code Now

\n

In the index.js file, we are going to require all the necessary dependencies 1st

\n
// index.js\nconst Octokit = require('@octokit/rest');\nconst Parser = require('markdown-parser');\nconst { VM } = require('vm2');\n\nrequire('dotenv').config();
\n

Now let's also initialize VM2

\n
// index.js\n\n// initialize VM\nconst vm = new VM({\n  timeout: 1000,\n  sandbox: {},\n  eval: false,\n});
\n

To work with Octokit let's authorize our PERSONAL_TOKEN and initialize Octokit, and also let's initialize\nmarkdown-parser

\n
// index.js\n\n// initialize markdown-parser\nconst parser = new Parser();\n\n// initialize octokit\nconst octokit = new Octokit({\n  auth: process.env.PERSONAL_TOKEN,\n});
\n

Octokit

\n

Listing all the issues in the repo:

\n

To get all the issues of our repo, we are going to use octokit's API to fetch them.

\n

You may have noticed we also used an async function to make things nice and\nclean.

\n
// index.js\n\n// get data\n(async () => {\n  const { data: issuesRes } = await octokit.issues.listForRepo({\n    owner: 'username',\n    repo: 'my-awesome-repo',\n  });\n\n  console.log(issuesRes); // all issues\n})();
\n

Now we need to loop through all the issues and parse the markdown to find the markdown codeblock and use vm.run() to run the codeblock.

\n
// index.js\n\n// get data\n(async () => {\n  const { data: issuesRes } = await octokit.issues.listForRepo({\n    owner: 'username',\n    repo: 'my-awesome-repo',\n  });\n\n  // loop thought all the issues NOTE: PR are also considered as issues\n  issuesRes.forEach((issue, index) => {\n    let issueNumber = issue.number;\n    let issueBody = issue.body;\n\n    // parse markdown\n    parser.parse(issueBody, function(err, result) {\n      if (err) throw new Error(err);\n\n      // we got the codeblock from the issue\n      let code = result.codes[0].code.replace(/\\n,/gim, '');\n\n      // running the codeblock with vm.run()\n      let res = vm.run(`${consoleOverwriteScript}\\n${code}`)\n      \n      console.log(res);\n    });\n  });\n  \n})();
\n

Almost done! Bare with me.

\n

Creating Comments

\n

Now lastly, we need to create the comment with octokit's api, and we are all set.

\n
// index.js\n\n// outside the async function add a new this new function\nasync function createComment(msg, issueNumber) {\n  await octokit.issues.createComment({\n    owner: 'username',\n    repo: 'my-awesome-repo',\n    issue_number: issueNumber,\n    body: `**Code executed [bot]:**\\n\\n\\`\\`\\`bash\\n${JSON.stringify(msg)}\\n\\`\\`\\``\n  })\n}
\n

createComment function will take the msg (outputted result of the code) and an issueNumber so it can comment on the right issue.

\n

Let's continue with our code and finish it.

\n
// index.js\n\n// inside async function\n...\n    // parse markdown\n    parser.parse(issueBody, function (err, result) {\n      if (err) throw new Error(err);\n      // vm is acting weirdly when setting console log twice\n      if (index > 0) consoleOverwriteScript = '';\n\n      let code = result.codes[0].code.replace(/\\n,/igm, '');\n      let res = vm.run(`${consoleOverwriteScript}\\n${code}`)\n\n      createComment(res, issueNumber);\n    })\n...
\n

Now you might notice a new variable called consoleOverwriteScript, it's kinda weird, and you should not do this in production apps.

\n

What it does is, it will overwrite the native console.log functionality so it can also return the value it logged. see how it looks

\n
// index.js\n\n// DONT DO THIS\nlet consoleOverwriteScript = `\nconsole.oldLog = console.log;\nconsole.log = function (value) {\n  console.oldLog(value);\n  return value;\n};\n`
\n

I hope you understand what I'm doing here, and I know it's rather funky.

\n

Now we are all good to go. If you run node index.js, you should see it working locally.

\n

Github Actions

\n

Setting up Github Actions is relatively simple at this point because we already did everything else.

\n

So let's jump right into it.

\n

create a new folder in your root dir called .github and inside that create another directory called workflows

\n

(just copy-paste this whole yml)

\n
# .github/workflows/code.yml\n\n# name of the action\nname: ExecuteCodeBlock\n\n# whenever a new issue is opened, edited, closed run this action\non:\n  issues:\n    types: [opened, edited, deleted, closed, reopened, labeled, unlabeled]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    # checkout\n    steps:\n      - uses: actions/checkout@v1\n\n      - name: setup node\n        uses: actions/setup-node@v1\n        with:\n          node-version: \"10.x\"\n\n      # setup cache\n      - name: Cache node modules\n        uses: actions/cache@v1\n        with:\n          path: node_modules\n          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      \n      # run our nodejs code\n      - name: Run Code\n        run: |\n          npm i\n          node index.js\n        env:\n          CI: true\n          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }} # we already created this PERSONAL_TOKEN
\n

YES! We are done, now push everything to GitHub and see the magic happen.

\n

Whenever a new issue is opened, edited, closed, this action will run and comment down the output of the codeblock.

\n
\n

here are a list of all events that GithubActions supports

\n
\n

\n \n \n \n

Hopefully, this post was helpful to you, and you learned something about \"Github actions\". Now i encourage you also to create your own Action and have fun with it. Tinker with things and also octokit's API to see what cool stuff you can also make. and if you created anything cool, don't hesitate to share it with me.

\n
\n

NOTE: I disabled GitHub action on this repo, so someone cleaver than me doesn't exploit anything.

\n

See Full Code on GitHub

\n

Useful resources:-

\n","timeToRead":7,"id":"468c005c-ab3a-5488-b302-7c71ca142088","frontmatter":{"date":"November 11, 2019","title":"Executing Markdown Codeblocks With Github Actions"}}},"pageContext":{"slug":"/blog/executing-markdown-codeblocks-with-github-actions"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}