Learn ASP.NET Core | Visual Studio Code Setup

hello everyone in today's video we are going to see how to create asp.net core web application using dotnet sdk and also how to use visual studio code as editor to work on asp.net core web application let's get started first things first let us install the latest version of dotnet sdk version just go to dotnet.com microsoft slash download page i will be mentioning this link in the description of the video and then download the sdk version depends on your voice and my windows is running on 64 bit version so i am downloading this data sdk 64. if you are using other than 64 version you can click on this all.net 6.0 downloads and there you can get the all the available versions so now let us install.net sdk so go to downloads just double click and click on install it ask for permission just say yes installation process is very simple and just you need to click on install then it automatically install everything so the installation was successful now just close this to confirm the dotnet sdk installation just open command prompt and use the command.net so open command and here just type dartnet and you will be seeing the result like this and here you can see that usage.net and after that we have the options here under the options we have all these possible values like you can use hyphen h for the help or iphone iphone help so dotnet iphone h then we get all the available commands that we can use so we have installed dotted hdk 6.0 version here you can see the same thing dotted sdk 6.0 version here you can see the sdk commands which are very very useful the first one is add to add any nucleus package or reference to the data project we use the add build to build the dotted project we can use the dotnet build command and then we have very very important command that is new so in order to create any dotted project or adding any new file to the existing project we can use the new command and the same way here we have the run command to run the dotnet application so now let us create our first asp.net core web application using dotnet sdk we are under the c users code will take my username so i am going to move to the asp.net core folder that is i have already created on my desktop cd desktop then the asp.net core and now let us use the command dotnet we are going to create the new project so new and then we are going to create web application so web app iphone oh i give the name asp.net core web app you can give the any name that you want then press enter welcome to dotnet 6.0 so the project creation is completed now let's go to our folder asp.net core a directory created with the name asp.net core web app that we have given here we have all the project files and under the pages we know that we'll be having all the views and also under the shade we have layout.html and all the required files are there so in order to run the application we need to move to the folder where we have the solution files so let's go to this asp.net core web app that we have given name so cd and to build and run the application we need to use the command dot net run it is building the application so here you can see that application started and if you would like to cancel it we can use the command ctrl c to shut down now the application is running and listening to this address so just copy this address and go to the browser any browser that you want just paste the url press enter there we go now we have our first asp.net core web application up and running home privacy so it is working as expected now let us see how to use widget studio code as an editor to work on asp.net core web application or any dotted application just minimize this and i am going to shut down this we know that to shut down our canceling we can use the control c command press ctrl c then it is going to stop you can see here application is setting down so just close this command prompt i am sure you have already installed visual studio code on your mission otherwise just go to download page obviously code and install the studio code version depends on your voice i have already installed the studio code on my mission so i am going to open the view studio code so i have registered a code opened now to open our project just click on file open folder and we have the project on the desktop so go to desktop and select asp.net core web app select folder so here we have the project at the left side to run this application from the registry code just click on terminal select new terminal and here we can select command prompt like you can select powershell or even command prompt anything so i'm good with command prompt we are already in the folder of asp.net core web app so here we can just use the command dotnet run there we go now the application is started and it is listening to the localhost 7189 just press the control and just click on this link and it's going to launch the browser and here we have the welcome page so click on privacy home so it is very cool right and visual studio code is very light version compared to the video studio so i recommend to use the video studio code now let us see how to make the code changes and see them live so let's go to pages and just open in the shortcuts html here instead of welcome let's say hello asp.net core save it just go to the browser and refresh still we don't see the changes that we made right so to see the changes that we made dynamically we need to just use the command dotnet watch run so let's stop this ctrl c for stopping cls so this time i'm going to use the command dot net watch run so instead of just dot net run we are going to use dot net watch run just press enter so now you can see that watch hot reload enabled for a list of support edits so whenever we make the changes it automatically reload the project and as always build will start the building and we use the run command so it will build the project and it will launch it it's going to launch the application now see this time you can see hello s button core now let us make some change come here web application and let me minimize this to see the changes alive i am going to just save it save it there we go here you can see that it is just again watching file changed the file changes industrial html and heart reload of changes succeeded and here you can see the change hello is blackened core web application so this way we can make the changes and see them live dynamically again is hello expert at core now let us see some of the very useful extensions of your studio code that you required while working on dotted applications so ctrl shift x for extension section and then search for c hash or c sharp and select the first extension and this is powered by omnisharp and click on install it is one of the very useful extensions with many features like intelligence syntax highlighting and debugging support and other features so the installation is completed so we need to reload this vs2d code window just close this and open again so now we have reloaded view studio code just open program.es and here we have the app.run right so here app is nothing but the object here just type app dot then it will give us all the available methods on app object right so it give us the intel sense and similarly go to index.html and here we have the view data right just type view and press ctrl space the way we use the command in video studio then it gives us all the available methods are classes or anything that start with the view right and the next useful extension is material icon theme here you can see that i have already installed it so it shows the type of the file so c sharp and this is configuration file which is json file so it's so json icon so the same way if you open this developed root file where we are going to have all the libraries like bootstrap css so it will give us all the css icons and for the js it will show the js icon and here you can see that js icon so to install the material theme icon just ctrl shift x open the extensions and here you can simply type material icon theme so you can install it i have already installed it and another useful extension is peacock so most of the times we will be working on front-end and back-end applications parallelly so in that case if you would like to differentiate the visual studio code instance then it is very useful installation completed now just use the command ctrl shift p or even you can click on this view pick up change to a favorite color and then here we have angular red azure blue javascript yellow so let's say i use angular red for this and if you open another instance new window where you are going to work on front-end applications now we can easily differentiate that video studio code with ridiculous menu bar is dotted core application and without color is normal front-end applications so this way the peacock extension is very useful i hope this video is helpful to you and if it is helpful to you then please hit the like button and also subscribe to my channel thank you for watching

Channel: CodeWellTech

Views: 23,427

Keywords: beginners, tutorial, learning, codewelltech, ASP NET Core | Visual Studio Code Setup, dotnet, dotnet with vscode, asp.net core with visual studio code, c# extentions vscode, create asp.net core application with sdk, dontnet sdk, first aspnet core web application, aspnet core hello world, visual studio code setup, c#, asp.net, asp.net mvc

Id: 55qwQhdzkLM

Length: 11min 12sec (672 seconds)

Published: Mon Feb 07 2022