Up next in 10
Can GitHub Copilot Really Code a Full App in Visual Studio Code ? I Tried It – Here’s What Happened!
Jul 16, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to get
0:03
started with the GitHub copilot and I
0:06
will basically build out a complete web
0:09
app from scratch using GitHub copilot
0:12
automatically inside VS code and also we
0:15
will look at how to run that application
0:17
automatically and uh also deploy that
0:20
application as well. So this will be a
0:21
complete tutorial. So as you can see
0:24
inside the latest version of uh VS code
0:27
GitHub copilot comes pre-installed
0:31
but still if you are not seeing this
0:33
icon inside GitHub in this VS code you
0:36
need to go to extensions and just type
0:39
for this extension GitHub copilot.
0:42
So by mistake you have disabled this
0:45
extension. So in my case I disabled
0:47
this. So if you have disabled this
0:49
simply click on enable. So inside your
0:53
VS code it comes
0:56
pre-installed and now you will see this
0:58
icon is showing here.
1:02
So as you can see here this icon this is
1:06
the GitHub copilot icon that is showing
1:09
and by mistake if you disable this
1:11
GitHub copilot there is a setting by
1:13
which you can disable this. So if you
1:16
have disabled this you need to go to
1:18
this settings option and right here just
1:20
search for co-pilot and this setting
1:23
will come right here and uh by default
1:27
if you search copilot and this will come
1:30
right here. So if this is set to false
1:33
just change this from false to true and
1:36
click on okay. And now your GitHub
1:38
copilot is successfully enabled. So now
1:41
you can close this and simply tap on
1:43
this icon and as soon as you tap on the
1:46
icon you will see this GitHub copilot
1:47
chat and window will open and here you
1:50
can actually
1:53
ask copilot to create a any sort of
1:55
application. So inside this you need to
1:58
just write the prompt here. So I will
2:00
simply say that build a ReactJS app
2:04
to convert
2:06
images to PDF and also show
2:11
the live preview of the output PDF and
2:15
download button
2:17
and generate
2:20
all the files in the current directory
2:24
and also run the app as
2:30
in browser
2:32
and use wheat
2:34
for the project.
2:37
So basically I just written this prompt
2:40
here. It's a very simple prompt here
2:41
where we define what we need to do. So
2:43
we basically saying build a ReactJS app
2:46
to convert images to PDF and show the
2:48
live preview of the output PDF and a
2:50
download button and uh just run the app
2:53
as well. So
2:55
as soon as I enter it now you will see
2:58
it will actually scan everything which I
3:01
written and it will generate all the
3:06
uh directory structure of the project
3:08
here as you can see right here. And now
3:12
if you are happy then you click on this
3:14
button create workspace. So then it will
3:17
generate all the files. So here you just
3:19
need to select the parent folder inside
3:21
which you will generate the file. So
3:23
simply select the parent folder and now
3:26
it is creating all the files
3:28
automatically. You will see that one by
3:31
one it is creating all the files
3:33
automatically.
3:35
So you don't need to do any sort of
3:37
development. You basically write the
3:39
prompt and from the prompt you basically
3:42
generate a fullyfledged full stack
3:44
application inside react. So now you can
3:47
see it actually created all the code for
3:51
us all the components readym made it's
3:54
created
3:56
and you can see that this is your
4:01
app.tsx tsx file here.
4:07
And now we can simply tell that uh
4:09
please run this
4:12
app
4:14
and open
4:15
it in browser.
4:20
So now what we it will do I can't run
4:23
that directly but I can step you step by
4:26
step.
4:28
So for just running this application you
4:31
it's very simple. You go to the terminal
4:33
and manually run the project because
4:37
copilot at this moment of time can't run
4:40
the app. It basically give you the
4:42
command which is responsible. So we
4:44
simply say npm.
4:50
So npm run start. So this will start
4:53
your application I think in package.json
4:56
JSON file.
4:58
So this is our folder here. So we need
5:02
to go into the folder
5:07
CD image to
5:10
PDF app.
5:13
Sorry, just
5:16
right here in the terminal. We basically
5:18
open this right here and simply say npm
5:21
rundev.
5:25
I think we need to go into the folder
5:27
here which is image to pdf app and then
5:32
just run this command here npm rundef.
5:36
This will start the development server.
5:40
Uh for this you just need to install all
5:42
the packages here. So which are defined
5:45
in the so this will create this node
5:47
modules folder right here. So once it is
5:50
installed you simply say npm rundev. So
6:03
so you just say npmi
6:16
VG
6:21
slash
6:25
login J. just move to.
6:37
So now it basically starts this
6:39
application. You will see that
6:44
HTTP localhost 5173
7:06
It also generates this readme file as
7:08
well if you see which is necessary for
7:11
if you are deploying this application to
7:13
GitHub. It is automatically generates
7:15
all the files here. It's very simple
7:19
and you can even attach files as well.
7:22
So using all these models right here you
7:24
can see you can even use cloud model,
7:26
Gemini model, GPT all these models are
7:28
available to you. So you can switch to
7:31
claude model as well. So
7:34
you can just ask here build another
7:40
angular app which creates the same
7:45
requirements image to PDF.
7:51
So
8:02
as you can see it is generating all the
8:04
code for us. So in this easy way you can
8:07
basically generate a fully fledged app
8:10
using uh
8:12
uh GP this uh GitHub copilot.
8:18
You can just say create files for this
8:20
project
8:22
in my current directory.
8:36
So it's very easy. You basically enable
8:38
the extension inside inside the chat
8:40
window. This will generate all the code
8:43
for you which is necessary. you simply
8:46
write the prompt.
8:54
So in this easy way you can actually get
8:57
started with GitHub copilot and it is
9:00
totally free up to some limit if you
9:03
check their pricing. It comes within VS
9:06
Code. And uh if you check their pricing,
9:11
the free plan allows up to 2,000
9:15
completions per month. 50 agent mode or
9:17
chat request per month. So you can
9:19
basically chat up to 50 times per month.
9:22
After that, it will not work. And but
9:26
the pro plan starts with only $10 per
9:29
month. And here you get all the
9:31
unlimited agent mode. So you can have
9:33
unlimited uh request or chats with GPT
9:38
4.1. This is a model that it will use an
9:41
unlimited code completions access to
9:43
code review claude 3.74
9:48
6x more premium request like this.
9:55
So you can just see uh you can easily
9:58
get started with the GitHub copilot.
10:00
Also check out my website
10:02
freemediattools.com
10:04
uh which contains thousands of tools.
#Programming
#Software
#Development Tools