API Driven Development With Laravel and VueJS

About this series

The Evolution of Single Page Applications

I've recently had the opportunity to build a few single page applications using Laravel and VueJS and was blown away by the tools available to make this a possibility. I've been developing for awhile now and built a single page app before modern front end frameworks such as AngularJS, VueJS and React were available. It was a huge pain. When I was tasked to build another one, I wasn't pleased. However, the more research I did, and having some experience with VueJS I was blown away with the simplicity of the application. Throw Laravel at the backend duties and you will want to build a single page application. Laravel Passport sets up an out of the box oAuth server ready to be consumed by your front end javascript application. All it takes is a little configuration and you are ready to rock and roll. Hopefully this tutorial will help resolve any questions regarding API Driven Development.

Project Overview: Coffee Finder Application

Before I kick off this series, I want to explain the background of what we are building. I'm a coffee fanatic and I'm always looking for the newest micro roast or specialty brew to try. In this series we will be building an application to help coffee-holics find their fix. We will be implementing Google Maps, some GIS, a few social aspects, user submission process, and a whole bunch of cool features ending with a mobile app at the end. I like to approach app development with the mindset of "begin with the end in mind". Ask yourself, what do you want to build? It will help motivate and keep the momentum going. I definitely have more than enough ideas for loads of tutorials, so hopefully you will enjoy the ride and please, please provide feedback and updates.

Open Source and Resources

This tutorial will be 100% open source. All code for our application can be found here: https://github.com/serversideup/roastandbrew. Every feature added to the application will include a tutorial in this series. You can view the final application here: https://roastandbrew.coffee and soon hopefully download a mobile app. If you like the tutorial, sign up for our mailing list ServerSideUp Mailing List, we are writing a book on API Driven development and will dive in a lot deeper to the progress.

Why API-Driven Development?

A mobile app you ask? Well that brings me to the next point of why a single page application and API driven. I'll start with the API driven. The reason I like to develop API driven applications is because the data is consumable from practically anywhere whether you write the code or someone else does. This is HUGE for scaling purposes and code maintainability. With Laravel and Laravel Passport the process of setting up a secure oAuth server is insanely easy: https://laravel.com/docs/5.4/passport.

Why VueJS?

I chose VueJS for the setting up of the Single Page Application on the front end because I believe it is by far, hands down the most elegant javascript front end framework available. It's super easy to learn (check out https://laracasts.com/guide/learn-vue-2-step-by-step ), pick up, and implement. The main reason I'm writing this as a single page application and not just an API driven "normal" application is the ability to transfer it to a hybrid mobile app. Once I figured out how to do a few little tweaks you are able to literally copy and paste 99% of your code and you have a mobile application ready for the app store.

Getting Started

I'm looking forward to writing this tutorial series. It can be consumed in a modular way and tweaked to what you want, but this is my approach. The articles are in the order I published them, but feel free to jump around to what you need and of course ask questions as needed.

Pre-requisites

A functioning webserver with the ability to install Laravel 5.4 https://laravel.com/docs/5.4/installation.