.Net Foundation On .NET, 12 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Core 3.0 development using Visual Studio for Mac

Description

Visual Studio for Mac
https://visualstudio.microsoft.com/vs/mac/?WT.mc_id=ondotnet-c9-cephilli

Visual Studio for Mac Documentation
https://docs.microsoft.com/en-us/visualstudio/mac/?view=vsmac-2019&WT.mc_id=ondotnet-c9-cephilli

Tailwind Traders Website
https://github.com/microsoft/TailwindTraders-Website?WT.mc_id=ondotnet-c9-cephilli

eShop on Web
https://github.com/dotnet-architecture/eShopOnWeb?WT.mc_id=ondotnet-c9-cephilli

In this episode we are joined by Sayed Hashimi who sits with Christos to show us some of the tooling available for ASP.NET Developers in Visual Studio For Mac.

[00:40] - What types of applications can you build with Visual Studio for Mac?
[03:00] - Getting started with an existing project on your Mac
[10:16] - Working with JavaScript frontends
[13:44] - Enabling C# 8 support

https://aka.ms/VSforMac-download

#dotnet #dotnetcore3 #aspdotnet

A

.Net core development, with visual studio for mac?, you bet.

A

Join me and sayed hashimi to find out about all the cool new features on visual studio for mac on on.net.

A

On.Net today, I'm joined by sayed hashimi,, a pm for visual studio for mac to talk about.net development on your macos.

B

Yeah, right., it's great to be here, [inaudible].

A

Thanks a lot for inviting me out, here, buddy.

B

So yes, I wanted to spend some time talking about.

B

Visual studio for mac- and I want to focus more on.net core and asp.net core.

B

But before we do that,, I wanted to give a quick one or two-minute rundown of the various different types of apps that you can build with visual studio for mac.

B

yes.. So first off,, let's start out with the mobile category, here.

B

So we've got xamarin forms., there's two flavors for mobile here..

B

I've got xamarin forms and with xamarin forms, you'll develop your, the application,, the model,, the services and the ui,, and then that's shared across the different platforms..

B

So let's say ios and android,, and then we've got the native projects for ios and android,.

B

And in that case, you'll develop your models and services and share those across., but for the actual ui, you would create a native specific ui for each target framework that you're using there.

B

all using.net? all using.net. yeah,, exactly., brilliant., that's right, and then for the web and cloud,.

B

We've got full support: for.net, core and asp.net core.

B

You can create a variety of different types of applications. There.

B

You can create console apps or different types of web apps, whether they're.

B

Just regular asp.net core website or web apis or spot types of apps.

B

okay., then we'll demo, some of those as well,.

B

And then, obviously, with the azure functions,, you can create your serverless types of applications. There,.

B

And we're currently working on the blazer support and visual studio for mac., so that'll be coming soon, but some of that functionality already works., but some of it doesn't work.. So you can run blazer-based projects.

A

You just can't create them,. The templates are not there. Yet.

B

Yeah,, that's right., yeah,, there's a little bit more to it, but essentially, you can open, build, run, and debug blazer server-side applications.

B

Almost there? almost there. yeah. now we're waiting for editor support and also there's some publishing support that needs to happen.

B

Okay. but the team is hard at work on that.

A

So we'll get there soon., I'm sure.

B

So why don't we go ahead and switch over, and the third component, or the different type of app that you can create with visual studio for mac? Is gaming and 3d real-time with unity.

B

So those are some different types of apps that you can create for the gaming or 3d side as well.

B

We're not going to be going into that, and in this particular talk, because we're going to be more focused, on.net, core and asp.net core.

B

right., so yes.. So let me show you,, let's first get started with like a typical asp.net core website or the type of app that if you've been developing with asp.net core in the past, you might be used to.

B

okay. to demonstrate that,, we've got,, it's a sample reference application, that's called eshoponweb,.

B

And that's actually one aspect of.

B

A different, larger sample, that's called eshoponcontainers.

B

Right. but we'll take a look at eshoponweb today.

B

So this is hosted in github here..

B

So what we'll do is we'll go ahead and first clone this. My local machine.

A

B

Then we'll go and get it running in visual studio for mac and go from there. awesome.. So in github I'm just going to copy the clone url.

