Frontier

The frontier between your Laravel app and your decoupled frontend.

Frontier allows you to run your favorite frontend framework and to serve the initial page by the backend, like a proxy.

It's great for anyone using custom domains to test their applications or running multiple frontends that use the same backend. You will be able to test your app using cookies, sessions and avoiding CORS "same source" issues.

Installation

Just install dex/frontier into your Laravel app and configure some environment variables.

composer require dex/frontier

Environment variables

You can configure your frontend using some environment variables described below.

Variable	Description	Default
FRONTIER_TYPE	Define type of controller http, proxy or view	view
FRONTIER_ENDPOINT	Endpoint where the frontend will run	frontier
FRONTIER_VIEW	Default view that will be rendered or url of the server	frontier::index
FRONTIER_VIEWS_PATH	Directory where all the views are	frontier/resources/html
FRONTIER_FIND	Content that will be replaced
FRONTIER_REPLACE_WITH	Content that will be the replacement
FRONTIER_PROXY	URIs that you will do proxy
FRONTIER_CACHE	When http type, indicates se cache will be do	true
FRONTIER_PROXY_HOST	url of the assets server
FRONTIER_PROXY_RULES	Proxy rules

Frontend types

You can use 3 different types of frontend http, proxy or view.

HTTP

Use in FRONTIER_VIEW the URL of your frontend server.

Proxy

Use in FRONTIER_PROXY_HOST or FRONTIER_VIEW the URL of your frontend server.

FRONTIER_VIEW will be removed in the future.

View

Use in FRONTIER_VIEW the name of your view that you initialize your frontend, this is relative a Blade views.

Examples

Vite and Vue.js

When using Vite and Vue.js you can start your project with these environment variables using http approach.

FRONTIER_ENDPOINT=/vue
FRONTIER_TYPE=http
FRONTIER_VIEW=http://localhost:5173/
FRONTIER_FIND=/@vite/client,/src/main.ts,/vite.svg
FRONTIER_REPLACE_WITH=http://localhost:5173/@vite/client,http://localhost:5173/src/main.ts,http://localhost:5173/vite.svg
FRONTIER_PROXY=/vite.svg
FRONTIER_CACHE=false

Nuxt.js

When using Nuxt you can start your project with these environment variables using proxy approach.

FRONTIER_PROXY_HOST=http://localhost:3000
FRONTIER_PROXY_RULES=/_vfs.json::exact|/favicon.ico::exact::rewrite(/favicon.ico)|/__nuxt_devtools__/client/_nuxt/builds/meta|/__nuxt_devtools__/client::replace(/__nuxt_devtools__/client/_nuxt/)|/_nuxt|/_fonts|/::replace(/_nuxt/)

Multiple frontends

You can run multiple frontends, just create a custom configuration file.

php artisan vendor:publish --tag=frontier

The config/frontier.php file will be created in your Laravel app. This file contains some settings that can be replicated to add more frontends to your app.

License

Frontier is licensed under the MIT license. See the license file for more details.