Setup VSCode for C# development

Ubuntu 18.04 , 19.04

Dotnet Sdk 3.0 release installation

Install it directly from the software repository.

Mono

Remove all versions of mono completely from the system, vscode & omnisharp comes with the mono included, the incorrect version on the system will interfere with the embedded runtime and will not work correctly .

 igorb@desktop:~$ mono --version
 Command 'mono' not found, but can be installed with:
 sudo apt install mono-runtime 

VSCode installation

Download VSCode and install it.

Open downloaded deb file with “Open with software install” and install it.

Hide some folders from file explorer

As explained here just set files to exclude.

Search for “files:exclude” and add bin and obj folder to the list of excluded entities.

**/bin
**/obj

Add to favorites on Ubuntu

This is maybe some odd advice but, when you add Code to favorite applications (to the launcher) you do that from the Show Applications menu !

If you start code from the terminal and mark newly showed icon as “Add to favorites” , the Code somehow doesn’t compile and debug correctly. There is some strange errors after succesfully builded solution…

C# project build errors

In case of errors on build , make sure you have only one dotnet sdk installed on your system (ubuntu).

igorb@desktop:~$ dotnet --list-sdks
3.0.100 [/usr/share/dotnet/sdk]

Omnisharp project build errors

In case of any errors on the project load (OmniSharp log in the output terminal), like :

OmniSharp.MSBuild.ProjectManager        Failed to load project file '/mnt/development/GitHub/Bisaga/About.Application/About.Application.csproj'.

Add build path to the /etc/profile file, do not forget to re-login:

export MSBuildSDKsPath="/usr/share/dotnet/sdk/$(dotnet --version)/Sdks"

Change number of notifying instances

echo fs.inotify.max_user_instances=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

EmbeddedBlazorContent – how to include static content from blazor libraries

If you want to include some static resources from the Blazor component library use “EmbeddedBlazorContent” tool.

Source: https://github.com/SamProf/EmbeddedBlazorContent

Create static content in Blazor component library

Create “content” folder in the root of the library project and add CSS and JS files in.

Add embeded resource build action on all the files

Open properties on each resource file and select “Embedded resource” build action on it.

Additional attributes for embedded resource in the project file

Open .CSPROJ project file and edit EmbeddedResource definition to have additional LogicalName definition.

For CSS files:

  <LogicalName>blazor:css:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>

For JS files:

 <LogicalName>blazor:js:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>

Sample:

  <ItemGroup>
    <EmbeddedResource Include="content\bisaga_core.css">
      <LogicalName>blazor:css:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="content\bisaga_core.js">
      <LogicalName>blazor:js:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </EmbeddedResource>
  </ItemGroup>

Add EmbeddedBlazorContent library to blazor server side web project

Startup.cs

Add configuration for embeded content library to Configure metod in Startup.cs

# Startup.cs
app.UseEmbeddedBlazorContent(typeof(Bisaga.Core.Components.BsgComponentBase).Assembly);

_Host.cshtml

Add call to EmbeddedBlazorContent where you wish to include embedded files.

@using EmbeddedBlazorContent

<head>
  ...
    @Html.EmbeddedBlazorContent()
</head>

Syncfusion EJ2 AspNet Core Blazor components installation

If you need professional and supported set of components for server side / client side Blazor web applications use Syncfusion components.

More info:

Installation – NuGet packages :

  • Syncfusion.EJ2.Blazor

Startup.cs

Configure method

Licensing is not needed in case of preview version and library don’t even contain “Licensing” namespace.

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("...licence string...");

_Host.cshtml

@addTagHelper *, Syncfusion.EJ2.Blazor

<head>
    <link href="https://cdn.syncfusion.com/ej2/17.2.39/bootstrap4.css" rel="stylesheet" />
    <!--    <link href="https://cdn.syncfusion.com/ej2/17.2.39/material.css" rel="stylesheet" />-->
    <!--    <link href="https://cdn.syncfusion.com/ej2/17.2.39/fabric.css" rel="stylesheet" />-->
    <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ejs.interop.min.js"></script></head>

_Imports.razor

@using Syncfusion.EJ2.Blazor<br>
@using Syncfusion.EJ2.Blazor.Calendars

Components usage in razor files

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<br />
<EjsCalendar></EjsCalendar>

The result

If everything is deployed as expected you should see similar result page:

MatBlazor components installation

AspNet Core – Server side Blazor framework

Source: https://www.matblazor.com/

If you need open source components for Blazor you definitively need to look at MatBlazor component library.

Installation

  • MatBlazor nuget library
  • EmbeddedBlazorContent nuget library (for server side blazor projects)

Startup.cs

Configure method

// Embedded blazor content get static content from depended DLLs 
app.UseEmbeddedBlazorContent(typeof(MatBlazor.BaseMatComponent).Assembly);

_Imports.razor

Add additional “using” statement for MatBlazor

@using MatBlazor

_Host.cshtml

@addTagHelper *, MatBlazor
@using EmbeddedBlazorContent

<head>
    <!-- static resources from dependent blazor libraries -->
    @Html.EmbeddedBlazorContent()
</head>

Application bar sample

In the NavMenu.razor file add:

<MatAppBarContainer>
    <MatAppBar Fixed="true">
        <MatAppBarRow>
            <MatAppBarSection>
                <MatIconButton Icon="menu"></MatIconButton>
                <MatAppBarTitle>Trade scanner</MatAppBarTitle>
            </MatAppBarSection>
            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
                <MatIconButton Icon="favorite"></MatIconButton>
            </MatAppBarSection>
        </MatAppBarRow>
    </MatAppBar>   
</MatAppBarContainer>

After compile your application should look something like :

Blazor components are encoded without namespaces, it means @addTagHelper and @using statements are in place and working.