My Experience with GitHub copilot

Srini Raju — Sun, 14 Nov 2021 18:11:30 +0000

Last week, I got my access to GitHub copilot. I was slightly skeptical about how much will this be useful before I started to use it.

Today I had installed my vs-code extension and logged into the account. Then started working on my personal project. Spent most of my time on refactoring my code today. There were suggestions which I felt not great when I was doing the code refactoring.

Then I had to write a simple utility to get Socket URL and Graphql URL based on the hostname and protocol. If the host is localhost we have to point to a local backend server which is running on different port. This is a very common use-case. When I started to code this utility I was amazed by the amount of code that was generated by copilot. The attached image has code is what we(me and copilot) have come up.

Out of the the 24 lines of code in the file, 11 lines of code was auto generated by copilot. This is close to 50% of the code. I crossed the line numbers which were generated by copilot.

Though at times the code generation is slightly slower, But once the tool matures it would be of great help to programmers. I feel that this will help developers with their productivity and improve the quality of code.

Let us see how these AI for coding will shape the future of application development.

Angular Development on VS code and Docker using Remote Containers

Srini Raju — Sun, 13 Jun 2021 10:17:00 +0000

VS Code with Remote Containers extension will help us develop with in container. More details are here

I decided to try angular development using VS Code Docker containers. This is my Journey Hope it helps others.

prerequisite:

Docker
VS Code with Visual Studio Code Remote - Containers

Step 1: Create a New Project and Start in a container.

Start VS code in a brand new folder(say AngularOnRC). Open Command palette by pressing F1. Follow this naviation.

Select Remote-Containers: Add Development Container Configurations Files..
Select Nodejs & Typescript
Select node version as 16. This will add files in .devcontainer and the VS code will prompt to restart in Docker Container. Restart in docker container.(If you miss the prompt you use command Palette for the same)

Step 2: Initialize an Angular project.

Once the Project starts in Container(starting may take some time). Open the terminal and Run the following Commands.



npm install -g @angular/cli
ng new AngularOnRC --directory .

Choose the values of our preference for angular project.

Step 3: Run the Project

Run the angular project using the following command.



npm run start

This would prompt you to open in Browser. Now you can see you application Running.

This proves that basic angular project development works but the problem starts when we want to run unit tests.



npm run test

The issue is due to the fact that docker on which we are developing do not have chrome installed.

Step 4: Add chrome to Dockers

Add the following code to Docker file in .devcontainer



RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     && apt-get -y install --no-install-recommends chromium
ENV CHROME_BIN=/usr/bin/chromium

Now from command palette choose the rebuild container option this will rebuild docker by adding chrome.

Step 5: Change karma config.

In karma.conf.js file change browser config shown as below.

Old Code



browsers: ['Chrome'],

New Code



browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
  ChromeHeadlessNoSandbox: {
    base: "ChromeHeadless",
    flags: [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ]
  }
},

Now tests should run as expected. So we are good to develop the application with Unit testing.

Find the git Repo

srinivasarajui / AngularOnRC

Waiting for your comments and feedback

DEV Community: Srini Raju