Using Blazor, you can build an interactive web application using C#. In this article, I will show you how to create a simple but blazing fast blog using [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor), [Tailwind CSS](https://tailwindcss.com/), and [Strapi](https://strapi.io/). We will be using Strapi, the leading open-source headless CMS, to store our posts and Blazor for the frontend. - [Live Demo](https://strapi-blazor-blog.netlify.app/) - [Strapi API Code](https://github.com/sumitkharche/strapi-blog-api) - [Blazor Client App Code](https://github.com/sumitkharche/strapi-blazor-blog) ## Prerequisites Before you can jump into this content, you need to have a basic understanding of the following. 1. Installed the latest [.NET Core SDK](https://dotnet.microsoft.com/download). 2. Install Blazor project templates 3. Basic knowledge of [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) 4. Basic understanding of Strapi - [get started here](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html). 5. Download and install [Node.js](https://nodejs.org/en/) ## What is Blazor? Blazor is a web framework from Microsoft which allows creating a web application using C# and HTML. If you are a developer using C# and want to build a blazing web application, you should check out Blazor. Accourding to Blazor's [docs](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor): “Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML. Microsoft is developing it. Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.” Blazor applications can run directly in the browser, C# code runs in the browser with the help of [webassembly](https://webassembly.org/) or can on the server-side, i.e., client-side code runs on the server-side and communicates with the browser by sending events using SignalR. So in this article, we will use Blazor Web assembly to create a client side-blog app. ## What is Strapi - A Headless CMS? Strapi is a leading open-source headless CMS based on Node.js to develop and manage content using Restful APIs and GraphQL. With Strapi, we can scaffold our API faster and consume the content via APIs using any HTTP client or GraphQL enabled frontend. ## Scaffolding a Strapi project To scaffold a new Strapi project is very simple and works precisely as installing a new frontend framework. We are going to start by running the following commands and testing them out in our default browser. ```bash npx create-strapi-app strapi-api --quickstart # OR yarn create strapi-app strapi-api --quickstart ``` The command above will scaffold a new Strapi project in the directory you specified. Next, run `yarn build` to build your app and `yarn develop` to run the new project if it doesn't start automatically. The last command will open a new tab with a page to register your new system admin. Go ahead and fill out the form and click on the submit button to create a new Admin. ## Build the Posts collection Next, we will create a new CollectionType that will store the details of each post. For instance, we will create a Collection Type called `posts` with fields like `title`, `content`, `author`, and `image`. To create our first CollectionType, log into the Admin dashboard and follow these steps. Click `Collection Type Builder` on the left side of the page. Click on `Create New Collection Type` still at the left side of the page and fill in `Posts` as the display name. Click on `Continue` to create a new `Posts` collection. That's the flexibility of Strapi. We need to fill the `Posts` collection with lots of post data. You can achieve this in two ways: using the Admin UI and using Strapi generated API. We will use the Admin UI to create a post (on it soon). Click on `Continue`, and it will present you with another modal to select fields for your Collection Type. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634984006866_image.png) Select `Text` and fill in `Title` in the Text field. Click on `Add another field` and select `Rich Text` for the `content` and again, Click on `Add another field` and select Media for the image field and finally select `Text` for Author field. After adding all the required fields, click on `Save` to save the collection and click on the `Posts` name on the left side. Next, click on the `Add New Posts` button to add a new post. So for this blog application, we will add a couple of posts. You can add any post of your choice and click on the Save and Publish buttons afterward. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634984384582_image.png) ## Setting up Blazor project We can create a Blazor project using two ways: 1. Using dot CLI commands 2. Using Visual Studio Editor ### 1. Using dot CLI commands Open a command prompt and go to the location where you want to create your Blazor project and run the below commands: ``` > dotnet new blazorwasm -o StrapiBlazorBlog > cd StrapiBlazorBlog > dotnet run ``` Now open the [http://localhost:5000/](http://localhost:5000/) to see the `StrapiBlazorBlogblazor` app. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634985041305_image.png) ### 2. Using Visual Studio Editor Open a visual studio editor, click on `Create new project`, and search for `Blazor`. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634985287835_image.png) Select `Blazor WebAssembly app` and click on the `Next` button. After that, provide a project name and click on the `Next` button. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634985433381_image.png) After that, click on the `Create` button. That's it, and you have successfully created a Blazor project. Now to run the app, click on the `IIS Express` button. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634985635573_image.png) You can see the app running as below: ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634985739780_image.png) ## Building a Blog Application Now we have created our Blazor project, so the next step is to create a blog application. ### Integrating Strapi API with Blazor App After creating the Cryptos collection successfully, it's time to allow public access to the collection because access will be denied if we try to access it with our public HTTP client. To allow public access, follow these steps to enable permissions and roles in the Strapi Admin dashboard. Click on the `Settings` item on the sidebar menu, then on the `Roles` item on the second sidebar menu that appears. On the right section, click on the `Public` item and scroll down. You will see all the APIs with their handlers. Click on the `Select all` checkbox and click on the `Save` button at the top. This setting will allow public access to all the Posts APIs in our Strapi project. So now, to access the posts, we have to use URLs such as `http://localhost:1337/posts`. In our Blazor project to store the Strapi API URL, create a new file **app settings.json** in the `wwwroot` folder and add the below code: ``` { "AppSettings": { "STRAPI_API_URL": "http://localhost:1337/" // replace your local strapi url } } ``` Create a folder called `Models` and create a class called `AppSettings.cs` inside it and add the below code: ``` namespace StrapiBlazorBlog.Models { public class AppSettings { public string STRAPI_API_URL { get; set; } } } ``` Now open the `Program.cs` file to add below code to which is required to read the data from the `appsettings.json` file anywhere in the application. ``` using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using StrapiBlazorBlog.Models; using System; using System.Net.Http; using System.Threading.Tasks; namespace StrapiBlazorBlog { public class Program { public static async Task Main(string[] args) { var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); await builder.Build().RunAsync(); } public static void ConfigureServices(IServiceCollection services) { // Example of loading a configuration as configuration isn't available yet at this stage. services.AddSingleton(provider => { var config = provider.GetService(); return config.GetSection("App").Get(); }); } } } ``` So we have set up the integration with Strapi API with the Blazor app. Now the next step is to create a component for our blog application. ## Display all blogs on the home page We are using [Tailwind CSS](https://tailwindcss.com/) to style our awesome blog. So open the `index.html` file and add below CDN: ``` ``` Create a class called `Post.cs` with the same property in our Strapi posts collection. ``` namespace StrapiBlazorBlog.Models { public class Post { public int Id { get; set; } public string Title { get; set; } public string Content { get; set; } public string Author { get; set; } public Image Image { get; set; } } public class Image { public string Url { get; set; } } } ``` Now open `Pages/inde.razor` file and add below code to show all the posts fetch from Strapi into our client app: ``` @page "/" @inject HttpClient Http @using Microsoft.Extensions.Configuration; @using Models @inject IConfiguration Configuration @if (allPosts == null) {

