Support the ongoing development of Laravel.io →

Run Laravel on your browser with Browser PHP

28 Feb, 2024 4 min read

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

Capsules Browser PHP Image 0

You will find a link to a CodeSandbox Demo or 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

Capsules Browser PHP Image 1

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 run 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

APP_URL="<https://localhost>::2222"

BROWSER_PHP_HOST="<https://localhost>"
BROWSER_PHP_PORT=2222

vite.config.js

server : { host : 'localhost' }

.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 }
    }
  }

Capsules Browser PHP Image 2

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.

Last updated 1 month ago.

driesvints liked this article

1
Like this article? Let the author know and give them a clap!
mho (MHO) Full time side project full stack web developer | designer Work @ http://capsules.codes

Other articles you might like

April 17th 2024

Using the "Conditionable" Trait In Laravel

Introduction Conditions are an integral part of any codebase. Without being able to conditionally ex...

Read article
April 17th 2024

Laravel Redis Throttle In Details: Tutorial

Redis Throttle is a fantastic feature provided by the Redis facade. It’s a convenient way to limit t...

Read article
April 15th 2024

Getting started with Laravel Reverb and Livewire

In the beginning of March (2024) Laravel reverb was released. Now it's officially released and go th...

Read article

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.