Send backend data to frontend for Laravel applications

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.

Install

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.

Usage

At backend

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

<?php

backToFrontStack();

or getting object from service container:

<?php

use AvtoDev\Back2Front\Back2FrontInterface;

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

Methods

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.

<?php

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() !!}
    });
</script>

Or by blade-directive

@back_to_front_data('DATA_PROPERTY_NAME')

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="https://raw.githubusercontent.com/avto-dev/back2front-laravel/refs/heads/main/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

Example

At backend:

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

At frontend:

<script type="text/javascript">
    console.log(window.frontStack.get('user_id'));
</script>

Testing

For package testing we use phpunit framework and docker with compose plugin 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

Changes log can be found here.

Support

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

License

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