Introduction to Visual Studio Code

In 2015, Microsoft launched a code editor aimed at development of

web applications called Visual Studio Code, or simply VSCode. Announced
during Build, an event aimed at developers that takes place in the United States
annually, it is a lightweight and cross-platform tool that is available for both
for Windows, as well as for Mac OS and Linux, and caters to a huge range of projects, not
only [Link], as well as [Link]. Additionally, the editor has support for the syntax
in various languages like Python, Ruby, C++.
In addition to being completely free, also in the second half of the year of the launch, during
At the Connect() event, the editor was announced as open source, with its code made available.
on GitHub, what allows the technical community to contribute to its development and
facilitating the creation of extensions and new features.
We will see throughout the article the features offered by this tool, addressing
relevant points regarding the use of IntelliSense, refactoring, code debugging,
code versioning with Git, task automation with Gulp, among others
resources. To better understand the editor and observe the feasibility of its use in a
cross-platform development environment, we will work with an example using
[Link] 5, the latest version of the .NET web development framework, is
also supported on Mac OS and Linux, without dependency on Visual Studio.
In the end, we will see how to deploy the application on Microsoft Azure, completing everything.
a basic cycle of web application development, from its creation,
configuration, until its deployment on an external server.

Installing Visual Studio Code

The first step for us to use Visual Studio Code, or VS Code for
intimate, is to install it on our computer. VS Code is
multiplatform, able to be used from Windows, Mac, or Linux. In this article
we will see the installation of VS Code on Windows.

To download the latest version of VS Code, visit the official Visual Studio Code website and, soon
on the home screen, you will find a download button:
 Figure 1. Official site of Visual Studio Code
A new window will open and the download will start automatically:
 F
Figure 2. Visual Studio Code download started
When you click on the download tab, a window may open. Just click on 'Run':

Figure 3. Windows security confirmation

The next window will ask you to choose the language used by the installer. It doesn't exist yet.
translation of the installer into Portuguese, so we will keep it in English. Just click
in 'OK'.

Figure 4. Choose the installer language

A welcome window will be displayed. Just press the 'Next' button as in

any installation on Windows:

F
Figure 5. Welcome from the installer
The next window allows us to change the installation location of VS Code. We can leave the
default directory by clicking 'Next' again:
 Fi
gura 6. Choose the directory where VS Code will be installed
The installer will give the option to change the name of the VS Code executable icon. We can
leave it as 'Visual Studio Code' and click on 'Next':

F
Figure 7. Choose the name of the run icon in Visual Studio Code
The next step of the installation process will allow us to add VS Code to the variable
Windows path automatically, add it to the desktop among other options. We can
mark all options:

Figure 8. Installation options provided by Visual Studio Code

A summary of what will be installed will be displayed. Just click on 'Next':

Figure 9. Summary of the installation process

The installer will display a progress bar indicating that the installation is in progress.
completed. At the end of the loading, which may take a few seconds, a window will indicate
that the installation was successful and will ask if we want to run VS Code.
We can check the option and finally click on 'Finish' to complete the process:

Figure 10. Finalizing the installation and running VS Code

Ready! You have installed Visual Studio Code and are ready to proceed with the article.

First contact with the editor

Unlike what the name may suggest at first, VSCode is not
a version of Visual Studio, in its essence it is a code editor similar to
Sublime Text, Brackets, and Atom, with optimized functionalities for certain tasks.
The installation of the tool is quite simple, just download it from the official site (see
section Links) and run the [Link] file. For other platforms it should be
a package in zip format containing the files necessary for its execution has been downloaded.

In Figure 1, we can see the main environment of the tool, with some elements of
highlighted layout. On the left we have a toolbar with the options (from top
down): Explore, which displays or hides open files; Search, to perform searches
in the open files; Git, which facilitates making commits to the project's repository;
the Debug, where it is possible to analyze variables at runtime. On the right side we have
a welcome page where we find useful links about VSCode, such as tutorials and
extensions.
 Figure 1. Main screen of Visual Studio
