{"id":31904013,"url":"https://github.com/bryantson/copilot-simple-command-execution-webapp","last_synced_at":"2026-02-15T21:33:02.901Z","repository":{"id":301840617,"uuid":"1010421097","full_name":"bryantson/copilot-simple-command-execution-webapp","owner":"bryantson","description":"Made for my Udemy course titled \"GitHub Copilot - The Complete Guide learning from an expert. See the link below. GitHub Copilot tutorial that demonstrates a simple web app console creation.","archived":false,"fork":false,"pushed_at":"2025-06-30T15:02:06.000Z","size":4359,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-13T13:45:55.431Z","etag":null,"topics":["copilot-tutorial","github","githubcopilot","javascript","learning","nodejs","tutorial","webdevelopment"],"latest_commit_sha":null,"homepage":"https://www.udemy.com/course/draft/6134731/?referralCode=D40712FA3268AEE04F56","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bryantson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-29T03:14:08.000Z","updated_at":"2025-06-30T15:06:31.000Z","dependencies_parsed_at":"2025-06-29T06:47:27.084Z","dependency_job_id":null,"html_url":"https://github.com/bryantson/copilot-simple-command-execution-webapp","commit_stats":null,"previous_names":["bryantson/copilot-simple-command-execution-webapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bryantson/copilot-simple-command-execution-webapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantson%2Fcopilot-simple-command-execution-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantson%2Fcopilot-simple-command-execution-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantson%2Fcopilot-simple-command-execution-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantson%2Fcopilot-simple-command-execution-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryantson","download_url":"https://codeload.github.com/bryantson/copilot-simple-command-execution-webapp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantson%2Fcopilot-simple-command-execution-webapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29490310,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["copilot-tutorial","github","githubcopilot","javascript","learning","nodejs","tutorial","webdevelopment"],"created_at":"2025-10-13T13:45:53.617Z","updated_at":"2026-02-15T21:33:02.868Z","avatar_url":"https://github.com/bryantson.png","language":null,"readme":"# GitHub Copilot tutorial - Simple console webapp\n\n![Javascript Cover page](images/javascript_cover.jpeg)\n\nThis tutorial was made for my Udemy course titled [**GitHub Copilot - The Complete Guide learning from an expert**\n](https://www.udemy.com/course/draft/6134731/?referralCode=D40712FA3268AEE04F56). Please enroll for a full learning experience.\n\nThis shows a simple GitHub Copilot tutorial for building a simple web application using Node.js and Express. \n\nThis is a simple NodeJS application that executes shell commands in a browser using **Github Copilot**. Please follow instructions below to build and run the application. This demo will primarily drive using **Github Copilot Chat** to build the application. It is possible to use other Interative Development Editor (IDEs) that support GitHub Copilot and GitHub Copilot Chat, but it is easier to follow and better experience to use VS Code.\n\n## Prerequisites\n\n- [NodeJS](https://nodejs.org/en/download/) with NPM installed. NodeJS version should not matter as there, but NodeJS version I tested was `v20.8.0` and NPM version was `10.1.0`\n- GitHub Account with proper GitHub license with GitHub Chat enabled\n- [VS Code](https://code.visualstudio.com/download) installed\n- GitHub Copilot extension installed in VS Code\n- GitHub Copilot Chat extension installed in VS Code\n\n## Step-by-step guides\n\nPlease follow the instruction below.\n\n### Step 1: Make sure that all prerequisites are met\n\nMake sure that you met all prerequisites are met :) \n\n### Step 2: Open Visual Studio Code with GitHub Copilot Chat\n\nOpen Visual Studio Code and also your GitHub Copilot Chat. You can open GitHub Copilot Chat by clicking on the GitHub Copilot Chat icon on the left side of VS Code. If you do not see the icon, you can open it by clicking on the `View` menu, then `Command Palette...`, then type `GitHub Copilot Chat` and select it.\n\n![GitHub Copilot Chat](./images/0_CopilotChatOpen.jpg)\n\n### Step 3: Starting with a NodeJS project\n\nLet's start with a very simple step to create a NodeJS project. Open your GitHub Copilot Chat and type this command:\n\n`Can you help to create a NodeJS project that can run shell command and display result in a web page?`\n\n![Ask Copilot for starting a project](./images/1_AskCopilotStep1.jpg)\n\n![Ask Copilot for starting a project - Part 2](./images/2_AskCopilotStep1_2.jpg)\n\nBecause GitHub Copilot is very generative in nature, it is not always likely that you will get a same instructions. But you will get something similar to this:\n\n```javascript\n// server.js\nconst express = require('express');\nconst { exec } = require('child_process');\nconst socketIo = require('socket.io');\nconst http = require('http');\n\nconst app = express();\nconst server = http.createServer(app);\nconst io = socketIo(server);\n\napp.use(express.static('public'));\n\nio.on('connection', (socket) =\u003e {\n  socket.on('runCmd', (cmd) =\u003e {\n    exec(cmd, (error, stdout, stderr) =\u003e {\n      if (error) {\n        socket.emit('output', `error: ${error.message}`);\n        return;\n      }\n      if (stderr) {\n        socket.emit('output', `stderr: ${stderr}`);\n        return;\n      }\n      socket.emit('output', `stdout: ${stdout}`);\n    });\n  });\n});\n\nserver.listen(3000, () =\u003e console.log('Server is running on port 3000'));\n```\n\n```html\n\u003c!-- public/index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eRun Shell Commands\u003c/title\u003e\n  \u003cscript src=\"/socket.io/socket.io.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cform id=\"form\"\u003e\n    \u003cinput id=\"cmd\" type=\"text\" placeholder=\"Enter command\"\u003e\n    \u003cbutton type=\"submit\"\u003eRun\u003c/button\u003e\n  \u003c/form\u003e\n  \u003cpre id=\"output\"\u003e\u003c/pre\u003e\n\n  \u003cscript\u003e\n    const socket = io();\n    document.getElementById('form').addEventListener('submit', function (e) {\n      e.preventDefault();\n      const cmd = document.getElementById('cmd').value;\n      socket.emit('runCmd', cmd);\n    });\n    socket.on('output', function (data) {\n      document.getElementById('output').textContent = data;\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n![Ask Copilot for starting a project - Part 3](./images/3_AskCopilotStep1_3.jpg)\n\nBut how can you use these codes without just copying and pasting it? Luckily, there is a feature in GitHub Copilot that makes it easy to use the code without manual copy-and-paste. Hover over the code, and a new popup will appear. There are different options, but you can click triple dots icon on far right to discover `Insert Into New File` option. It will create a new file, then you can save that file.\n\n![Insert as a new file](./images/4_InsertNewFile.jpg)\n\nNow, follow the instruction to run the commands and open your browser with appropriate port.\n\n![Check the website](./images/5_ResultFromStep1.jpg)\n\n### Step 4: Decorating with Bootstrap\n\nOur website looks alright, but it looks little too plain. We can add Bootstrap framework to make it look better. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`Great. How can I use Bootstrap to make the interface prettier?`\n\nGitHub Copilot again will generate instructions to your HTML, which may look like below:\n\n![Ask Copilot for Bootstrap](./images/6_AskCopilotStep2.jpg)\n\nNotice one thing? It references a file called `server.js`, which is a file that Copilot references to understand. \n\n\u003e TIP: Chat does not currently use neighboring tabs in normal chat mode. In certain slash commands it will pull in additional context, regardless of if the files are open.\n\nYour updated `index.html` might look like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eRun Shell Commands\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\"\u003e\n  \u003cscript src=\"/socket.io/socket.io.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody class=\"container py-5\"\u003e\n  \u003cform id=\"form\" class=\"form-inline mb-3\"\u003e\n    \u003cinput id=\"cmd\" type=\"text\" class=\"form-control mr-2\" placeholder=\"Enter command\"\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eRun\u003c/button\u003e\n  \u003c/form\u003e\n  \u003cpre id=\"output\" class=\"border p-3\"\u003e\u003c/pre\u003e\n\n  \u003cscript\u003e\n    const socket = io();\n    document.getElementById('form').addEventListener('submit', function (e) {\n      e.preventDefault();\n      const cmd = document.getElementById('cmd').value;\n      socket.emit('runCmd', cmd);\n    });\n    socket.on('output', function (data) {\n      document.getElementById('output').textContent = data;\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can leverage a previous feature where you did insert code into a new file. But this time, select one with a right arrow pointing to two squares. That can replace the contents for highlighted codes.\n\nRefresh your website and check agian. It should look better now.\n\n![Updated website with Bootstrap](./images/7_Boostrap.jpg)\n\n### Step 5: Adding a navigation bar\n\nAfter adding Bootstrap library, our website looks slightly better. But we can still appreciate more visual eye-candy by maybe including a navigation bar. This can also make our website more open to extension later on. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`What if I want to include some navigation bar?`\n\n![Ask Copilot for navigation bar](./images/8_NavigationBar.jpg)\n\nOops. It looks like GitHub Copilot is not able to help us with this because it uses public code. If your GitHub account is under an organization, it is possible that the organization administrator blocked public code access. You can still copy and paste portion of it, but it prevents getting all parts of codes.\n\n![Website after adding navigation bar](./images/9_NavBarWebsite.jpg)\n\n### Step 6: Adding a history view\n\nOur website looks better now, but it is still not very useful. It would be nice if we can see a history of commands that we ran. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`I want to create a view where it can remember all the commands I typed. How do I do that?`\n\nGitHub Copilot will generate a code that looks like this:\n\n![Ask Copilot for history view](./images/10_AskCopilotStep3_Step1.jpg)\n\n```html\n\u003c!-- Add this to your HTML --\u003e\n\u003cdiv id=\"history\" class=\"mt-5\"\u003e\n  \u003ch5\u003eCommand History:\u003c/h5\u003e\n  \u003cul id=\"historyList\" class=\"list-group\"\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n```javascript\n// Modify your JavaScript\nconst socket = io();\nconst cmdHistory = [];\n\ndocument.getElementById('form').addEventListener('submit', function (e) {\n  e.preventDefault();\n  const cmd = document.getElementById('cmd').value;\n  cmdHistory.push(cmd);\n  updateHistory();\n  socket.emit('runCmd', cmd);\n});\n\nsocket.on('output', function (data) {\n  document.getElementById('output').textContent = data;\n});\n\nfunction updateHistory() {\n  const historyList = document.getElementById('historyList');\n  historyList.innerHTML = '';\n  cmdHistory.forEach((cmd, i) =\u003e {\n    const li = document.createElement('li');\n    li.textContent = `${i + 1}: ${cmd}`;\n    li.className = 'list-group-item';\n    historyList.appendChild(li);\n  });\n}\n```\n\nRefresh the website again and check your code.\n\n![Website with history view](./images/11_WebsiteHistoryView.jpg)\n\n### Step 7: Adding a documentation page\n\nLet's say I want to push my code to GitHub repository so it can be updated later. For that, I need a `README.md` file. Let's ask this.\n\n`Can you help to create a README.md documentation that goes along with the project?`\n\n![Ask Copilot for README.md](./images/12_AskCopilotChat_Step4.jpg)\n\nYou can follow the instruction to create a new `README.md` page.\n\n### Step 8: Updating history view to make them executable upon click\n\nWe added a history view where it shows previous command that ran. But it would be nice if we can click on the command and run it again. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`Can you help to change the code so clicking any previous command as links will execute the commands?`\n\n![Ask Copilot for executable history view](./images/13_AskCopilot_Step5.jpg)\n\nGitHub Copilot will generate a Javascript code that updates our previous commands that may look like this.\n\n```javascript\nfunction updateHistory() {\n  const historyList = document.getElementById('historyList');\n  historyList.innerHTML = '';\n  cmdHistory.forEach((cmd, i) =\u003e {\n    const li = document.createElement('li');\n    li.className = 'list-group-item';\n    const a = document.createElement('a');\n    a.href = '#';\n    a.textContent = `${i + 1}: ${cmd}`;\n    a.addEventListener('click', function (e) {\n      e.preventDefault();\n      socket.emit('runCmd', cmd);\n    });\n    li.appendChild(a);\n    historyList.appendChild(li);\n  });\n}\n```\n\nPerfect. Let's refresh the website and check it out.\n\n![Website with executable history view](./images/14_WebsiteClickableLink.jpg)\n\n### Step 9: Making command output prettier using syntax highlighting\n\nWhenever our command result gets printed out, it is pretty boring as they are in black and white fonts. What if we want to make it prettier by adding some syntax highlight? Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`Whatever shown as the result in output are just plain black and white texts. Is it possible to show with some prettier syntax highlighting?`\n\n![Ask Copilot for syntax highlighting](./images/15_AskCopilot_Step6.jpg)\n\nThis will give updated results for two files: `index.html` and `server.js`\n\n```html\n\u003c!-- Add these to your HTML head --\u003e\n\u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-bash.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Modify your output pre tag --\u003e\n\u003cpre id=\"output\" class=\"border p-3\"\u003e\u003ccode id=\"outputCode\" class=\"language-bash\"\u003e\u003c/code\u003e\u003c/pre\u003e\n```\n\n```javascript\n// Modify your JavaScript\nsocket.on('output', function (data) {\n  document.getElementById('outputCode').textContent = data;\n  Prism.highlightAll();\n});\n```\n\nRefresh the website and check it out.\n\n![Website with syntax highlighting](./images/16_WebsiteHighlighting.jpg)\n\n### Step 10: Fixing the command history view\n\nSome commands like `tree` will give a really long output that pushes our command history hard to find. What we would like to do is to fix the command history view, so it can stay at the top of the page. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`Is it possible to modify the layout in such a way that the command history always stay fixed on a right side?`\n\n![Ask Copilot for fixed command history view](./images/17_AskCopilot_Step6.jpg)\n\nThis will give an updated HTML code block that looks like this:\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-8\"\u003e\n    \u003cform id=\"form\" class=\"form-inline mb-3\"\u003e\n      \u003cinput id=\"cmd\" type=\"text\" class=\"form-control mr-2\" placeholder=\"Enter command\"\u003e\n      \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eRun\u003c/button\u003e\n    \u003c/form\u003e\n    \u003cpre id=\"output\" class=\"border p-3\"\u003e\u003ccode id=\"outputCode\" class=\"language-bash\"\u003e\u003c/code\u003e\u003c/pre\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-4\"\u003e\n    \u003cdiv id=\"history\" class=\"mt-5 sticky-top\" style=\"top: 15px;\"\u003e\n      \u003ch5\u003eCommand History:\u003c/h5\u003e\n      \u003cul id=\"historyList\" class=\"list-group\"\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nRefresh the website and check it out.\n\n![Website with fixed command history view](./images/18_WebsiteFix.jpg)\n\n### Step 11: Fixing an error in input field\n\nWhen we run a command, the input field is not cleared, and it does quite work whenever we click command from command history view. It would be nice if we can clear the input field after running a command. Let's ask GitHub Copilot to help us with that. Open your GitHub Copilot Chat and type this command:\n\n`Field box text does not correctly clearly and update value whenever I click one from command history`\n\n![Ask Copilot for fixed input field](./images/19_AskCopilot_Step7.jpg)\n\nThis will give an updated Javascript code that looks like this:\n\n```javascript\na.addEventListener('click', function (e) {\n  e.preventDefault();\n  document.getElementById('cmd').value = cmd; // Update the input field\n  socket.emit('runCmd', cmd);\n});\n```\n\nRefresh the website and check it out, and we are done!\n\n![Website with fixed input field](./images/20_FinalResult.jpg)\n\n## Conclusion\n\nCongratulations! You have successfully built a simple web application that can execute shell commands using Node.js, Express, and GitHub Copilot. You have also learned how to use GitHub Copilot Chat to help you build the application step by step.\n\n# License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryantson%2Fcopilot-simple-command-execution-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryantson%2Fcopilot-simple-command-execution-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryantson%2Fcopilot-simple-command-execution-webapp/lists"}