Preview mails, notifications in the browser
Hello, been troubled with debugging the look and feel of your emails or notifications in Laravel. There is a way to render/preview your mailable blades right from the comfort of your browser, 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@component('mail::message') # Introduction The body of your message. @component('mail::button', ['url' => '']) Button Text @endcomponent Thanks,<br> {{ config('app.name') }} @endcomponent |
Routes:
Laravel 5.5+
|
1 2 3 |
Route::get('/receipt-mail', function () { return new \App\Mail\SalesReceipt(); }); |
Laravel 5.4
|
1 2 3 4 |
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
Mailable:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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; /** * @var string */ protected $url; /** * Create a new message instance. * * @return void */ public function __construct($url = '') { $this->url = $url; } /** * Build the message. * * @return $this */ public function build() { return $this->markdown('mails.sales.receipt', [ 'url' => $this->url, ]); } } |
Markdown:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@component('mail::message') # Introduction The body of your message. @component('mail::button', ['url' => $url]) Button Text @endcomponent Thanks,<br> {{ config('app.name') }} @endcomponent |
Laravel 5.5+
|
1 2 3 4 5 |
Route::get('/receipt-mail', function () { $url = 'http://localhost:8000/sales/receipt/123456'; return new \App\Mail\SalesReceipt($url); }); |
Laravel 5.4
|
1 2 3 4 5 6 7 8 9 |
Route::get('/receipt-mail', function () { $url = 'http://localhost:8000/sales/receipt/123456'; $markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown')); return $markdown->render('mails.sales.receipt', [ 'url' => $url, ]); }); |
Note: Don’t indent your markdown blades in the IDE, it may be rendered wrongly.
That’s all. Stay tuned for more…
