Run Laravel on your browser with Browser PHP
Tags: laravel, node, tutorial
Published: 2024-02-28 15:55:30

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

&nbsp;
&nbsp;

You will find a link to a [CodeSandbox Demo](https://codesandbox.io/p/devbox/github/capsulescodes/articles/tree/012-run-laravel-on-your-browser-with-browser-php) or the source code via this [Github Repository](https://github.com/capsulescodes/articles/tree/012-run-laravel-on-your-browser-with-browser-php). Learn more on [Capsules](https://capsules.codes/en/blog) or [X](https://x.com/capsulescodes).

&nbsp;
&nbsp;

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.

&nbsp;
&nbsp;

[Browser PHP](https://github.com/capsulescodes/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.

&nbsp;
&nbsp;

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.

&nbsp;
&nbsp;

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 :

&nbsp;
&nbsp;

Create a `temp` directory and install `browser-php` :

&nbsp;
&nbsp;

```bash
mkdir temp

cd temp

npm install browser-php
```

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

`temp/package.json`

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

&nbsp;
&nbsp;

```bash
npm run composer

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

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

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

```bash
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.

&nbsp;
&nbsp;

```bash
  ...

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

&nbsp;
&nbsp;

The Laravel project has been created ! 🎉

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

```bash
rm -rf temp 

cd laravel

npm install --save-dev browser-php
```

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

`laravel/composer.json`

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

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

`laravel/artisan`

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

umask(577);

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

...
```

&nbsp;
&nbsp;

```bash
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
```

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

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

> php
> php artisan key:generate

   INFO  Application key set successfully.
```

&nbsp;
&nbsp;

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

&nbsp;
&nbsp;

```json
"scripts" : {
    "serve": "serve",
}
```

&nbsp;
&nbsp;

```bash
npm run build && npm run serve

> build
> serve

   PHP server is listening on localhost:2222
```

&nbsp;
&nbsp;

![Capsules Browser PHP Image 1](https://capsules.codes/storage/canvas/images/5c3XHoRjHEn0t8OsqsXsOgG1Xj59D9BRE77i9D6z.png)

&nbsp;
&nbsp;

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 :

&nbsp;
&nbsp;

```bash
npm run install --save-dev browser-php
```

&nbsp;
&nbsp;

`package.json`

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

&nbsp;
&nbsp;

`.env`

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

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

&nbsp;
&nbsp;

`vite.config.js`

```javascript
server : { host : 'localhost' }
```

&nbsp;
&nbsp;

`.codesandbox/tasks.json`

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

&nbsp;
&nbsp;

![Capsules Browser PHP Image 2](https://capsules.codes/storage/canvas/images/l7TI5T3DHauL0EYsA4MvzyvItdPQeG7u2OJtlGLK.png)

&nbsp;
&nbsp;

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.

&nbsp;
&nbsp;

Glad this helped.