Installing and Configuring Laravel For a Single Page Application

So in this article series, we will start by setting up a web app that allows for a consumable API in the back end and authentication with social providers. We will then move to a mobile app using Cordova and the same components we used. The app will be an SPA on the web side and the mobile side. When the web side is complete there should be very little configuration to transfer the app using the same components, styles, and structure to turn it into a mobile app. Of course there are a few tweaks that should be made, but we should be able to isolate those easily. This will allow for simultaneous development that’s easily transferred between web and mobile.

There are a lot of tutorials online on how to install Laravel, Passport and Socialite. The Laravel documentation does a damn good job of doing it, so I won’t go into too much detail, I will just discuss some of the discrepancies I’ve ran into and how we will configure the install for our needs.

The goal of the app we will be building will be to find local coffee roasters and specialty shops. I love coffee and am always looking for a new coffee shop or roast to try. It’s pretty simple, we will have a few entities such as users, coffee shops, tags, etc. The app will be called Roast and it will be hosted at https://roastandbrew.coffee. You can follow along with the GitHub code here: Roast and Brew Github.

Step 1: Install Laravel

For the most thorough documentation follow the instructions here: Installation – Laravel – The PHP Framework For Web Artisans. We are using the latest release of Laravel 5.4 as of 8/19/2017.

The app and all of the tutorials has been updated to Laravel 5.6 on 6/13/2018.

All I did was find the directory we are building our app in and run the following command:

composer create-project --prefer-dist laravel/laravel {directory_to_install_to}

On my development machine, I’m using roast.dev. After running that command you should see the nice Welcome to Laravel screen. Boom, Laravel installed!

Step 2: Clean up the install

I always start each app by cleaning up the Laravel install. Not much to do, just delete the default routes and some of the password controllers. We are doing 100% social auth so we shouldn’t use many of these.

Remove the app/Http/Controllers/Auth directory. We will be rebuilding the authentication with Socialite.
Remove the resources/views/welcome.blade.php file. That’s just the default welcome screen. We won’t be using that.

In the next tutorial we will set up all the JS and SASS configuration. Thanks to Laravel Mix this is a breeze.

Step 3: Add directories

Since we are building this around an API, I like to have separate directories for the controllers that function on the API vs the Web.

Create app/Http/Controllers/API directory which will house the API controller routes
Create app/Http/Controllers/Web directory which will house the Web controller routes.

If you have a marketing site, blog or something other than an app, I’d create directories for these as well.

Step 4: Add Views

We are doing a single page application, so we actually only need two views which is awesome! We will be using VueJS components and Vue Router to handle the multiple pages. All we need is one blade view to display the SPA.

Add resources/views/app.blade.php

This is what I have in my file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <link href="/css/app.css" rel="stylesheet" type="text/css"/>

        <link rel="icon" type="image/x-icon" href="/favicon.ico">

        <title>Roast</title>

        <script type='text/javascript'>
             window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
    </head>
    <body>

        <div id="app">
            <router-view></router-view>
        </div>

        <script type="text/javascript" src="js/app.js"></script>

    </body>
</html>

There are a few things to note with this file:
1. <meta name=“csrf-token” content=“{{ csrf_token() }}”>
This is one place that houses the CSRF token. This prevents cross site request forgeries. It’s also available in the window.Laravel object. We will be adding this to the Axios header on each request so it will prevent bad requests. We will also be using the auth:api middleware on API routes and the CreateFreshApiToken::class on the web routes (explained in the next section). This will provide the security for consuming our own API with our SPA.
2. <div id="app"><router-view></router-view></div>
This element contains the router view which will be populated with VueRouter when we begin to develop the SPA side of our application.
3. <link href="/css/app.css" rel="stylesheet" type="text/css"/> And <script type="text/javascript" src="js/app.js"></script>
These two files contain the compiled SASS and Javascript from Laravel Mix. You an change the name of these files and the location in your webpack.mix.js file which we will discuss when we configure the JS and SASS part of the app.

Add a login.blade.php file

This will display the log in screen and just links to the log in form. You can throw this into your SPA as well. I separate them on the Web side just to use Laravel’s middleware to block off the web app for authentication. On the mobile SPA side it will all be a part of the router.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Roast</title>

    </head>
    <body>
        <a href="/login/google">
            Log In With Google
        </a>
    </body>
</html>

That’s all I have for the login page. In the next tutorial we will set up our auth routes for Socialite.

Both of these files should be adjusted as needed to add any other scripts, styles, etc. I just included the bare bones set up.

Step 5: Add the Web Controller and Route

The web controller is pretty simple, it will simply return our app.blade.php file.

Add app/Http/Controllers/Web/AppController.php

<?php

namespace App\Http\Controllers\Web;

use App\Http\Controllers\Controller;

class AppController extends Controller
{
    public function getApp(){
        return view('app');
    }
}

It simply just returns our app view. Vue will be initialized and Vue/VueRouter will take care of the rest.

Add the route to access the app.

In /routes/web.php add the following route:

<?php

Route::get( '/', 'Web\AppController@getApp' )
      ->middleware('auth');

This will set up the controller to return the app view along with the middleware to block off by only authenticated users.

So now our initial Laravel set up is complete. The next step will be adding authentication which will be handled by Socialite and we will be installing Passport for our oAuth server. The app we have now doesn’t do anything right now beside block off a single route, but we are prepped for expansion!