PHPackages                             pvtl/voyager-frontend - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. pvtl/voyager-frontend

AbandonedArchivedLibrary[Admin Panels](/categories/admin)

pvtl/voyager-frontend
=====================

The Missing Front-end for The Missing Laravel Admin.

1.0.2(5y ago)20952.4k↓33.3%87[1 issues](https://github.com/pvtl/voyager-frontend/issues)4MITPHP

Since Feb 9Pushed 4y ago21 watchersCompare

[ Source](https://github.com/pvtl/voyager-frontend)[ Packagist](https://packagist.org/packages/pvtl/voyager-frontend)[ RSS](/packages/pvtl-voyager-frontend/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (8)Versions (33)Used By (4)

**This repository is no longer actively maintained**

Voyager Frontend
================

[](#voyager-frontend)

[![Voyager Frontend Screenshot](/readme-intro.jpg)](/readme-intro.jpg)

**The Missing Frontend for The Missing Laravel Admin.**

This [Laravel](https://laravel.com/) package adds frontend views, routes and assets to a [Voyager](https://laravelvoyager.com/) project.

It comes with a basic structure for frontend layouts (eg. header, footer, etc) and theme assets using the [Foundation](https://foundation.zurb.com) framework.

Built by [Pivotal Agency](https://pivotal.agency/).

---

Prerequisites
-------------

[](#prerequisites)

- PHP >= 7.1.3
    - PHP extension `sqlite3` (required for `teamtnt/tntsearch`)
- Node & NPM
- Composer
- [Laravel Requirements](https://laravel.com/docs/installation)

---

Installation
------------

[](#installation)

**1. Install Laravel + Voyager***(Replace the $VARs with your own values)*

```
# 1.0 Install Laravel
composer create-project --prefer-dist laravel/laravel $DIR_NAME

# 1.1 Require Voyager
cd $DIR_NAME && composer require tcg/voyager

# 1.2 Copy .env.example to .env and update the DB & App URL config
cp .env.example .env

# 1.3 Generate a Laravel key
php artisan key:generate

# 1.4 Install Laravel frontend - Only on Laravel 7+
php artisan ui bootstrap --auth

# 1.5 Run the Voyager Installer
php artisan voyager:install

# 1.6 Create a Voyager Admin User
php artisan voyager:admin $YOUR_EMAIL --create
```

**2. Install Voyager Frontend**

```
# 2.0 Require this Package in your fresh Laravel/Voyager project
composer require pvtl/voyager-frontend

# 2.1 Run the Installer
composer dump-autoload && php artisan voyager-frontend:install

# 2.3 Build the front-end theme assets
npm install
npm run dev

# 2.4 Set the Laravel search driver in your .env
echo "SCOUT_DRIVER=tntsearch" >> .env
```

*Any issues? See [the troubleshooting section](#toubleshooting) below.*

### 'Got Cron'?

[](#got-cron)

This is a just a reminder to setup the standard Laravel cron on your server. The Voyager Frontend package has a few scheduled tasks, so relies on the cron running.

```
* * * * * php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1

```

---

Theme Development
-----------------

[](#theme-development)

#### SCSS & JS

[](#scss--js)

When you're ready to start styling your frontend, you can use the following commands after making updates to SCSS and/or JS files:

CommandDescription`npm run watch`Watches your `/resources/assets` for any changes and builds immediately`npm run dev`Builds SCSS/JS on demand`npm run prod`Builds SCSS/JS on demand, but this time, outputs minified results#### Overriding Views

[](#overriding-views)

Let's say you want to update the layout of the frontend header:

1. Create the directory `resources/views/vendor/voyager-frontend`
    - Any files you place in here will replace the default views that comes with this package
2. Copy the respective file from `vendor/pvtl/voyager-frontend/resources/views/` (in this case, the `partials/header.blade.php`) into the matching file structure and update

So now you'll have:

```
    /resources
        /views
            /vendor
                /voyager-frontend
                    /partials
                        /header.blade.php

```

And any changes made to `header.blade.php` reflect automatically on the site.

---

Thumbnails / Image Resizing
---------------------------

[](#thumbnails--image-resizing)

This package comes with an automatic image resize function. When you reference an image in your front-end blade templates, simply call something like:

```
{{ imageUrl($pathToImage, $width, $height, $config = ['crop' => false, 'quality' => 100] ) ?: '/default.png' }}

```

### "CDN" your images

[](#cdn-your-images)

The function will output an absolute URL, where the hostname will be `APP_URL` - however you can add a `ASSET_URL` variable to your `.env` file to use a different hostname.

---

Search
------

[](#search)

#### Generating Indices

[](#generating-indices)

This module contains a scheduled job to regenerate indices which will run automatically once you setup jobs for Laravel. If you need to test and re-generate search indices you can manually run the command `php artisan voyager-frontend:generate-search-indices`.

#### Configuring Search (Using Laravel Scout)

[](#configuring-search-using-laravel-scout)

By default this module includes "searching" the "Pages" and "Posts" Models out-of-the-box once you have defined the following variable in your `.env` file - [check out the Laravel Scout documentation](https://laravel.com/docs/5.5/scout):

```
SCOUT_DRIVER=tntsearch

```

You can however extend and define your own "Searchable" Models to include in your search results by attaching the "Searchable" trait to them.

```
class Page extends Model
{
    use Searchable;

    public $asYouType = false;

    /**
     * Get the indexed data array for the model.
     * @return array
     */
    public function toSearchableArray()
    {
        $array = $this->toArray();

        // customise the searchable array

        return $array
    }
}
```

Then you'll be able to hook into the search config and *merge* your "Searchable" Models in with the config key (preferably using a Servie Provider): `scout.tntsearch.searchableModels`.

```
$this->mergeConfigFrom(self::PACKAGE_DIR . 'path/to/config/scout.php', 'scout.tntsearch.searchableModels');
```

Your configuration file should contain values similar to this modules scout.php configuration:

```