Vue SPA from scratch using Laravel 5.7 backend

Yes, you were told it’ll be built from scratch. Here’s the thing. I will list step by step instructions to explain some of important updates whenever I make progress with this little toy project. So, feel free to check out this page later as this gets updated on a regular basis. hopely… though. Let’s start off with backend using the latest Laravel, which is 5.7.

Laravel installation

just for the record, I am using Laradock for the local development, which is not in the scope of this article.
composer create-project --prefer-dist laravel/laravel toy
then copy .env from .env.example and edit it to reflect your local development environment. then update composer.json to include;
"barryvdh/laravel-cors": "^0.11.2",
"laravel/socialite": "^3.0",
"spatie/laravel-query-builder": "^1.11",
"tymon/jwt-auth": "^1.0.0-rc.3"
then, go through the each of the followings one by one.
php artisan key:generate
php artisan jwt:secret
php artisan make:auth
php artisan migrate
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
php artisan vendor:publish --provider="Spatie\QueryBuilder\QueryBuilderServiceProvider" --tag="config"
update app/Http/Kernel.php to include;
protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];
Okay, so far the very basic of Laravel setup is completed. Thanks to Laravel, you can safely think the most of web development settings are in place and ready to go. But, as we are aiming at building a SPA. Let’s go further with tymon/jwt-auth package configuration for your API auth.

JWT configuration

update config/auth.php to change api guard
    'defaults' => [
            'guard' => 'api',
                // ...
        ],
        :
    'guards' => [
            // ...
        'api' => [
            'driver' => 'jwt',
            'provider' => 'users',
        ],
    ],

and add the following api routes; /routes/api.php
Route::group(['middleware' => 'auth:api'], function () {
    Route::post('logout', 'Auth\[email protected]');

    Route::get('/user', function (Request $request) {
        return $request->user();
    });
});

Route::group(['middleware' => 'guest:api'], function () {
    Route::post('login', 'Auth\[email protected]');
    Route::post('register', 'Auth\[email protected]');
    Route::post('password/email', 'Auth\[email protected]');
    Route::post('password/reset', 'Auth\[email protected]');
});
then, update User model to implement JWTSubject interface like so.
use Tymon\JWTAuth\Contracts\JWTSubject;
:

class User extends Authenticatable implements JWTSubject
:
    /**
     * @return int
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    /**
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}
then, update the following 4 controllers for jwt guard;
  • app/Http/Controllers/ForgotPasswordController.php
  • app/Http/Controllers/LoginController.php
  • app/Http/Controllers/RegisterController.php
  • app/Http/Controllers/ResetPasswordController.php
then remove app/Http/Controllers/HomeController.php and app/Http/Controllers/Auth/VerificationController.php. and finally, update RedirectIfAuthenticated.php as follows;
if (Auth::guard($guard)->check()) {
    return response()->json(['error' => 'Already authenticated.'], 400);
}
Now that you will be able to create a valid JWT token with your login credentials. Let’s try out with Postman. As you can see in the picture below, I could get a valid token. Sweet.

Further back-end considerations

We can remove web routes entirely from this project or define a catch-all route as follows. It’s just upto you.
Route::get('{any}', function () {
    return view('index');
})->where('any', '(.*)');
With this basic back-end scaffolding, we can now move on to the front-end part.

Fron-end setup

As you’ve already noticed, this project will exploit some of the best-known VueJS projects including; Let’s start off with vue-cli first;
npm install -g @vue/cli

Leave a Reply