-->
This guide offers an introduction to creating your first Blazor web app. For more in-depth guidance, see Introduction to ASP.NET Core Blazor.
Oct 16, 2019 dotnet new mvc -o MvcMovie: creates a new ASP.NET Core MVC project in the MvcMovie folder. Code -r MvcMovie: Loads the MvcMovie.csproj project file in Visual Studio Code. Select File New Solution. In Visual Studio for Mac earlier than version 8.6, select.NET Core App Web Application (Model-View-Controller) Next.
- Visual Studio 2019 for Mac now offers full support of the.NET Core 3 SDK. Experience all the new features, and build powerful ASP.NET Core web apps and APIs. Get started today by adding it as a target when creating a new project.
- As you've correctly surmised, it's not possible to build ASP.NET MVC projects on the Mac that aren't based on.NET Core or Mono. So if your project is currently targetting ASP.NET on.NET Framework 4.x, the you'll either have to stay on Windows: Use Bootcamp to run Windows on your Mac Use a Virtual Machine to run Windows inside Mac.
ASP.NET Core Blazor supports two different hosting options; Blazor WebAssembly (WASM) or Blazor Server. Visual Studio for Mac supports both hosting models. Visual Studio for Mac 8.4+ supports Blazor Server and Visual Studio for Mac 8.6+ supports both. For more info on Blazor hosting models see ASP.NET Core Blazor hosting models. Download free excel 2013 for mac. Support for debugging Blazor WebAssembly projects in Visual Studio for Mac is available in the Preview release of v8.8 (available via the Preview update channel in the Visual Studio > Check for Updates.. menu).
What is Blazor? Blazor is a framework for building interactive client-side web UI with .NET, which offers the following advantages to web developers:
- Write code in C# instead of JavaScript.
- Leverage the existing .NET ecosystem of .NET libraries.
- Share app logic across server and client.
- Benefit from .NET's performance, reliability, and security.
- Stay productive with Visual Studio on PC, Linux, and macOS.
- Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.
Create a new Blazor WebAssembly project
On the Start Window, select New to create a new project:
In the New Project dialog box, select .NET Core > App > Blazor WebAssembly App and select Next:
Select .NET Core 3.1 as the target framework, then select Next.
Choose a name for your project, and add Git support if desired. Select Create to create the project.
Visual Studio for Mac opens your project in the Code layout window.
Select Run > Start Without Debugging to run the app.
Visual Studio starts Kestrel, opens a browser to
https://localhost:5001
, and displays your Blazor web app.
Creating a new Blazor Server project
On the Start Window, select New to create a new project:
In the New Project dialog box, select .NET Core > App > Blazor Server App and select Next:
Select .NET Core 3.1 as the target framework, then select Next.
Choose a name for your project, and add Git support if desired. Select Create to create the project.
Visual Studio for Mac opens your project in the Code layout window.
Select Run > Start Without Debugging to run the app.
Visual Studio starts Kestrel, opens a browser to
https://localhost:5001
, and displays your Blazor web app.
Blazor support in Visual Studio for Mac
Visual Studio for Mac (starting with version 8.4) includes new features to help you create new Blazor server projects. As well, it provides you the standard support you would expect such as building, running and debugging Blazor projects. In Visual Studio for Mac 8.6 support for creating, building and running Blazor WebAssembly projects was added.
In the walkthrough above, we saw how the Blazor Server App project template helps you create a new Blazor Server App or Blazor WebAssembly App project. Let's take a look at some of the additional features in Visual Studio for Mac to support Blazor project development.
Editor support for .razor files
Visual Studio for Mac includes support for editing .razor files - the majority of the files that you'll be using when creating Blazor applications. Visual Studio for Mac provides full colorization and completion support for your .razor files including completions for Razor components declared in the project.
Publishing Blazor applications to Azure App Service
You can also publish Blazor applications directly to Azure App Service. If you don't have an Azure account to run your Blazor app on Azure, you can always sign up for a free one here that also comes with 12 months of free popular services, $200 in free Azure credits, and over 25 always free services.
Project anatomy
Blazor web apps include a few directories and files by default. As you're getting started, here are the main ones you'll need to be familiar with:
Pages folder
This folder contains a project's webpages, which use a .razor file extension.
Shared folder
This folder includes shared components, also using the .razor extension. You'll see that this includes MainLayout.razor, which is used to define common layout across the application. It also includes the shared NavMenu.razor component, which is used on all pages. If you're creating reusable components, they'll go in the Shared folder.
App settings
The appSettings.json file contains configuration data such as connection strings.
Asp.net Mvc For Mac
For more information about configuration, see the Configuration in ASP.NET guide.
wwwroot folder
This folder contains static files, such as HTML, JavaScript, and CSS files. For more information, see Static files in ASP.NET Core.
Project anatomy
Blazor web apps include a few directories and files by default. As you're getting started, here are the main ones you'll need to be familiar with:
Pages folder
This folder contains a project's webpages, which use a .razor file extension.
Shared folder
This folder includes shared components, also using the .razor extension. You'll see that this includes MainLayout.razor, which is used to define common layout across the application. It also includes the shared NavMenu.razor component, which is used on all pages. If you're creating reusable components, they'll go in the Shared folder.
App settings
The appSettings.json file contains configuration data such as connection strings.
Asp.net Mvc For Mac
For more information about configuration, see the Configuration in ASP.NET guide.
wwwroot folder
This folder contains static files, such as HTML, JavaScript, and CSS files. For more information, see Static files in ASP.NET Core.
Program.cs
This file contains the entry point for the program. For more information, see ASP.NET Core Web Host.
Blazor Server App specific files
App settings
The appSettings.json file contains configuration data such as connection strings.
For more information about configuration, see the Configuration in ASP.NET guide.
Startup.cs
This file contains code that configures app behavior, such as whether the app requires consent for cookies. For more information, see App startup in ASP.NET Core.
Summary
In this tutorial, you saw how to create a new Blazor Server App or Blazor WebAssembly App in Visual Studio for Mac, and learned about some of the features that Visual Studio for Mac offers to help you create Blazor applications.
See also
For a more comprehensive guide to creating Blazor web apps, see Introduction to ASP.NET Core Blazor.
By Daniel Roth, Steve Smith and Rick Anderson
This article will show you how to write your first ASP.NET Core application on a Mac.
Sections:
To setup your development machine download and install .NET Core and Visual Studio Code with the C# extension.
Follow the instruction in Building Projects with Yeoman to create an ASP.NET Core project.
- Start Visual Studio Code
- Tap File > Open and navigate to your Empty ASP.NET Core app
From a Terminal / bash prompt, run dotnetrestore
to restore the project's dependencies. Alternately, you can enter commandshiftp
in Visual Studio Code and then type dot
as shown:
You can run commands directly from within Visual Studio Code, including dotnetrestore
and any tools referenced in the project.json file, as well as custom tasks defined in .vscode/tasks.json.
This empty project template simply displays 'Hello World!'. Open Startup.cs in Visual Studio Code to see how this is configured:
If this is your first time using Visual Studio Code (or just Code for short), note that it provides a very streamlined, fast, clean interface for quickly working with files, while still providing tooling to make writing code extremely productive.
In the left navigation bar, there are four icons, representing four viewlets:
- Explore
- Search
- Git
- Debug
The Explore viewlet allows you to quickly navigate within the folder system, as well as easily see the files you are currently working with. It displays a badge to indicate whether any files have unsaved changes, and new folders and files can easily be created (without having to open a separate dialog window). You can easily Save All from a menu option that appears on mouse over, as well.
The Search viewlet allows you to quickly search within the folder structure, searching filenames as well as contents.
Code will integrate with Git if it is installed on your system. You can easily initialize a new repository, make commits, and push changes from the Git viewlet.
The Debug viewlet supports interactive debugging of applications.
Finally, Code's editor has a ton of great features. You'll notice unused using statements are underlined and can be removed automatically by using command.
when the lightbulb icon appears. Classes and methods also display how many references there are in the project to them. If you're coming from Visual Studio, Code includes many of the same keyboard shortcuts, such as commandkc
to comment a block of code, and commandku
to uncomment.
The sample is configured to use Kestrel for the web server. You can see it configured in the project.json file, where it is specified as a dependency.
- Run
dotnetrun
command to launch the app - Navigate to
localhost:5000
:
- To stop the web server enter
Ctrl+C
.
Once you've developed your application, you can easily use the Git integration built into Visual Studio Code to push updates to production, hosted on Microsoft Azure.
Initialize Git¶
Initialize Git in the folder you're working in. Tap on the Git viewlet and click the InitializeGitrepository
button.
Visual Studio 2019 For Mac - IDE For MacOS
Add a commit message and tap enter or tap the checkmark icon to commit the staged files.
Git is tracking changes, so if you make an update to a file, the Git viewlet will display the files that have changed since your last commit.
Initialize Azure Website¶
You can deploy to Azure Web Apps directly using Git.
- Create a new Web App in Azure. If you don't have an Azure account, you can create a free trial.
- Configure the Web App in Azure to support continuous deployment using Git.
Record the Git URL for the Web App from the Azure portal:
In a Terminal window, add a remote named
azure
with the Git URL you noted previously.gitremoteaddazurehttps://ardalis-git@firstaspnetcoremac.scm.azurewebsites.net:443/firstaspnetcoremac.git
Push to master.
gitpushazuremaster
to deploy.
Browse to the newly deployed web app. You should see
Helloworld!