Preview mails, notifications in browser

Hello, been troubled with debugging the look and feel of your emails or notifications in Laravel. There is a way to render/preview you mailable blades right from the comfort of your broswer, without first sending out the actual email.

Let’s create a sales receipt mailable.

php artisan make:mail SalesReceipt --markdown=mails.sales.receipt

The artisan command will create a Mailable class App\Mail\SalesReceipt and a markdown mail template resources/views/mails/sales/receipt.blade.php.

Mailable:

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class SalesReceipt extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->markdown('mails.sales.receipt');
    }
}

namespace App\Mail;

use Illuminate\Bus\Queueable;

use Illuminate\Mail\Mailable;

use Illuminate\Queue\SerializesModels;

use Illuminate\Contracts\Queue\ShouldQueue;

class SalesReceipt extends Mailable

{

use Queueable, SerializesModels;

/**

* Create a new message instance.

* @return void

public function __construct()

{

}

/**

* Build the message.

* @return $this

public function build()

{

return $this->markdown('mails.sales.receipt');

}

Markdown:

@component('mail::message')
# Introduction

The body of your message.

@component('mail::button', ['url' => ''])
Button Text
@endcomponent

Thanks,<br>
{{ config('app.name') }}
@endcomponent

@component('mail::message')

# Introduction

The body of your message.

@component('mail::button', ['url' => ''])

Button Text

@endcomponent

Thanks,<br>

@endcomponent

Routes:

Laravel 5.5+

Route::get('/receipt-mail', function () {
    return new \App\Mail\SalesReceipt();
});

Route::get('/receipt-mail', function () {

return new \App\Mail\SalesReceipt();

});

Laravel 5.4

Route::get('/receipt-mail', function () {
   $markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));
   return $markdown->render('mails.sales.receipt');
});

Route::get('/receipt-mail', function () {

$markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));

return $markdown->render('mails.sales.receipt');

});

Passing data to markdown blade

You may pass data the blade in the render(). Let take this example…

Markdown:

@component('mail::message')
# Introduction

The body of your message.

@component('mail::button', ['url' => $url])
Button Text
@endcomponent

Thanks,<br>
{{ config('app.name') }}
@endcomponent

@component('mail::message')

# Introduction

The body of your message.

@component('mail::button', ['url' => $url])

Button Text

@endcomponent

Thanks,<br>

@endcomponent

Laravel 5.4

Route::get('/receipt-mail', function () {
    $markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));
    return $markdown->render('mails.sales.receipt', [
        'url' => 'http://localhost:8000/sales/receipt/123456',
    ]);
});

Route::get('/receipt-mail', function () {

$markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));

return $markdown->render('mails.sales.receipt', [

'url' => 'http://localhost:8000/sales/receipt/123456',

]);

});

Laravel 5.5+

Route::get('/receipt-mail', function () {
    $receipt = new \App\Mail\SalesReceipt();

    return $receipt->markdown('mails.sales.receipt', [
        'url' => 'http://localhost:8000/sales/receipt/123456',
    ]);
});

Route::get('/receipt-mail', function () {

$receipt = new \App\Mail\SalesReceipt();

return $receipt->markdown('mails.sales.receipt', [

'url' => 'http://localhost:8000/sales/receipt/123456',

]);

});

Note: Don’t indent your markdown blades in the IDE, it may be rendered wrongly.

That’s all. Stay tuned for more…

Enter your keyword