Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (152).NET Core  (26)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (29)Blazor  (107)DocIO  (20)Essential JS 2  (72)Essential Studio  (164)File Formats  (20)Flutter  (115)JavaScript  (150)Microsoft  (102)PDF  (59)React  (33)Succinctly series  (124)Syncfusion  (490)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (27)Windows Forms  (55)WinUI  (27)WPF  (123)Xamarin  (132)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (108)Chart  (53)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (50)Development  (263)Doc  (7)DockingManager  (1)eBook  (94)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (15)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (233)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (25)Performance  (7)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (29)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (10)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (65)UI  (139)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (13)Web  (227)What's new  (146)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Syncfusion Blazor Extension in Visual Studio Code for Mac: A Time-Saving Tool

Syncfusion Blazor Extension in Visual Studio Code for Mac: A Time-Saving Tool

Syncfusio’s Blazor Visual Studio Code Extension includes Blazor project templates, code snippets, conversion, and migration tools. It allows you to create a Blazor project using prebuilt templates. Now, the Blazor Extension in Visual Studio Code is also available for the Mac operating system.

In this blog, we will see how to use the Blazor Extension in Visual Studio Code for Mac OS to:

Prerequisites

The prerequisites for creating a Blazor application are:

Installing the Syncfusion Blazor extension

The Syncfusion Blazor extension for Visual Studio Code is available in the Visual Studio Marketplace.

Installing from Visual Studio Marketplace

To install the Syncfusion Blazor extension from the Visual Studio Marketplace, follow these steps:

  1. First, open Visual Studio Code.
  2. Then, open the Command Palette by navigating to ViewCommand Palette.
  3. Search for Install Extensions in the Command Palette and expand it when it appears.
  4. Search for Syncfusion Blazor in the search box to locate Blazor VSCode Extensions – Syncfusion.
  5. Then, install the Blazor VSCode Extensions- Syncfusion extension.

Installing from a VSIX package

To install the Syncfusion Blazor extension from a VSIX package, follow these steps:

  1. Download the Syncfusion Blazor VSCode extension from the Visual Studio Marketplace.
  2. Then, open Visual Studio Code.
  3. Now, open the Command Palette by navigating to View > Command Palette.
  4. Search for Install, and then click Install from VSIX in the Command Palette.
  5. Finally, select the Syncfusion Blazor Extension from the Browse options. Then, the extension will be installed.

Creating the Syncfusion Blazor application

The Syncfusion Blazor extension in Visual Studio Code for Mac helps developers to create Blazor applications with Syncfusion Blazor UI components, saving them significant time. To create an app, follow these steps:

  1. Open Visual Studio Code.
  2. Now, open the Command Palette by navigating to View > Command Palette.
    Open the Command Palette by navigating to View > Command Palette
  3. Select Syncfusion Blazor Template Studio: Launch by searching for Syncfusion Blazor in the search text box.
    Select the Syncfusion Blazor Template Studio Launch option
  4. Now, the Syncfusion Blazor Template Studio wizard will open. This UI design looks user-friendly and attractive. You can provide project-related details without any guidance or confusion via this UI design. It helps you easily select the application requirements. Provide the project name and location in which you want to store the application.
    Provide the project name and location
  5. Now, select the required Blazor application type:
  • Syncfusion Blazor Server App.
  • Syncfusion Blazor Web Assembly App.
    Select the required Blazor application type
    1. In the Configuration tab, choose the .NET Core version, a theme, HTTPS configuration, and Blazor Web Assembly project types (ASP.NET Core-hosted and Progressive Web Application). Then, click Create.
      In the Configuration tab, choose the .NET Core version and themes, and then click Create

      Note: In the Syncfusion Blazor Web Assembly App project type, we can choose ASP.NET Core-hosted, Progressive Web Application, or both.

  1. Once the project is created, the Creating Your Project dialog will appear. Click Open Project. Refer to the following screenshot.
    Click on the OpenProject button

Now, the Blazor application has been created with the required Syncfusion NuGet packages and the CDN links of the Syncfusion Blazor components.

Explorer window showing the created Blazor projectNow, you can develop your application with Syncfusion Blazor components. While creating the Syncfusion Blazor application, the code snippets for the Calendar, DataGrid, and Button components will be added by default. You can run these components without any change in the source file.

Note: Refer to the Creating a Syncfusion Blazor application documentation to render the code and run the application.

Debugging the application

The Debug and Release modes are configured while creating the project. So, you don’t need to configure them manually. When debugging a Syncfusion Blazor app, the NuGet packages will be automatically restored. Then, the app will be compiled and start to run in the default browser.

By default, the Blazor application runs in Debug mode. You can change it to Release mode by choosing the Debug option from the Debug tab or pressing the Ctrl+Shift+D shortcut key.

Debugging the Blazor application

Converting a Blazor application to a Syncfusion Blazor application

The Syncfusion Blazor conversion is an add-in for the Extension in Visual Studio Code for Mac. It converts an existing Blazor app into a Syncfusion Blazor web app by adding the required NuGet packages and themes. With this, you can easily add Syncfusion Blazor components to the app. To do so, follow these steps:

  1. Open an existing Blazor web app or create a new Microsoft Blazor web app in Visual Studio Code.
  2. Right-click on the Project file from Explorer (Workspace). Then, select Convert to Syncfusion Blazor App from the context menu. Refer to the following screenshot.
    Select the Convert to Syncfusion Blazor App… option
  3. Then, select the required Blazor version (which is published in the NuGet Gallery) from the dropdown that appears.
    Select the Blazor version from the dropdown
  1. Now, choose the required theme from the dropdown that appears.
    Choose the required theme from the palette

Now, the application is configured with the required Syncfusion Blazor NuGet packages and themes.

Note: For more details, refer to the Converting Blazor application to Syncfusion Blazor application documentation.

Migrating a Syncfusion Blazor application from one version to another

The Syncfusion Blazor migration is an add-in for the Extension in Visual Studio Code for Mac. It migrates a Syncfusion Blazor app from one version to another by changing the Syncfusion NuGet package version in the app. Follow these steps to migrate a Syncfusion Blazor app:

  1. Open an existing Syncfusion Blazor app or create a new Syncfusion Blazor app in Visual Studio Code.
  2. Right-click on the project file from Explorer (Workspace). Then, select Migrate Syncfusion Blazor App to another version from the context menu. Refer to the following screenshot.
    Select the Migrate Syncfusion Blazor App to another version… option
  1. Then, select the required Blazor version (which is published in the NuGet Gallery) from the dropdown that appears.
    Select the Blazor version from the dropdown

Finally, the Syncfusion NuGet packages references are updated to the selected version in the application.

Note: For more details, refer to the Upgrading Syncfusion Blazor application to the latest version documentation.

Conclusion

Thanks for reading! In this blog post, we have seen how to use our Syncfusion Blazor Extension in Visual Studio Code to create, convert and migrate a Blazor app in the MAC operating system. This will help you create attractive web applications with Syncfusion Blazor UI components in less time. Try out the procedures in this blog post and leave your feedback in the comments section below!

Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as Data GridCharts, and Scheduler to ease the work of developers. Try them out for yourself.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top