Laravel HTTP Response classes, to help you build a hybrid SPA!
You can install the package via composer:
composer require mustafarefaey/laravel-hybrid-spa
You can publish the config file with:
php artisan vendor:publish --provider="MustafaRefaey\LaravelHybridSpa\LaravelHybridSpaServiceProvider" --tag="config"
This is the contents of the published config file:
return [
/**
* This should be a full HTTP/HTTPS URL to your JS app.
* Example: 'https://example.com/app.js'
*/
'js-app-url' => '',
/**
* This should be an array of full HTTP/HTTPS URLs to your stylesheets.
* Example: ['https://example.com/app.css']
*/
'stylesheets' => [],
/**
* This should be the ID of the element that mounts the JS app.
* Example: 'app'
*/
'js-app-id' => '',
/**
* This must be a full qualified class path, that implements
* `MustafaRefaey\LaravelHybridSpa\RetrievesSharedState` interface
*/
'shared-state-handler' => '\\MustafaRefaey\\LaravelHybridSpa\\SharedState',
/**
* This is the name of the global JS variable, that will be injected with the shared state
* Example: '__SHARED_STATE__', will be exposed as `window.__SHARED_STATE__`
*/
'shared-state-variable' => '__SHARED_STATE__',
/**
* This is the name of the global JS variable, that will be injected with the page state
* Example: '__PAGE_STATE__', will be exposed as `window.__PAGE_STATE__`
*/
'page-state-variable' => '__PAGE_STATE__',
/**
* This is an array of arrays, to describe favicons
* Must be in this format:
* [
* ['href' => '', 'sizes' => '', 'type' => ''],
* ['href' => '', 'sizes' => '', 'type' => ''],
* ]
*
*/
'favicons' => [],
];
artesaos/seotools
package is used to set meta tags. Please check their configuration documentation.
Use this class in your controllers' actions to return a consistent JSON response.
use MustafaRefaey\LaravelHybridSpa\ApiResponse;
Use success
method When returning a successful response.
return ApiResponse::success();
data
: an array of any data, this will be json encoded.
messages
: an array of any messages, this will be json encoded.
HTTP status code
: by default this will be 200, unless you specify it.
return ApiResponse::success(array $data = [], array $messages = [], int $code = 200);
{
"status": true,
"data": [],
"success_messages": []
}
Use fail
method When returning a failure response.
return ApiResponse::fail();
data
: an array of any data, this will be json encoded.
messages
: an array of any messages, this will be json encoded.
HTTP status code
: by default this will be 400, unless you specify it.
return ApiResponse::fail(array $data = [], array $messages = [], int $code = 400);
{
"status": false,
"data": [],
"error_messages": []
}
Use this class in your controllers' actions to return an html page that loads the js app, passing it the initial page state.
If the request expects JSON response, it will return the page's state in an ApiResponse
.
use MustafaRefaey\LaravelHybridSpa\HybridResponse;
return HybridResponse::make(array $pageState = []);
- Inside head tag:
- Usually needed meta tags:
<meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="csrf-token" content="{{ csrf_token() }}" />
- Favicons: you can set them in the config file.
- SEO meta tags: This package uses
artesaos/seotools
package to set meta tags. Please review their documentation.
- Usually needed meta tags:
- Inside body tag:
- Div element that will mount the JS app: you can set its ID in the config file.
- 5 global JS variables:
window.__SHARED_STATE__
: This is where the shared state is injected.- You can rename this variable in the config file.
- To control its value, You can create a class that extends the
MustafaRefaey\LaravelHybridSpa\RetrievesSharedState
interface, then updateshared-state-handler
in the config file, accordingly.
window.__PAGE_STATE__
: This is where the page state is injected.- You can rename this variable in the config file.
window.__SKIP_LOADING_PAGE_STATE_ONCE__
: This variable is used to help the JS app to skip calling the backe-end for the page state, and usingwindow.__PAGE_STATE__
directly. Its initial value istrue
, and you should set it tofalse
once you usedwindow.__PAGE_STATE__
.window.__SESSION_SUCCESS_MESSAGES__
: This is where the session success messages are injected.window.__SESSION_ERROR_MESSAGES__
: This is where the session error messages are injected.
- The JS app script: you can set its URL in the config file.
composer test
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
This package uses the package artesaos/seotools to set meta tags.
The MIT License (MIT). Please see License File for more information.