Skip to content

The frontier between your Laravel app and your decoupled frontend

License

Notifications You must be signed in to change notification settings

edersoares/frontier

Repository files navigation

Frontier

Tests License

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.

About

The frontier between your Laravel app and your decoupled frontend

Resources

License

Stars

Watchers

Forks

Packages

No packages published