open image in new window

Projects and files

With VSCode, it is possible to open both a single file and a complete folder, and it can
use the open files as a basis to dynamically offer options in IntelliSense,
as is the case with the JSON configuration files of [Link] 5 projects.
With a simplified and intuitive layout, the goal is to maximize the editor's area, seeking
leave more space for navigation and full access to the folder context or the
project. The user interface (UI) is divided into four main parts:
Editor: main area for editing files, where we can open up to three.
side by side editors;
Side Bar, whose content varies according to the action to be performed (explore
files, interact with Git, etc.)
Status Bar: indicates information about the open project and the files that are
edited;
View Bar, where we have the possibility to switch between the project's views and still have
the context indicators, such as the number of changes made, in case Git
be enabled.
An interesting feature in the editor is that it preserves the state of files, layouts and
pasta at the moment it is closed, which means that when the editor is
reopened, all items will be restored to their previous state.

Editors side by side

With the possibility of having up to three editors open side by side, we can open them from
following forms:
 Keep the Ctrl key pressed and then click on a file in Explorer;
Press the keys Ctrl + \, a shortcut that splits the active editor into two.
Right-click on the file in Explorer and then on
Option Open to the Side;
When we have more than one editor open, we can quickly switch between them.
just by pressing Ctrl + 1, 2 or 3.

Explorer
The Explorer is used for browsing, opening, and managing all files and
project folders. After opening a folder in VSCode, the content of the folder is
shown in the Explorer, where we can perform operations to create, remove or rename the
files, in addition to moving files and folders with the drag and drop function.

By right-clicking on files and folders in Explorer, we still have

some options that deserve mention, like Open in Command Prompt, which opens the
Windows command prompt in the project directory; the Reveal in Explorer, which opens the
file in Windows Explorer; and the Copy Path, which copies the file path to the clipboard
of transfer.
To navigate between the files, we can use the shortcuts Ctrl + Tab or Alt + Arrows.
lateral.

Working Files
When we view the Explorer, we have the sidebar divided into sections, with the first one being
from the Working Files, which contains a list of active files, that is, those that have been
recently opened in VSCode.
As we can see in Figure 2, just like in other editors, we can close the
individually (right marking) or all from the section using the Close All action
Files (left-aligned).

Figure 2. Options to close files

To save the files, we can use the shortcut Ctrl + S, common in various tools.
you still have the Save All button, located next to Close All. In addition, we can also
use the Auto Save option, which will save the changes made during
project without needing to save manually. To activate or deactivate this
functionality we have two paths. The first is to open the Command Palette (from the
menu View or pressing Ctrl_Shift+P) and typing 'auto,' which will list the option Files:
Enable/Disable Auto Save, and press Enter. The second way is by accessing the File menu.
click on the Auto Save option.

From the Explorer, it is also possible to perform quick searches on all files.
in the currently open folder. To do this, just use the shortcut keys Ctrl + Shift +
To access the Search option in the sidebar we saw in Figure 1. And then,
we must type what we need to find and press Enter. The results obtained from the
searches are then grouped into files containing the search term, with the indication
how many times the term is contained in each file and its location, as we see
in Figure 3.

F
Figure 3. Research results in the files
In addition to the simple search options, we can use the search for complete words or
still using regular expressions, options that are available in the typing bar of
searched term, as can be seen in Figure 3.

Command Palette
In order to use the Command Palette, we can press the shortcut keys Ctrl
+ Shift + P or access it through the View menu. With the command palette, it is possible to
change the editor theme, perform debugging settings, keyboard mapping,
execution of tasks, among other various common tasks. Figure 4 shows this palette
open and some commands already listed.
 F
Figure 4. Command Palette
Some keyboard shortcuts are quite useful for directly accessing certain functions.
specifics of the command palette, among which it is worth highlighting:

