Making an ASP.NET Core website - ASP.NET Tutorial

- Hey friends, I'm Scott. - I'm Leslie. - And we are going to teach you ASP.NET This is our 101 video series. There's been a number of video series that we've already done, C-Sharp and .NET Core. So we're going to assume that you've either gone through those or you have some familiarity with that as well as maybe a little bit of HTML, a little bit of CSS. - Yeah. - Sound good? - Sounds all right. - So let's make a website. We're going to go ahead and start out by launching Visual Studio 2019. We've also got a video to show you how to install that if you haven't already. And we're assuming that you click the ASP.NET Core button that lets you install all that stuff. Now you can see here, I can open a local folder or I can even clone it. I can make this from someone else's. - Yeah. - [Scott] I'm going to say create a new project. - [Leslie] Okay. So one of my concerns with just building a website is that's a lot of components. There's probably a lot of things I have to do in the backend to set it all up. - [Scott] There's a lot of moving parts when you make a website. And that's why we make these templates that give you a bit of a jumpstart. It's not quite "Hello, World!" it's "Hello, World!" web edition. - [Leslie] Yeah. - [Scott] So right now I can go in here and I could type web but I can see right off the bat that there's an ASP.NET Core web application. And it's worth pointing out that it says Linux, Mac, Windows. So it'll work anywhere. - [Leslie] It's fun for everybody. - [Scott] Okay, so I'm going to hit Next. And then this is important, because what we're going to do is we're going to make a craft's website like Etsy. - [Leslie] Yeah. - [Scott] Okay? And I'm going to call it Contoso Crafts. All right, sound like a plan, maybe thought website? - [Leslie] It sounds good. - [Scott] Now right here, there's a check box. It says place solution and project in the same directory. Or we can maybe, if in the future, you and I are going to have different projects, we might have those in separate directories. So I'll just make them separate for now, if that's okay with you, and we'll call the main solution Contoso Crafts, but it's up to you. Create. And then what that's going to do is it's going to chug in the background and decide what's going to do. Ah, we have a choice. - [Leslie] Wow. - More choices. - More choices, for better, for worse. - [Scott] Yeah, well, there's lots of different web apps, aren't there? - [Leslie] Yeah. But I'm looking at that web application one and that seems like the best one to go with because that's what I want to make. - [Scott] I could do this one empty, which is a little intimidating. I could pick one of the new popular things like Angular or React and that's cool as well. But I think you're right, web application is the way to go. - [Leslie] All right. - [Scott] So let's go ahead and hit Create and it's going to go and churn and do that work for us. And with "Hello, World!" when we did a console application it literally just said, hello world. Let's see what we get when we make an ASP.NET on that one. It started up with an overview and some links to documentation and maybe even a link to this video, which would be kind of a cool insight, don't you think? - Yeah. - So I'm going to click on Solution Explorer over here and maybe we can open these up and see what's going on. - It's a lot going on. - [Scott] So the website's called Contoso Crafts. We've got this folder full of like static stuff or unchanging things. - [Leslie] It's kind of like the default folder that it'll go to when you start to boot up the application, right? - [Scott] Right, so any graphics, any CSS, any JavaScript that we put in there it's going to automatically be served by our web server. That's a good point. And then we've got pages, and this is like our dynamic code and we're going to go and make some changes there. And then our main program that starts up there as well as some app settings here. That kind of might be a little intimidating but why don't we just run it and see what it looks like? - [Leslie] You mean if we just hit start, it's going to magically give me a website already? - [Scott] I hope so. - [Leslie] That's sounds cool. - [Scott] Now there's two ways to do this. We can click the play button and that'll go and do a debugging session. And you know all about that 'cause you own the debugger. - I do. - Or I can say start without debugging. Is there a reason to do one or the other? - Sometimes starting without debugging can be a little bit faster. So if you don't really care about debugging your application at this given point in time. - Okay. - You can go ahead and run it with no problems. - So lets do that. So I want to say start without debugging and it's starting to build my application for me for the first time. The very first time it might be a little bit slow. Now right here, this is interesting, it's going to say, hey, this project is configured to use SSL. - [Leslie] What is that? - Right, Secure Sockets. Like, do we want it to be HTTPS? That's cool. But we're on a local computer and this is saying, well you need to get a free certificate so you can be secure locally. It might sound kind of weird, but it's good to be secure now so we'll be secure later. - Yeah. - So I'm going to go ahead and say yes. And it's going to tell me that it's going to install our certificate and that certificate is just to make sure it works on my local machine. All right, something's happening. - Ooh. - Look at this. - Right there. - I'm going to zoom. Welcome. Okay, so this is our "Hello, World!". So "Hello, World!" in the web world does include HTML and CSS. And that looks pretty good. - [Leslie] Yeah. So problem solved, that's the end of the video, right? - [Scott] All right, we should chip it and we're done. - [Leslie] Yep. (booth laugh) Crafts Core. - Exactly. So instead let's just change this text. - [Leslie] All right. - [Scott] Shall we? Okay, so we have to figure out where that came from. - [Leslie] Yes, there was a lot of files in there, so it's might be kind of iffy. But I'm looking at the HTML files under pages and that might be a good place to start. - [Scott] Okay. Well there's an index page. Might it be in there? - Yeah, I'm thinking this might be the one. This looks like the homepage that you'll be directed to from the moment you boot it up. - So we see some stuff that we'll talk about later. We see a div and h1. I remember that that's header one and then the stuff there. I think that welcome is that welcome. - That one. - So let's go and change it. What are we calling our website? - Contoso Crafts. - Contoso Crafts. All right, now I'm just going to hit Control S or I could just push the save icon there. And then can I just go back and just hit f5 and refresh that? Because I'm using Visual Studio and we're using a thing called IIS I get to do that. I can make a change, refresh, make a change, refresh. - [Leslie] It save a lot of time. - [Scott] Yeah. You can't always do that. - Yeah. - But you can do it a lot. - [Leslie] For a lots of HTML based content, it's usually a go. - [Scott] Yep, and down here in the lower corner, it says IIS Express. If you're running this on Windows, you can right click and say show all applications. And I can actually see something interesting. It's running on two different ports. One is secure and one is not, and that's because we had that secure certificate at the beginning, so that's pretty cool. And when I ran my application, I get the little lock. Now, of course, we're not really talking to the internet 'cause local host is us. - [Leslie] Yep. - But that is "Hello, World!" and it worked. So I think we're set up pretty well for the next video. - Yeah, that was pretty simple. - Yeah, let's do it, let's make some websites. - Absolutely.