Blog / Run Laravel on your browser with Browser PHP

Image used for article Run Laravel on your browser with Browser PHP

Run Laravel on your browser with Browser PHP




TL;DR: How to set up a Laravel project using only the Node Browser PHP and PHP WASM packages.




You will find the source code via this Github Repository. Learn more on Capsules or X.




First and foremost, it's worth mentioning that PHP is primarily a server-side scripting language, and this article may not appeal to purists. However, it stems from a simple question: How can a PHP script be executed on the client side? Browser PHP is the outcome of this reflexion.




Browser PHP provides a collection of commands to execute PHP from the Node command-line interface or to launch a PHP server from Node. Perfect for running a Laravel project in CodeSandbox, for example.




This package is experimental and under continuous development. It was created with the purpose of accessing PHP functionalities from a browser. Therefore, it is strongly recommended to use it exclusively in a development environment.




This article suggests creating a Laravel project without access to the PHP executable. Starting from the Browser PHP package and providing Composer. The steps are as follows :



Create a temp directory and install browser-php :



mkdir temp

cd temp

npm install browser-php




browser-php will install the composer binary in the vendor/bin directory.

Now, you need to make php and composer available to npm in the package.json file.



temp/package.json


  "scripts" : {
       "php" : "php",
       "composer" : "php --disable-functions vendor/bin/composer"
  }
  • disable-functions indicates to vendor/bin/composer that the functions proc_open, popen, curl_exec, and curl_multi_exec are inactive. In reality, they do not exist in php-wasm.




npm run composer

> composer
> php --disable-functions vendor/bin/composer

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.7.1 2024-02-09 15:26:28




With Composer now accessible, it's time to create a new Laravel project.



npm run composer create-project -- --no-scripts --ignore-platform-reqs laravel/laravel ../laravel
  • no-scripts helps to avoid a PHP not found error. The scripts listed in the composer.json file require the PHP executable.
  • ignore-platform-reqs silences errors related to the absence of PHP extensions.




  ...

  - Installing spatie/flare-client-php (1.4.4): Extracting archive
  - Installing spatie/ignition (1.12.0): Extracting archive
  - Installing spatie/laravel-ignition (2.4.2): Extracting archive
    0 [>---------------------------]    0 [->--------------------------]
65 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.




The Laravel project has been created ! 🎉



A few small tasks need to be done to apply browser-php to an existing Laravel project. The recently created project will serve as the base. However, initially, you need to delete the temp directory and install browser-php.



rm -rf temp 

cd laravel

npm install --save-dev browser-php




The scripts in the composer.json file can also be cleaned up.



laravel/composer.json


"scripts": {
    "post-autoload-dump": [
       "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump"
    ]
},




To be able to execute artisan, you need to apply a umask(577). This will give file permissions to artisan.



laravel/artisan


#!/usr/bin/env php
<?php

umask(577);

define('LARAVEL_START', microtime(true));

...


npm run php artisan inspire

> php
> php artisan inspire

  “ Act only according to that maxim whereby you can, at the same time, will that it should become a universal law. ”
  — Immanuel Kant




It's time to see the result of setting up the Laravel project. To do this, copy the .env.example file to .env and run the key:generate command using the newly accessible artisan.



cp .env.example .env && npm run php artisan key:generate

> php
> php artisan key:generate

   INFO  Application key set successfully.




The new script serve from browser-php will launch a PHP server on localhost:2222.



"scripts" : {
    "serve": "serve",
}


npm run build && npm run serve

> build
> serve

   PHP server is listening on localhost:2222






Great... But now, why? Well, to enable the visualization of Capsules Codes articles on CodeSandbox! And to launch a Laravel project on CodeSandbox, here are the steps to follow :



npm install --save-dev browser-php




package.json


"scripts": {
	  "dev": "vite",
	  "build": "vite build",
	  "php" : "php",
	  "serve" : "vite & serve",
	  "composer" : "php --disable-functions vendor/bin/composer"
},




.env


BROWSER_PHP_SERVER_HOST="https://localhost"
BROWSER_PHP_SERVER_PORT=2222




vite.config.js


server : { host : 'localhost' }




artisan


#!/usr/bin/env php
<?php

umask(577);

define('LARAVEL_START', microtime(true));

...




.codesandbox/tasks.json


{
    "$schema" : "https://codesandbox.io/schemas/tasks.json",
    "setupTasks" : [
        { "name" : "Install Node Dependencies", "command" : "npm install" },
        { "name" : "Install PHP Dependencies", "command" : "npm run composer install -- --ignore-platform-reqs --no-scripts" },
        { "name" : "Prepare Environment Variables", "command" : "cp .env.example .env && npm run php artisan key:generate" }
    ],
    "tasks" : {
        "dev" : { "name" : "Start Dev and PHP Server", "command" : "npm run serve", "preview" : { "port" : 2222 }, "runAtStart": true }
    }
}






And now, What about offering a demonstration of an issue or a pull request? A good demonstration may be worth more than a lengthy description.





Glad this helped.

v1.3.0

X IconGithub Icon