description

page_type

languages

name

products

urlFragment

Samples to accompany the official Microsoft Blazor documentation.

sample

csharp

cshtml

Blazor sample applications

aspnet-core

blazor

blazor-samples

Samples to accompany the official Microsoft Blazor documentation

Samples in this repository accompany the official Microsoft Blazor documentation.

To obtain a local copy of the sample apps in this repository, use either of the following approaches:

Fork this repository and clone it to your local system.
Select the Code button. Select Download ZIP to save the repository locally. Extract the saved Zip archive (.zip) to access the sample apps.

Sample app article links

Blazor Server with EF Core: ASP.NET Core Blazor Server with Entity Framework Core (EFCore)
Blazor with SignalR: Use ASP.NET Core SignalR with Blazor
Blazor WebAssembly scopes-enabled logging: ASP.NET Core Blazor logging: Client-side log scopes
Blazor WebAssembly with ASP.NET Core Identity: Blazor WebAssembly with ASP.NET Core Identity

Snippet sample apps for article code examples

WARNING: Always follow an article's security guidance when implementing sample code.

Prior to the release of .NET 8, snippet sample apps for Blazor Server and Blazor WebAssembly provide the code examples that appear in Blazor articles. Many of the components in the snippet sample apps compile and run if copied to a local test app. However, the entire snippet sample apps aren't meant to be runnable demonstration sample apps, and not all of the components are completely functional. The purpose of the snippet sample apps prior to .NET 8's release is merely to supply code examples to documentation.

For the release of .NET 8 (and later releases), the sample apps for Blazor Web App and Blazor WebAssembly both supply snippets to articles and are fully working demonstration sample apps. All of the components in these apps function normally.

Blazor snippet sample apps

Blazor Web App (.NET 8 or later)
Blazor Server (.NET 7.0 or earlier)
Blazor WebAssembly

Community help and support

For more information, see the Support requests section in the Blazor Fundamentals overview article.

Intro to Web Development with .NET

Welcome to the Intro to Web Development with .NET GitHub repository! We’re excited to take you along with us as we build awesome projects and learn all about the wonderful world of web development.

Here, you'll find a 6-part series of lessons and projects to get you started building web applications with .NET!

Note The content in this repo is part of a free, 6-part e-mail series that will teach you something new every week. The e-mails include introductions to the content in these lessons. If you came here directly and haven't signed up for the e-mails, you can do that here: https://aka.ms/WebLearningSeries/signup

Video Introduction

🎥 Click the image above for a video about the series!

How-to

To use this curriculum on your own, fork the entire repo and go into the numbered folders to access the lessons and projects. This series is designed to take 6 weeks, about 1 week per lesson, but feel free to complete it at your own pace.

Codespace

You can also complete the lesson from your browser using GitHub Codespaces. To open a Codespace, simply select the green Code button. Then click the + to create a Codespace on the main branch.

Lessons

	Lesson Name	Learning Objectives	Linked Lesson
01	Welcome	Introduction to C#, .NET, and web development with .NET	Welcome to the Intro to Web Dev with .NET series
02	C#	A quick runthrough of C# attributes, syntax, and OOP	C# Crash Course
03	Razor Pages	Learn about ASP.NET Core, Razor Pages, and build a pizza website 🍕	Build a Pizza Website with Razor Pages
04	Minimal APIs	Build a Minimal API backend for your pizza website	Build an HTTP backend with Minimal APIs
05	Blazor	Learn Blazor and build an interactive Connect Four game	Introducing Blazor Web Applications
06	Publish to Azure	Learn how to publish your project to the cloud☁️	Publish your Web App to Azure

Open in Codespaces

You can open this repo in GitHub Codespaces without installing anything on your computer.

Help Resources

There's a few places you can go for help and more information on the topics covered in this repository.

Documentation

Beginner Video Series

How to leave feedback

To leave us feedback on this learning series, please fill out our survey or file an issue in this repository.

Learn More & Connect with us

Start a .NET Learning Path

Find a .NET user group & join a .NET events at our Community Page.

.NET Foundation

.NET Interactive Notebooks for C# is a .NET Foundation project.

There are many .NET related projects on GitHub.

.NET home repo - links to 100s of .NET projects, from Microsoft and the community.
ASP.NET Core home - the best place to start learning about ASP.NET Core.

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information, see the .NET Foundation Code of Conduct.

arkada38 / AAA.md

Using Tailwind CSS v3.2 with Blazor (.Net 6 or above)

This method works for Blazor Server and Blazor WebAssembly with hot reload, style isolation and tailwind jit compilation.

Setup with using Standalone Tailwind CSS CLI without Node.js

For this method you need added to path Tailwind CSS CLI binary. Read more about Standalone CLI.

Just create a StaticAssets folder in the root of your project with next structure.

StaticAssets
├──styles.css
├──tailwind.config.js
└──TailwindCli.targets

Import TailwindCli.targets into your .csproj file.

<Project Sdk="Microsoft.NET.Sdk.Web">

  ...

  <Import Project="StaticAssets\TailwindCli.targets" />

</Project>

Change your Pages/_Layout.cshtml file if you are using Blazor Server
or wwwroot/index.html file if you are using Blazor WebAssembly.
Add css link

<link href="css/styles.css" rel="stylesheet" />

Run this command in the terminal (change {ProjectDirectory} to project directory). Actualy you can see the text of this command after calling dotnet build, dotnet run or dotnet watch.

cd {ProjectDirectory}/StaticAssets/ && tailwindcss -i styles.css -o {ProjectDirectory}/wwwroot/css/styles.css -w

If you are using github workflows with your project then you need to add additional step.

---
- name: Setup Tailwind CSS
  run: |
    curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
    chmod +x tailwindcss-linux-x64
    sudo mv tailwindcss-linux-x64 /usr/bin/tailwindcss

Setup with using Node.js and npm

Just create a StaticAssets folder in the root of your project with next structure.

StaticAssets
├──package.json
├──styles.css
├──tailwind.config.js
└──TailwindNpm.targets

Import TailwindNpm.targets into your .csproj file.

<Project Sdk="Microsoft.NET.Sdk.Web">

  ...

  <Import Project="StaticAssets\TailwindNpm.targets" />

</Project>

Change your Pages/_Layout.cshtml file if you are using Blazor Server
or wwwroot/index.html file if you are using Blazor WebAssembly.
Add css link

<link href="css/styles.css" rel="stylesheet" />

Run this command in the terminal (change {ProjectDirectory} to project directory). Actualy you can see the text of this command after calling dotnet build, dotnet run or dotnet watch.

cd {ProjectDirectory}/StaticAssets/ && npx --no-install tailwindcss -i styles.css -o {ProjectDirectory}/wwwroot/css/styles.css -w

himyjan / blazor-stylish-front-end Goto Github PK

blazor-stylish-front-end's Introduction