B

In my case,, I'm using ssh as the authentication mechanism.

B

But you can always use https as well.

B

So I'll just go to "version control" and select "check out" here.

B

Okay. I'm going to paste in my url, and then you want to examine this target. Directory, make sure that's the place that you want it to go to I'm fine with that., so I've gone and clicked "check, out" here.

B

So now this is using git to go ahead and clone the remote repository to my machine.

A

The nice thing about that is integrating with the tool, right?

A

so visually, for it might gives you there the interface that you want to interact with all of them being here from the command line,. You could do it from there that you want.

B

That's right. yeah, exactly. with git there's different types of approaches. There.

B

some people prefer the built-in ide tooling.

B

And other people prefer the command line., but whichever one of those preferences that you have, the ide is there to support you, whether you support one or the other.

B

excellent, yeah., so I'm going to let this, so now you saw after we did the check out,. It discovered the solution file and automatically loaded that in visual studio for mac,.

A

And now we're ready to party on this application.

A

even restore the packages for the solution.

B

Yeah,, that's right., so more or less you're good to go.. So now we're good to go. now,. What I want to do is,.

B

I want to take a look at the settings for this application to make sure that they're oriented to work on mac as well. sure.. So that's the first thing you want to do whenever you open up like an open source type of project.

B

for settings, there's two places you want to look at.

B

one is appsettings.json which I've loaded up here, and the other one is launchsettings.json.

B

So for launch settings,, the first thing I'll do is. I want to switch this over to development..

B

Okay., that's going to enable better error messages as well as.

B

Enabling running any bf migration that might need to be there.

A

Which is building of the framework which I love as well: for.net core,, asp.net core?.

B

Yeah, that's right, and then, if I take a look at these connection strings for appsettings.json,, I can see that these are localdb style connection. String.

B

So I'm going to go ahead and change that to something that works, cross-platform.

A

Yeah., because one of the things that we lack on macos is support for sql.

A

although,, there is support for running sql on container., so that would be another option if you wanted to use their localized version of sql just for people to be aware.

B

That's right. okay,. So what I'm doing here, is,.

B

I'm just saying data source equals app.db.

B

So what that is,, that is, sqlite.

B

Right. so basically,. If the app.db file doesn't exist, when you try to run the application and development mode, it will detect that that database is missing and go, create it. And then all your migrations will be run.

B

That's the idea here., but yeah,, that that does require switching over to development mode in launchsettings.json, which I've already done.

B

Yeah,: let's go ahead and run this..

B

I will start without debugging.

A

See it in action.

B

Well,, that's really great., we've got our eshoponweb running here, dude.. All we had to do is clone it,, make a couple tweaks to the settings and then we're-.

A

We're off to go in the market and make some money, right?.

B

Then we're good to go.. I could take this app here and just replace the products and have my own little shopping cart going here..

B

We see it's a fully functioning app here and we add.

B

A couple of things to the shopping cart.

B

I can update that,. I can check out, so on and so forth.

B

So this is just like your typical vanilla, asp.net, core website, and everything's happening on the server side., I'm not even sure. If there's even a single javascript file in this project, here. must be some css and some javascript?

B

yeah.. There is some kind of css, but there's not a whole lot of javascript happening with eshoponweb.

B

Most of it's handled on the server side. yeah., but yeah.

A

The whole point of that repository is to show what asp.net core can do for you, right?.

B

Yeah., that's right.

A

It's great to see that you can clone it and straight away start working.. So if your team works across visual studio on windows and visual studio for mac,, then there's no issue there. they're interchangeably, working. yeah. sounds the difference. Is there on the database but-.

B

Oh sure, right. there's some [inaudible]. We can work around. yeah,, that's right. with the extensibility.

B

That we have for app settings,. You can modify your startup. That cs where you.

B

Could pick up a file? That's not actually checked into source control.. So if you wanted to setup to where on the mac machine is.

B

Sqlite and on the windows machine you use localdb, that's totally easy to do..

B

It's very easy to go ahead and set that up.. So yeah.

B

The way that we approach these projects, is,.

B

We want people who are in teams to be able to use whatever tool that they want to use.

