Running and debugging PHP code in the browser with Blazor¶
PeachPie offers many practical use-cases for both PHP and .NET developers, but some use-cases are a bit more mind-blowing than others. In this article, we’ll discuss how to create websites in PHP and run them on the client side using web assembly and Blazor.
What on earth is this about?¶
In this post, we combine several technologies: PHP as a scripting language, Blazor as .NET’s framework to write web apps in C# and HTML, web assembly (WASM) as the means with which scripts can be executed within the browser on the client side, and of course PeachPie – the PHP compiler and runtime for .NET.
Our goal here is to allow developers to write scripts in PHP and execute them right in the browser. Why? Here’s why:
- Executing PHP on the client side is extremely fast and saves server resources. The scripts are downloaded once and after that, there is literally no overhead.
- You have a Blazor website and want to write a part of the website in the PHP language.
- You want to use PHP libraries on the client side.
- Your company has both PHP and Blazor guys – this way they can work together to make an awesome website using .NET and PHP.
- For kicks and giggles.
How to do it¶
In order to get started with PHP on the client side, we’ve created a library (Peachpie.Blazor) and SDK (Peachpie.Blazor.Sdk) to work with PeachPie and Blazor.
The first thing you need to do is install the Peachpie.Templates by running the following command
dotnet new -i "Peachpie.Templates::*"
Next, you can choose from one of two pre-configured templates:
- blazor-hybrid: A simple PHP website running in the browser
- blazor-web: A simple Blazor website combining PHP and Razor pages
Now you’re ready to create the project:
dotnet new project-name
When you’re done, you can add Razor pages to BlazorApp.Cient or even create PHP scripts by adding them to PHPScripts (this, however, is optional).
Finally, launch the Blazor.Server with the command
dotnet run --project BlazorApp\Server
and you’re almost done. When you’re ready, navigate to https://localhost:5001 and check out the result!
Features¶
Currently, this project is still in its infancy, but it already supports a fairly extensive list of features. The API and functionality might still change to improve the advantages, but here’s what should already work out of the box:
- Transparent navigation of PHP scripts by URL
- Transparent rendering of HTML pages generated from PHP
- Full support of $_GET, $_POST, and $_FILES
- Simulation of a server on the client side
- Forms are handled by PHP on the client side
- Possibility of persistent PHP context to save the client session on the client side
- Inserting PHP scripts to Razor pages
- PHP, C#, JavaScript interoperability
Debugging¶
Another very neat feature of this setup is the possibility to debug PHP code that runs in the browser directly in Visual Studio. To try this, run the Blazor.Server in DEBUG mode and set the breakpoint to any line in your PHP code. The Peachpie.Blazor.Sdk then sets up the environment to enable PHP debugging.
Not only can you debug, but since PhpComponent and PhpScriptProvider have many stages, we provide helpful logs describing the behavior of the components. Logs are displayed in the browser console by default. If you want to prohibit logging, just add the following to Program.cs in the Blazor.Client project:
builder.Logging.SetMinimumLevel(LogLevel.None);
What's next¶
Currently, this project is rather experimental, but there are many improvements we could make. For example, we could make rendering with the PhpScriptProvider efficient enough in order to remove PhpComponent and make the usage even more transparent.
Alternatively, we could even use this technology to move entire WordPress sites to the client side – in order to do so, we have to figure out a way of adding support for databases.
If you have any issues or improvement suggestions or would like to help out with the development of this concept, feel free to contribute to the repo: