Now playing tile for Laravel Dashboard

May 3, 2020

The team at Spatie just launched a new dashboard package which let's users get custom dashboards with their own data up and running in less then minutes. This is something my team has been wanted to do but never had the time dedicated for the task! But thanks to this new tool we can get it online in no time!

My team and I were figuring out what "tiles" we wanted and Spotify was first on the list as we collectively listen to Spotify in our office so I started to get cracking and released the tile as a package for everyone to use on their own dashboards.


Installation

Once you have the spatie/laravel-dashboard package setup on your application please require the Spotify tile.

                    composer require ashbakernz/laravel-dashboard-spotify-tile
                

Open up the config/dashboard.php file and add this configuration in the tiles key.

                    'tiles => [
	...
    'spotify' => [
    	'client_id' => env('SPOTIFY_CLIENT_ID'),
        'secret' => env('SPOTIFY_SECRET'),
        'refresh_interval_in_seconds' => 60,
    ]
]

                

Setup the environment variables

Next up we are going to get our developer credentials from Spotify

Sign up at https://developer.spotify.com/dashboard and register your application:

Once you have setup your application please go to the spotify dashboard, Then edit settings on your application.

You will then need to add the following urls based on your environments to the "Redirect URIs " section and then hit save. This will allow us to authenticate correctly in the next step (please note this must be exactly the same as your APP_URL inside your .env).

Redirect URI example:

Add the tile to your dashboard

                    <x-dashboard>
    <livewire:spotify-tile position="a1:a1" />
</x-dashboard>

                

Open your dashboard in the browser and head to the /spotify/authorize route to give you application permission to use your Spotify account. You will need to do this on production when you first setup your dashboard.

After that you should be done, head back to your dashboard and you should see the tile working.