B

There's some people who have a preference with windows and visual studio, windows.

B

others prefer, let's say, visual studio for mac running on.

B

Their mac and even for other people, they got visual studio, code.

B

Whichever one of those tools that that particular developer or team likes to use,.

B

They should all be able to work together, here.. So that's why we're sharing a lot of different components from.

B

Visual studio and the different ides, and also visual studio, code., so yeah..

B

So at the end of the day,, we want to bring the development experience to where the developers the most comfortable and where they find their home is that basically.

A

Yeah. yeah, exactly. right.. I have both a mac and windows machine., so I like to jump from one project to another and one machine to another without really having to think about,.

A

Oh, is this going to work, or is this going to be missing [inaudible].?

A

I know that we've done a lot of work over the past few months to make the visual studio for mac.

A

editing. Experience is much better and we're going to jump into that later, right?, that's right. yeah.. We have done a lot of work for.

B

Editing and all across the board and bringing over more and more components., like one thing that I just showed you here briefly was: I went into.

B

Launchsettings.Json and flipped it from production to development mode., that's a relatively new feature to visual studio for mac.

B

So yeah and then one thing that was here that I didn't.

B

Actually talk about it here was the browser drop-down.

B

So when you want to run your application,, you can pick the browser that you want to show, and this is the exact same list that shows up in mac system preferences for picking default browser..

B

There are a couple of items here that don't necessarily look to me like browsers, like iterm and snagit., but that's the exact same list that shows up for default system browser in macos..

B

So that's how we represent it here as well., but yeah.

B

So now let me show you a different type of application that you can load up here.. We just looked at the vanilla web app.

B

Yeah., let's take a look at something: that's a little bit more front-end heavy..

B

So this is a tailwind traders, website.

B

I think there's a set of tutorials associated with this as well or set of samples,. I mean.

B

This is the website aspect of it.

B

there's also a mobile app for ios and android.

B

We're not going to get into that part of it obviously,, but this is actually a react. Application that's created with asp.net core.

B

So we got to know from that application and then we'll get up and running. yeah, and the nice thing about.

A

Tailwind traders is that it's always up to date..

A

We have it as one of our flagship sample ups..

A

So when people want to test their ids,, they want to test how or see how code works or architecture,.

A

Then this is a great place to go and clone up project and see how its been put together.

A

B

Yeah., that's right.. So now I've got my tailwind traders app littered up here and we can see we've.

B

Got the app.js file here- and this is just kind of.

B

Your typical asp.net core plus react type of application. Here.

B

Let me go ahead and run this then., so I'll start without debugging again.

A

So this project has slightly more dependencies to shut up and I think that's part of.

A

The setting it up you have to also have, for example, npm and node to ensure that you download and package the spy component of the app appropriately.

A

So it's a little bit more involved in setting it up, but once you're up and running again,, it's more or less the same experience that you would have on windows as well.

B

That's right. yes.. So while that's getting loaded up,, let me go ahead and point out a few things here: basically.

B

So after I clone this to my local machine,.

B

What I did was on a terminal,, I went into the client app folder and we can see here.

B

Okay, I went in,, maybe we can't actually see it. Here.

B

Let me do show all files,. I guess.

B

There should be a package.json, file.

B

yes,, it's right, there, just wasn't included in the project. Itself.

B

So on the command line,, I went into client app and then I ran.

B

Npm install- and there was a couple of warnings there that I needed to address as well., so I went ahead to clear those warnings, and then I believe that was it..

B

Let me switch back to not showing all files.

B

But once again,, you obviously always want to check here. Your app settings.

A

So in this case, this one looks fine,.

B

And then, let's take a look at launch settings that json as well.

B

This one, I believe it was already configured.

B

As development, but if not,.

B

You want to go ahead and switch that over to development. I think.

B

Let me switch back to the browser., all right.

B

So here we can see, we've got the tailwind traders, application.

B

Loaded up and running here- and I mentioned the mobile app.

B

So you can easily acquire those., you can log in as well or you can look through various different products by category.

B

So that's just a different type of app that you can create, with visual studio for mac., and.net, core., yeah, and.net core, of course obviously..

B

