Laravel package for sending data from backend to frontend over JavaScript object

v2.5.0 2021-04-05 05:02 UTC

This package is auto-updated.

Last update: 2022-06-05 07:49:20 UTC



Send backend data to frontend for Laravel applications

Version PHP Version Build Status Coverage Downloads count License

Package for sending data from backend to frontend JS variable.

Package a repository of the form "key" => "value" and methods for converting data to array and JSON.


Require this package with composer using the following command:

$ composer require avto-dev/back2front-laravel "^2.0"

Installed composer is required (how to install composer).

You need to fix the major version of package.

For publish config and assets execute in console next command:

$ php artisan vendor:publish --provider="AvtoDev\\Back2Front\\ServiceProvider" --force

This command will publish files ./config/back-to-front.php with basic setting for package and public/vendor/back-to-front/front-stack.js with JavaScript object for getting access to the data.


At backend

To get the stack object at backend you can use global helper:



or getting object from service container:


use AvtoDev\Back2Front\Back2FrontInterface;

/** @var Back2FrontInterface $service */
$service = resolve(Back2FrontInterface::class);

Back2Front object provides the following public methods:

Method Description
put($key, $value) Set variable in stack. Parameter key must be a string
get($key, [default]): mixed Get value by key
has($key): bool Check that key exists in storage
forget($key) Remove item from storage
toArray(): array Return data in array
toJson(): string Return data in JSON encoded

Also you can iterate object.

Back2Front supports dot notation in put, get, has and forget methods.


backToFrontStack()->put('user.name', 'John Doe');

At frontend will object:

    "user": {
        "name": "John Doe"

At frontend

For output data at frontend you should add following code in your blade-template (preferably in the section head of the resulting HTML document):

<script type="text/javascript">
    Object.defineProperty(window, 'DATA_PROPERTY_NAME', {
        writable: false,
        value: {!! backToFrontStack()->toJson() !!}

Or by blade-directive


It creates property with name equals DATA_PROPERTY_NAME for superg lobal object window with early added data.

Default value of DATA_PROPERTY_NAME is 'backend'. If you use custom value and want to use front-stack helper on frontend, than you need call window.frontStack.setStackName('custom_name'); before helper usage.

Package contains javaScript helper for access to data object.

Use it you may adding js file at page:

<script src="/vendor/back-to-front/front-stack.js" type="text/javascript"></script>

You also can use it as require.js dependency.

This creates window.frontStack object which provides following methods:

Method Description
get(key, [default]) Get value by key. Supports "dot" notation for access to items if in data contains multidimensional arrays. Returns undefined if item don't exists or default value if it set
has(key): bool Check that key exists in storage
all(): object Returns data object


At backend:

backToFrontStack()->put('user_id', $user->id);

At frontend:

<script type="text/javascript">


For package testing we use phpunit framework and docker-ce + docker-compose as develop environment. So, just write into your terminal after repository cloning:

$ make build
$ make latest # or 'make lowest'
$ make test

For testing JavaScript code using Mocha and Chai framework.

Run in console npm test. Coverage report will in coverage/coverage.json and in coverage/lcov-report/index.html for humans.

Changes log

Release date Commits since latest release

Changes log can be found here.


Issues Issues

If you will find any package errors, please, make an issue in current repository.


This is open-sourced software licensed under the MIT License.