Loading...

} else {

Strapi Blazor Blog App

The perfect blog application starter build using leading open source headless CSM called Strapi and Blazor.

@foreach (var post in allPosts) {

@post.Title

}

} @code { private Post[] allPosts = null; public string strapi_api_url; protected override async Task OnInitializedAsync() { strapi_api_url = Configuration["AppSettings:STRAPI_API_URL"]; var url = "{STRAPI_API_URL}/posts"; allPosts = await Http.GetFromJsonAsync(url.Replace("{STRAPI_API_URL}", strapi_api_url)); if (allPosts != null && allPosts.Length >0) { foreach(var post in allPosts) { post.Image.Url = strapi_api_url + post.Image.Url; } } } } ``` Update the `Shared/NavMenu.razor` file to remove extra menu from sidebar. ```

StrapiBlazorBlog

``` Update `MainLayout.razor` file as below: ``` @inherits LayoutComponentBase

@Body

``` Now run the application and see the output as below: ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634993795450_image.png) Wow 👌👌 We have now displayed all our posts on the home page successfully. ## Display a single blog post So next part is when we click on the `Read more` button from each post, we have to display details of the particular post. So we will create a new page called `PostDetails.razor` under the Pages folder and below code: ``` @page "/post/{Id}" @inject HttpClient Http @inject NavigationManager NavigationManager @using System.Text.Json.Serialization @using Microsoft.Extensions.Configuration; @using Models @inject IConfiguration Configuration @if (postDetails == null) {

Loading...

} else {

@postDetails.Title

@((MarkupString)postDetails.Content)

} @code { [Parameter] public string Id { get; set; } private Post postDetails = null; public string strapi_api_url; protected override async Task OnInitializedAsync() { strapi_api_url = Configuration["AppSettings:STRAPI_API_URL"]; var url = "{STRAPI_API_URL}/posts/{Id}"; url = url.Replace("{STRAPI_API_URL}", strapi_api_url); url = url.Replace("{Id}", Id); postDetails = await Http.GetFromJsonAsync(url); if (postDetails != null) { postDetails.Image.Url = strapi_api_url + postDetails.Image.Url; } } private void NavigateToIndexComponent() { NavigationManager.NavigateTo(""); } } ``` Now rerun the app and click on the `Read More` button from any post, and you will see details of that post. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1634996931784_image.png) ## Deployment Now we have our Strapi backend API and our Blazor frontend app. So we will deploy strapi to Heroku and the Blazor app to Netlify. To deploy Starpi API on Heroku, check out this [article](https://strapi.io/blog/deploying-a-strapi-api-on-heroku). We can now deploy our Blazor application on any hosting platform. We are deploying our app on [Netlify](https://www.netlify.com/) using Github Actions. 1. First, create a repo in GitHub and commit your code to that repository. 2. Login to Netlify and create a new site. 3. We need a Personal Access Token and Site Id to deploy our app to Netlify. So Go to Profile and generate a Personal Access Token. ![](https://res.cloudinary.com/practicaldev/image/fetch/s--gjBuRBkE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.cosmicjs.com/e37c4ff0-fa64-11ea-ac76-ed0a0ac0571c-access-token.PNG) Go to a new site created in Netlify and navigate to site details and copy the AppId. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1635010296013_image.png) Go to repository settings → Click on Secrets → add the above two secrets. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1635010634194_image.png) The next step is to create a Github action. So click on Actions and then select New Workflow and select the .NET Core template. After that, add the below code to the `yml` file. ``` name: .NET on: push: branches: [ master ] pull_request: branches: [ master ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup .NET uses: actions/setup-dotnet@v1 with: dotnet-version: 5.0.x - name: Restore dependencies run: dotnet restore - name: Build run: dotnet build --configuration Release --no-restore - name: Publish Blazor webassembly using dotnet #create Blazor WebAssembly dist output folder in the project directory run: dotnet publish -c Release --no-build -o publishoutput - name: Publish generated Blazor webassembly to Netlify uses: netlify/actions/cli@master #uses Netlify Cli actions env: # These are the environment variables added in GitHub Secrets for this repo NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} with: args: deploy --dir=publishoutput/wwwroot --prod #push this folder to Netlify secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]' ``` After deployment you can see the site as live. ![](https://paper-attachments.dropbox.com/s_7B915BA17A20925DDCD3A880AE89946807D8A9C38702128574A00FF9B3FB24F0_1635011389468_image.png) ## Conclusion This article demonstrated how to build a simple blog application using Blazor for frontend and Strapi as the Backend. Strapi has lots of integration with other frameworks, so please check out [Strapi blog](https://strapi.io/blog) for more information. Let me know you have any suggestions and what you will be building with the knowledge.

Sumit Kharche

How to Build a Blog App Using Blazor WASM and Strapi

Join our Newsletter