Ctrl + P: offers the option to navigate through any file in the project, just by typing
the term we wish;
F1: presents us with the editor commands;
Ctrl + Shift + O: allows us to navigate to a specific symbol (variable or
local function present in a file.
Ctrl + G: allows us to navigate to specific lines in a file.
In addition to the various commands we have seen so far, we can simply type the symbol
of the question mark (?) in the command palette and all available commands will be listed
to be executed.
We can still use the command palette to view error messages in the file.
it is enough to use the shortcut Ctrl + P and then type the exclamation mark (!),
You just use Ctrl + Shift + M. Figure 5 illustrates this functionality.
 Figure 5. File errors in the Command Palette
Visual Studio Code is a very comprehensive editor that supports a wide variety of
common tasks in application development (especially web), here we know
some of the main ones. In the following sections, we will see in practice how to use this
tool to develop an [Link] 5 project.

Interface theme
By default, the editor comes with the "dark" theme active, but this setting can be
altered of agreementwith a preference do user. Accessing o
menu File > Preferences > Color Theme or by typing Preferences: Color Theme in
The command palette allows changing the colors of the interface. Figure 6 shows some of the
available cores.
 Figure 6. Different themes of the editor interface
Environment settings
The main editor settings are stored in JSON files that can be
easily modified by the user to suit their preferences. Code snippets,
font size and type of the editor, keyboard shortcuts, among other details can be
accessed and modified from the File > Preferences menu, which contains various options
secondary, as illustrated in Figure 7.
 Figure 7. User preferences menu

When we access one of these menus, we see a helper file where we must insert the
new settings, which are applied automatically. For example, when we click
in Workspace Settings we are taken to the [Link] file, where we have the
IntelliSense support to change the editor settings. In Figure 8 we can see a
example of font modification and the options being listed automatically during the
typing.
 Fi
gura 8. Changing the editor settings

IntelliSense
With VSCode we have an excellent IntelliSense for JavaScript,
TypeScript is for C#. For us to see it in action, for example, we can
type Ctrl + Space and some options will be listed (Figure 9). This functionality is
very similar to what we have in Visual Studio and even includes Code Snippets, which
they act as shortcuts to generate code blocks from a simplified expression.

Fi
Figure 9. IntelliSense visualization
When hovering over an element, it will show the function signature or the type of
a variable, for example. For JavaScript, the editor indicates what the function signature or which
the variables that are available in the selected scope, and when we work with the
[Link], VSCode provides IntelliSense for all its modules.
When we want to use IntelliSense for JavaScript libraries or even for
[Link] modules, we can click on the light bulb that appears below the typed term and
add it to IntelliSense or even download the library definitions,
as shown in Figure 10.

Fi
gura 10. Adding type definitions from a new JavaScript library
With this, VSCode will download the definition file for AngularJS and for
they will add it to your project, referencing them in the file, so we will have
instantly the IntelliSense for AngularJS, so that when we type any
term of this library, it will be presented with the IntelliSense feature, as shown
Figure 11.

F
Figure 11. IntelliSense with AngularJS

References and code formatting

In order to find all the references of a given variable or function,
the editor shows us all the places where it is being used when we press Shift +
F12, as we can see in Figure 12. This feature is quite useful when we have the need
to refactor, for example, a function that is being used in several files.
 Figure 12. Locating all references to a variableopen image in new window

Changing all occurrences

If we wish to change the name of a variable or function, a typical action of the process of
refactoring, it is important to ensure that all occurrences of this term will be modified
in the project, keeping the code error-free. In VSCode this can be done easily if
we position the mouse cursor over the element we want to rename and
press Ctrl + F2 (to change in the same file) or just F2 (to change in)
all files). All occurrences will be selected (Figure 13) and then we can
enter the new name.
 F
Figure 13. Change of multiple occurrences

Code formatting
Many times we need to open files whose formatting is damaged and adjust each
manually line to maintain the aesthetics of the code. In this case, we can use the resource
from the automatic formatting of VSCode, simply selecting the block of code,
accessing the Command Palette and typing Format Code. In Figure 14, we can see a
section with incorrect formatting on the left and on the right the same block of code after being
formatted.

Figure 14. Code formatting resource

