Making an ASP.NET Core Website | ASP.NET Core 101 [2 of 13]

Sharing buttons:

>> Hey friends I'm Scott.

>> I'm Leslie.

>> 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 gone through

those and 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 clicked 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 could make this from someone else's.

>> Yeah.

>> I'm going to say, "Create a new project".

>> 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 back-end is set it all up.

>> There's a lot of moving parts when you make a website,

and that's where we make these templates

that give you a bit of a jump-start.

It's not quite HelloWorld.

It's HelloWorld Web edition.

>> Yeah.

>> 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.

>> It's fun for everybody.

>> Okay, so I'm going to hit in "Next".

Now, this is important

because what we're going to do is we're going to

make a crafts website like Etsy.

>> Yeah.

>> Okay, and I'm going to call it "Contoso Crafts".

All right, sounds like a plan maybe.Website.

>> It sounds good. Now, right here there's a checkbox.

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

show in the background and decide what's going

to do. We have a choice.

>> Wow, more choices.

>> More choices.

>> For better for worse.

>> Yeah, well, there's lots of different web apps that are there.

>> Yeah, but I'm looking at that web application one

and that seems like the best one to go with.

I guess that's what I want to make.

>> I could do when it's 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.

>> All right.

>> So let's go ahead and hit "Create",

and it's going to go and churn and do that work for us,

and with HelloWorld when we did

a Console application it literally just said, "HelloWorld."

Let's see what we get when we make an ASP.NET one.

It started up with an overview and some links to documentation and

maybe even a link to this video

which would be cool instead of something else.

>> Yeah.

>> So I want to click on "Solution Explorer" over here,

and maybe we can open these up and see what's going on.

>> There is a lot going on.

>> So the Websites called Contoso Crafts.

We've got this folder full of static stuff, unchanging things.

>> It's the default folder

that it will go to when

you start to build up the application, right?

>> Right. So any graphics, any CSS,

any JavaScript to be put in there,

it's going to automatically be served by our Webserver.

That's a good point, and then we've got pages and these are

like a 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 might be a little intimidating

but why don't we just run it and see what it looks like.

>> You mean if we just hit "Start",

it's going to magically give me a website already?

>> I hope so.

>> That sounds cool.

>> 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 because 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,

you can go ahead and run it with no problems.

>> So let's do that. So I'm going to say,

"Start without debugging," and it's trying 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.".

>> What is that?

>> 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.

Might sound weird, but it's good to be

secure now so we'll be secured 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.

>> Oh.

>> Look at this.

>> Already there.

>> I'm going to zoom "Welcome".

Okay, so this is our HelloWorld.

So HelloWorld in the web world does include

HTML and CSS, that looks pretty good.

>> Yeah. So problem solved. That's the end of the video, right?

>> All right, we should ship it and we're done.

>> Yes. First of all.

>> Exactly. So instead let's just change this text.

>> All right.

>> Shall we? Okay, so we have to figure out where that came from.

>> Yes, we got a lot of files in there,

so it might be iffy,

but I'm looking at the HTML files

under Pages and that might be a good place to start.

>> 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 [inaudible] if you get it out.

>> So we see some stuff that we'll talk about later.

We see a div, an H1.

I remember that that's header one, and then the stuff there.

I think that welcome is that welcome.

So let's go and change that. 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 it'll 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.

>> Save a lot of time.

>> You can always do that.

>> Yeah.

>> You can do it a lot.

>> For a lots of HTML these content,

it's usually a go.

>> Yes, and down here in the lower corner it says, "IS express."

If you're running this on Windows,

you can right-click and say show all applications,

and I can actually see something interesting.

>> Yeah.

>> 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 because local host is us.

>> Yes.

>> But that is HelloWorld and it worked.

So I think we're set up pretty well for the next video.

>> Yeah, that's very simple.

>> Yeah, I love it. Let's do it. Let's make some Websites.

>> Absolutely.