marinasundstrom / headless-wordpress-blazor

Headless Wordpress with Blazor frontend

Headless WordPress with Blazor frontend

Frontend build with Blazor, using Wordpress, running on .NET, as a headless CMS,

Pre-configured for a containerized development environment using Docker Compose

Watch Demo Video

Features

• List excerpts of posts, and view full posts.
• Display a Menu/Navigation that has been defined in Wordpress.

Acknowledgements

Thanks to the guys at Iolevel, and the community, for the wonderful Peachpie PHP compiler, and Wordpress.NET.

And a special thanks to the Wordpress community for this awesome ecosystem

Screenshots

Frontend (Blazor)

Index	Post

Run the app with Docker Compose

This is the simplest way of running this project.

But you need to do the necessary configuration of Wordpress.

$ docker compose up -d

The Blazor Frontend is served at: https://localhost:5001/

While Wordpress is at: https://localhost:5005/.

Tip

** This seem to break the Gutenberg Editor since it is using the setting when sending requests to Wordpress. **

For convenience, you can change the Site Address (URL) in WP Admin (Settings > General) to be the address of the frontend. Now the links in WP Admin that lead to the frontend will be correct.

Manual installation

Create MySQL database

WordPress requires you to start your database server with a database in it. By default it expects a database server on localhost, port 3306, with a database named "wordpress".

You can use docker to quickly start a database server in virtual environment:

docker run -e MYSQL_ROOT_PASSWORD=password -e MYSQL_DATABASE=wordpress -p 3306:3306 -d mysql

Build & Run

Note, this is a regular ASP.NET web project. Building, running, debugging, and deploying the site take advantage of dotnet, optionally Visual Studio.

dotnet run

Configuration

The configuration itself serves as a demonstration of combining a legacy PHP application with .NET. The demo takes advantage of the ASP.NET Core configuration mechanism, namely the files appsettings.json, appsettings.deployment.json and appsettings.production.json. This allows for having a different configuration for each environment without the need of altering the source code of the project.

More on configuring WpDotNet on https://docs.peachpie.io/scenarios/wordpress/configuration/.

headless-wordpress-blazor's Issues

Create Post and PostList component

• Fetch and display Post by slug
• Fetch and display a list of Posts by type

Sliding window pagination

Fix it

Replacing the "more-link"

There is probably a more efficient way than using AngleSharp when replacing the href of the "more-link" that has been generated by Wordpress.

I have experimented with Regular Expressions, but with no success.

You could also configure Wordpress's URLs.

Update to the latest wordpress.net and .NET 6/7 ?

I am having the issue with making it work with the latest wordpress.net and the latest .NET's.
Also I am trying to set it on IIS but all I got is a white page.
Could You also add some note how to run it on IIS if there is something specific?
Thank You in advance!

Setup experience

Configure Wordpress without entering it.

Install and activate the required plugins.

Custom page with inline WP content.

Fully custom Blazor page with inline Wordpress content, using content areas.

Changes to WordPressPCL

I made some change to WordpressPCL, in order to add PaginationResult, to which resulted in this PR: wp-net/WordPressPCL#257

As of yet, the PR has not been reviewed, not merged, and there are some issues with the code.

I included a custom build WordPressPCL.dll containing the changes.

Make Menu templateable

<Menu Name="Main">
    <ItemTemplate Context="item">
        <li>
            <NavLink href="@item.Href">@item.Name</NavLink>
        </li>
    </ItemTemplate>
</Menu>

<Menu Name="Main" Context="items">
    <ul>
       @foreach(var item in items) 
       {
           <li>
               <NavLink href="@item.Href">@item.Name</NavLink>
           </li>
       }
    </ul>
</Menu>

Upgrade to .NET 6

Blazor

• Use error boundaries for when menu fails to load from Wordpress.

How to publish the project?

Hello, what is the right way to make the solution working online?

Should I publish app project to, lets say, blog.example.com (for admin purposes) and publish Frontend to example.com (for view purposes)? What options need to be configured?

I edited both appsettings.json files but without success so far.

Thank You!

Create component library

Reusable components. See also #8, #9, and #11.

• Menu
• Post
• PostList

Templates*

Use Bootstrap Icons ?

Display WP menu in frontend

In order to display the menu you need to define a custom endpoint serving the items.

https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/

https://wordpress.stackexchange.com/questions/209381/get-wp-navigation-menu-from-rest-api-v2

Rename Frontend