Debug
One of the main features of VSCode is the support for debugging.
C# and [Link] applications. For other languages, however, it is necessary to add
some extensions whose installation instructions can be found in
online documentation of the editor, the address of which can be found in the Links section.

By clicking on the debug symbol in the View Bar shown in Figure 1, we have the visualization of
all the relevant information regarding this action. So that we can carry out the debugging of the
In our application, we first need to configure the debug file, [Link],
which can be accessed from the icon with a gear in the top bar of the section
from the debug, as shown in Figure 15.

Figure 15. Debug configurations

After clicking this icon, we must select the debugging environment so that VSCode
generate a [Link] file. We can also select the C# Mono environment, in
meanwhile, this debug option is not yet available for Windows, working only
for applications developed on Linux or Mac OS. Debugging for [Link] works already.
on any of the mentioned operating systems.
After properly configuring the [Link] file, we can run the application
pressing the green arrow at the top of the debugging section or simply
by pressing F5, just like in Visual Studio.

Using Breakpoints
Breakpoints, just like in Microsoft's main IDE, can be added (or
removed) by clicking on the left margin of the editor, as we can see in Figure 16.
At this moment they are automatically listed in the debug bar, with the indication of the
file and the line where it is located.
 Figure 16. Adding breakpoints
When we right-click on one of the breakpoints in the bar
debugging we see a list of options (Figure 17) where we can enable, disable or
remove the breakpoints from the code.

Figure
ra 17. Debug options
Still at the top of the debug sidebar, we have the Open Console option, which can be
observed in Figure 15. The console, which is automatically arranged laterally to the editor
principal, allows debugging expressions that can be typed and interpreted during the
execution.

Code versioning
With VSCode, we have integrated version control support with Git, which allows for
use of the most common commands of this tool. When we make changes to the
application files will present colored indicators in the editor, informing the
locations where modifications were made. Red markings indicate that lines
that were removed, in blue indicate lines that were changed and the green color marks the
lines that have been added.
By clicking on the Git icon in the sidebar, you can see all the files that have been
altered. At this moment we can submit them remotely to the repository by making
a commit and also add additional messages about what was done. A
a very useful functionality regarding code versioning is that when
when we click on the file in the Git bar, VSCode shows us two versions of it
side by side, showing your current state compared to the previous state.
To implement version control, we will need to initialize a local repository for our
project under development (if this has not already been done) and then add the
recently modified files. To do this, just click the Initialize Git Repository button in the view
to Git, as shown in Figure 18.

Fig
ra 18. Git repository initialization button
Pressing this button will execute the command git init all files will be
automatically added to the repository, as shown in Figure 19. Note at the top,
as well as the Git icon in the sidebar, a number indicates the number of files
that were changed.
 Fi
gura 19. Files added to Git
Note also in this figure that when we hover the mouse over the files, next to them
two icons appear (highlighted in green) where we can discard your changes
(Clean, on the left) or add them to the commit that will be made (Stage, on the right). Clicking
In Stageo, the file is highlighted at the top, where we have the option to remove it from this condition.
(staged), as we see in Figure 20. In the CHANGES section we can perform the Clean and
To stage all the listed files, just hover over this item and the
the same icons will appear, now with the titles Clean All Stage All.
The staging option is important when we modify multiple files, however we want that
only some of them are added to the commit, keeping the others locally until
be ready to be sent to the central repository.
 Figure 20. Adding file to Stage
At the top of the bar, next to the title GIT, we have the Commit Staged option (icon with a)
check), if there are files in this state, or Commit All, which performs the commit of all
the files that were modified.
The last item at the top of the Git bar (with three dots) lists some of the most common commands.
used during version control, as we see in Figure 21. From it, we can
make or undo commits, perform push and pull, among other useful options in daily life,
avoiding the need to execute these commands via console.
 Figure 21. Additional Git commands
Finally, when we click on the name of the active branch at the moment, located in the status bar.
(lower left corner), we can check out another branch from the
command palette (Figure 22).

