Previewing Laravel markdown Notifications directly in your browser

Previewing Laravel markdown Notifications directly in your browser

Sometimes you want to develop beautiful notifications in HTML or markdown format. But how do you style them easily without having to send them every time you've changed something? Laravel offers an out of the box solution for this

Preview your notifications easily with just a couple of lines of code. In your web.php you can easily return a notification to render it and display it in your web browser.

Let's code!

If you'd like to try this with an easy example you can code along with me. First, we start with creating an example notification:

$ php artisan make:notification InvoicePaid

Secondly, we add the following lines to our web.php to be able to display the notification in our browser:

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
$router->get('/notification', function () {
    $notification = new \App\Notifications\InvoicePaid;
    return $notification->toMail('[email protected]');
});

As the title of this article might confuse, it sounds like we render a Notification, in this case, InvoicePaid. But what we're actually rendering here is the MailMessage we return in the toMail method.

Rendering markdown notifications

Laravel supports sending markdown notifications as well and it would be nice to be able to preview these as well in the browser. For this kind of notifications it requires a little bit more code:

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
$router->get('/notification', function () {
    $notification = (new \App\Notifications\InvoicePaid)->toMail('[email protected]');
    $markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));
    return $markdown->render($notification->markdown, $notification->data());
});

In this case, we use the \Illuminate\Mail\Markdown class to render the markdown to HTML. Go to /notification in your browser to see if it works!

(Bonus!) Rendering On-Demand Notifications

All objects which are using the Notifiable trait can be notified through their desired channel. This is a great out of the box feature from Laravel. But there are times that you'd like to send a notification to an email or mobile number which isn't a Notifiable instance (yet). Laravel calls these On-Demand Notifications. To render On-Demand Notifications in your browser we have the following workaround:

<?php
use Illuminate\Notifications\AnonymousNotifiable;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
$router->get('/notification', function () {
    $user = new AnonymousNotifiable;
    $notification = (new \App\Notifications\InvoicePaid)->toMail($user->route('mail', ['[email protected]']));
    $markdown = new \Illuminate\Mail\Markdown(view(), config('mail.markdown'));
    return $markdown->render($notification->markdown, $notification->data());
});

In the background, Laravel uses the AnonymousNotifiable class to send notifications on-demand.

laravel

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Php how to delete multiple rows through checkbox using ajax in laravel

In this article i will let you know to delete multiple rows through checkbox using ajax in laravel and before delete we will give a confirmation message.

How to Hire Laravel Developers and How Much Does It Cost.

Want to make the most out of the latest Laravel technology? Here is your guide on how to hire the best Laravel developer, and at the right price. 

How to perform migration rollback in laravel

Sometimes we need to rollback one specific migration. Here, in this article we will discuss about the migration rollback in laravel.

Laravel Development Company

Skenix Infotech is a top Laravel Website Development Company with Expert Laravel Developers that provides robust Laravel Development Services at fair costs.

5 Laravel’s Hidden Gems

Spread the love1. Stop on first validation error By default, Laravel will check for all validation rules and return a list of errors. But if you want to stop this process after first validation failure, that’s how you can achieve…Read More→