So what I was thinking about now was maybe this could be a good chance to show everybody how they can enable c# 8 and then some.

B

Of that special features we have for c# 8 and visual studio for mac.

A

We already have support for.net core 3.0 by the way., it's still in preview,, but we already support it in c#, 8.

B

Yeah,, that's right., so from 8.2 forward, we support.net core 3 preview and the only thing you have to do.

B

There is you'll install visual studio for mac,.

B

And then, if you want to try, out.net core 3,, go and download the preview sdk and install it, and your ide will basically light up with that. Functionality.

B

Fantastic. so I'll show everybody that too..

B

So let me go to my ide.

B

I'm going to open a solution that I've been working on.

B

And it's a solution that consists of three projects.

B

It's essentially a.net core console project.

B

But more specifically,, it's a.net core global tool.

B

So I've already actually been developing this with c# 8.

B

So it's already configured, but let me show you how you would go and enable that if you hadn't already.

B

so you'll right-click on your "project" and choose "options".

B

Go down into the general tab under "build",.

B

And then here is where you would pick your language version here and then after you, install.net core 3,.

B

You should see version 8 to appear in this list..

B

I click "okay" and then you're off to the races there..

B

So the three projects I have here are the console project. Itself,.

B

Shared.Net standard library, project, and then a unit test, project. I've already configured all those to work with c# 8.

B

There's one thing to have a ide or an editor that will enable.

B

You to kind of type out c#, 8, code,, right?,.

A

B

That's one thing: obviously., that's really great., but there's a little bit more to it when you're using let's.

B

Say: visual studio for mac or visual studio on windows.

B

It's like, let's say, if you type in the normal code, that you're always used to typing in,, the cool part is now: we've got these roslyn analyzers.

B

Which are aware what language version you're targeting,.

B

And then, if you're, targeting version, 8,.

B

Then they could actually light up specific analyzers and.

B

Quick fixes to help you improve your code and make it more streamlined and more readable.

B

So here, I have an example of that., so this is some code that.

B

I probably would've written a year ago, and this is what I was used to before,.

B

Then I typed it into the ide and then I noticed I get these little green underlines under my code.

B

So that's an indication: that, hey,, there's one or more quick fixes available here that you might want to try to take a look at..

B

So let's go take a look at this.. We noticed that I'm going from line 19 to 28 here, basically, right?.

B

Yeah. so now let's do these..

B

Let's do these quick fixes., so it says change to use simple, using statement. all right.

B

So this is something new: that's came in with c# 8., so you can see it..

B

It removes the parentheses,, remove the block, and then I've got an additional one here, as well.

B

Let's go ahead and go into that.

B

Boom. so now it's changed from 19 to 28, to about 26.

B

But removing those braces, at least to me,. It makes it a lot easier to read.

B

You don't have to figure out when is this coming in scope and when this is going out of scope.

B

Then in this case, it really kind of highlights where you can have an ide that actually could help.

B

Educate you and actually help teach you new things and fixing up your code as you go along with it.

B

You know what I mean., so I think it's really great and let me show you another kind of quick fix.

B

Oh yeah,, here it is., so I'll show you another quick fix..

B

This is not specific to c# 8, but the more I think, c# 7,.

B

But still very cool., I've got this string format here and with.

B

C# 7 we have the interpolated strings.

B

So I can say, convert to interpolated string and we can see in this case it's going all the way off to the side.

B

So, let's see what happens when I do that., then it just kind of fits in there.. That's much easier to read and easier to maintain and just one last thing to think about.

B

So you can use.

A

The ide to modernize your code and learn as you go and then improve the readability of your code more or less and make it more concise., > yeah,, right., exactly, right.

B

That's the whole benefit of having an ide to.

A

Support your new development and it's nice to see where things are going, especially with their latest features around c# 8.

B

Yeah, right., that's right.,.

A

I think next step is for everybody to go out there and download visual studio for mac. If you don't have it already. well,, that's it.! Thanks very much for coming today..

A

It's was great to find out about all the cool new features that we have on visual studio for mac, and thanks everyone for tuning in..

A

If you want to get started with visual studio for mac,, make sure you visit aka.ms/vsformac-download.

A