F
Figure 22. Checkout of a new branch from the command palette
Most of the commands related to Git can also be executed directly.
from the Command Palette, where we can type Git and see all the available options,
as illustrated in Figure 23.
 Figure 23. Git commands from the Command Palette

Creating an [Link] 5 application with VSCode

To develop the examples in this article we will need to install [Link] on the machine and the
Git, which will support some of the automation and package management tasks and
later project versions. We will create an [Link] 5 application here and carry out
your deployment on Microsoft Azure, thus exploring the version control features
do VSCode, as well as auxiliary services from Microsoft.
Then we need to install [Link] 5 and DNX (.NET Execution Environment), which is the
.NET runtime environment. This feature was developed from scratch with the intention of
provide an optimized development framework for deployed applications
both in the cloud and those executed locally. It is made up of components
modular with the minimum necessary overhead for us to maintain the
flexibility during the construction of our applications.
For this article, we will use the Windows 10 operating system and to carry out the
installation of DNVM (.NET Version Manager), another necessary component, we will open the
command prompt and we will execute the following:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{ $Branch='dev';iex

(new-object [Link]).DownloadString('[Link]
Home/dev/dnvminstall.ps1'))}
The result of this operation is the download of the DNVM script to the profile directory of
user, as shown in Figure 24. In the example environment of this article, there were already some of the
installed resources, due to this they were passed on (lines in yellow). Finally, it is
It is necessary to restart Windows for the settings to be finalized.
 Figure 24. DNVM Installation
After restarting Windows, we can open the command prompt to check
location of DNVM using the following command:
where dnvm
With the acquired DNVM, we will update it and install the DNX so that we can run the
applications. For this, we will use the following command:
dnvm upgrade
So that we can see the DNVM and also the active runtime, as shown in Figure 25,
we can type the following command in the prompt:
dnvm list
 Figure 25. Updated DNVM listing
In this figure we see a list containing several DNX runtimes, where we can choose from
use the latest. In this case, the latest is already marked as default.
From now on we have the main development environment installed, we can then
use scaffolding to create a new [Link] application. To do this we will use the
Node package manager (NPM – Node Package Manager) to install Yeoman,
what is a scaffolding tool for applications, such as Grunt, which is a
task runner for JavaScript, and finally Bower, which is the package manager for
client-side packages. To do this, we will use the command prompt as an administrator
to create the [Link] project, which we will leave in the default directory, and we will create the
directory called projetoDevMedia at the root of drive C:, where we will install the
Yeoman and the supporting tools using the following command:
npm install -g yo grunt-cli generator-aspnet bower
Next, we will create the project folders and the application using Yeoman with the
command:
yo aspnet
With this, Yeoman will list a series of application templates that it is capable of creating.
We must then select the project template that we will create, using the arrows to
mark the Web Application Basic [without Membership and Authorization] and finally
pressing Enter, as shown in Figure 26.
 Figure 26. Types of applications for creation with Yeoman
When the project starts, it will be necessary to give it a name, which in our
this will be the ProjetoBasicoDevMedia. When we press Enter, Yeoman will create a
new folder with this name and inside it the necessary files for our application.
At the end of the creation, Yeoman itself indicates which commands should be executed in the
sequence, as illustrated in Figure 27. We should then navigate into the created folder
using the command cd ProjetoBasicoDevMedia.

Figure 27. Accessing the created project folder

Following the suggested commands, we will now install the necessary NuGet packages for the
execution of the project from the following command:
dnu restore
After the installation of all packages has been completed, we will open VSCode again from
give the prompt with the following command:

code
In a few moments, VSCode will open containing all files for execution of the
project, as we can see in Figure 28.

Fig
ura 28. Project created with Yeoman
Now that we have the project created and configured, we will run it locally to see.
the result. This time, in the Command Palette of VSCode we will type the following command
to execute the project:
dnx: Run Command
When we type this command and press Enter, the next request will be the command
to open the project locally, as we can see in Figure 29. Once done, a prompt of
Commands will be presented, containing the files that will be opened and the address
localhost in which we will have to open the web project, as shown in Figure 30.

Fi
gura 29. Executing the project
 Fi
gura 30. Information about the running application

Accessing the addresswe will see the application running with the
standard content added when creating a new project.

Visual Studio Team Services

Git is a code versioning platform and for its full functionality requires
a service provider for storage to hold the files. For this we have
some options currently available, both paid and free, such as GitHub, BitBucket, and Visual
Studio Team Services. At this moment we will initially see the Visual Studio Team Service.
(VSTS), which allows the use of the free account by a maximum of five developers,
in addition to allowing the creation of any number of projects, it also provides us with
use of additional functions as tools for sprint planning, tasks and
Kanban boards, virtual team room, among other resources. In this article we will see how
to use VSTS and GitHub, as they are the most used in the context of environments of
Microsoft development.
For the features to be explored in this article, we will basically use VSTS.
your repository system with support for Git, that is, we will see that this tool can
to be used in conjunction with VSCode, addressing two of the main needs of the day
developer's day (especially web): the editing and versioning of projects.
In order to use VSTS, we need to create or activate our account on the page of
Visual Studio (Links section). When we access it with a Microsoft email account.
(Outlook, Hotmail, etc.) we can create new projects, which in addition to the code repository,
it allows controlling other actions throughout the entire application lifecycle. When we create
a project in VSTS, we can see that it supports two version control systems: the
Team Foundation Version Control and Git. We will use the latter.
Once we finish creating the project, we need to access our profile and then,
access the security tab to apply alternative authentication credentials.
This is necessary due to the fact that VSTS uses a Live ID for authentication.
unlike Git which does not make use of this feature. Therefore it is necessary to define a name for
username and password that will be used when sending code changes to the repository.
For this, we should click on our name that appears in the upper right corner of the page and
Then in My profile. Next, we should go to the Security tab and in Alternate
authentication credentials and define the data, as illustrated in Figure 31.
 Figure 31. Registration of alternative credentials
After this configuration is completed, we will still have one last step to be executed.
server side, where we will obtain the URL of the remote repository to use in Git
locally. This procedure can be carried out when we access the project in VSTS and
we will click on the CODE link, where we will copy the link contained in the Clone Url field, as
presented in Figure 32.
 Figure 32. URL used to connect to Git.
Now that we have created the remote repository and defined the credentials, we need to configure
the local repository to establish the connection with VSTS via Git. The first step is
add the URL we just obtained as the origin point for Git to submit the
files. This can be done in the Windows command prompt while inside the folder.
of the project, using the following command:
git remote add origin <URL of the remote repository>
Now we can go back to VSCode, commit the files, and then do it in the console.
first push (sending the files to the repository) with the following command:
git push --set-upstream origin master
At this point, the credentials for authentication will be requested (the ones we defined in VSTS).
just inform them and press Enter. When we finish this stage we will return to VSCode and
we will continue to the Git icon, so that in the top bar we can see that most of
two items presents no menu will be assets allowing a achievement
to push and pull directly from the editor.

GitHub
GitHub is currently the most used code repository system in projects whose
Version control is done with Git. Its use is free for public projects.
paid options to create private projects. The main ones are stored on GitHub.
open source projects and even Microsoft is migrating its open projects to this
platform.
If you don't have a GitHub account yet, you can create it quickly through the
address available in the Links section. At the moment the account is created, we can
create new repositories (which will be the case here) or use an existing one.
Upon finalizing the creation of the new repository, we should copy the presented link (Figure
33) to perform the cloning that will be used for the initialization of our Git.

Figure 33. Link for cloningopen image in a new window

From now on, the procedure is identical to the one we performed with the VSTS repository.
It is up to the reader to determine which provider is most suitable for their reality. On GitHub as well.
It is possible to carry out certain tasks inherent to the development of the project, such as registration of
failures, functionalities, task assignment, documentation, etc. However, in environments
where Microsoft technologies are widely used, VSTS proves to be a very good option.
viable, primarily because it allows small teams access to private repositories, in addition
to have an intuitive interface, to assist in build automation and integration tasks
continuous, as well as being easily integrated into Visual Studio.

Deploy the application

With Git integrated into our application, we will see how to use it alongside Visual Studio.
Code to implement deployment tasks in the cloud. VSCode does not have
any direct integration with Microsoft Azure, however, we can deploy the
our project in the Microsoft cloud environment with minimal effort. To do this, we must
initially create an account on Azure and access its management portal, the link is
find in the sectionLinks.
After logging in to Azure with an active account on this platform (which can be tested
with limited resources), we will have access to the portal, which presents us with the control panel
as shown in Figure 34. Among the options presented, we will click on New > Web +
Mobile > Web Application.
 Fi
gura 34. Creating a new web application on Azureopen image in new window

We will call the project ProjetoBasicoDevMedia, a name that must be unique, as

it will also be the application domain and is subject to availability verification. The
the remaining settings will be left with the information already contained in the fields by
standard. When we finish creating the project, it will be presented in detail, as
in Figure 35, with a URL already available for access on the web.
 F
Figure 35. Details of the application created

By default, a simple application is launched at the URL <name of

project>.[Link], a free domain that can later be replaced.
By clicking on this address we will be taken to the created page, which until now has only
a standard page.
Activating the deploy via Git
In Microsoft Azure, it is possible to configure a website/app to have its deployment carried out via
Git, that is, the application's code will be fetched from the remote repository and whenever it is done
To push to the main branch, it will be updated automatically. To prepare this
process, we can click on All settings, an option that can be seen in the section
below Figure 35 and then in Continuous Implementation. Then we will go to Define.
necessary settings and we will select Local Git Repository.
If we do not have the deployment credentials previously configured for the
publication of the web application, we will need to click on Configure basic authentication and on
soon provide a new login and password for using the portal with Git and with FTP,
for these cannot be authenticated with our credentials.
When we return to the main tab of the project, we can see among the properties
presented, the necessary configurations for cloning the project with Git, such as
show Figure 36.
 F
Figure 36. URL for deployment with Git
This URL must be copied so that we can proceed with the remaining configurations.
For this, we will return to VSCode to publish our first application on
Azure.
Publishing the application in the cloud

To deploy in the cloud, we will have to configure the local repository to send the
files to Azure via push. The first step is to add the URL of
remote repository created by Azure in the local environment, similar to what we did
previously with VSTS and GitHub, but now, instead of origin, we will indicate the name
alternative azure using the following command:
git remote add azure <Azure repository URL>
Now we can push to the local repository, but this time indicating the name of the
destination and the branch to be submitted. For this we use the following command:

git push -u azure master

When this process is carried out, the password we created will then be requested.
previously in Azure, and next we will see a series of messages in the console
indicating the progress of the implementation, which should conclude indicating that it was carried out with
success. Once this process is completed and everything is in order, we can access the address of
web application and we will see that the content has now been updated.

Using only a simple code editor (compared to Visual Studio) and the prompt
from the Windows command we were able to create an [Link] application and carry out its
deploy in a cloud environment, without being dependent on tools of
visual integration. This allows for a lightweight and easy development environment.
to configure it is possible to create complex applications, managing their life cycle with
with the help of consolidated and efficient platforms, such as Visual Studio Team
Git services.
Although when working on the Windows operating system, developers
they can opt for Microsoft's full IDE, where all integration with Git and VSTS
it can be done from natively available windows, the possibility of creating applications
on the .NET platform with a set of free, lightweight, and cross-platform tools
gives more freedom to development teams and companies. It is currently possible
configure similar development environments on different operating systems
to create [Link] applications with the same features available when using the
Visual Studio for this. This way, within the same team, developers can
working on a project using Mac OS, Linux, and Windows, and using Visual in all
Studio Code and other tools discussed in this article, all free, except for
Azure, however, can be accessed through programs offered by Microsoft.

Unable to access the content of the provided URL.