On The Coding Machine site author Julien Neuhart has written up a tutorial showing how to create a single-page application using Symfony 4 along with Vue.js, the Vue router, Vuex and Axios.

With Symfony, I used to build my web applications in a traditional way: the framework handles everything, from the routing to the page rendering. However nowadays web applications have complex user interactions and the previous approach does not fit well for such cases. That's where single-page application architecture comes to the rescue.

The tutorial walks you through the creation of an application where users can post messages wrapped up in a nicer Docker-ized environment. He starts with the creation of the development environment and project structure including the Docker setup and installation of the needed dependencies. From there he starts in on the frontend, creating the Vue.js code for the application and moving to the backend for the initial Symfony index route. He shows the creation of the Vue routing, handing the requests in Symfony, the creation of the Post entities and API functionality.

The post also includes the addition of User entities with usernames/passwords for authentication and the Symfony routes to handle those requests. The tutorial ends with some improvements to the initial setup including user role addition, CSRF tokens, error messaging and other Docker customizations.

The CloudWays blog has a new tutorial posted that walks you through the process of getting a Laravel+Vue.js single page application running in less than an hour. The instructions for the server portion cover the use of CloudWays' service but they could be applied to any number of other hosting providers.

Laravel has become the most popular choice for developing PHP projects. One important reason for this popularity is the built in support for Vue.js, a very fast growing JavaScript library for developing impressive front-ends.

This combination results is fast, secure and very impressive applications that need minimum time to go from ideation to final code review. The support for Vue.js means that Laravel developers could use Vue components easily within their apps without wasting time in writing integrations for the components. To demonstrate the support, I decided to create a single page application in Laravel with a Vue.js powered frontend.

They start off with a list of prerequisites (software to have installed) and then move on to setting up the database and creating a "tasks" migration. The tutorial then covers building out the authentication handling (via artisan) and the creation of the "task" model and controller. With all of that in place it starts in on the backend functionality to read, create, update and delete the tasks. Next it moves to the frontend showing how to create the Vue.js components required and integrating the Javascript into the view to link it to the backend for managing the tasks.

The Laravel News site is back with the latest part in their series covering the combination of Laravel and Vue.js to create a basic application. In this latest part (part 3) they continue from the previous tutorials and show how to pull in real data versus the fake data from before.

We will continue building our Vue SPA with Laravel by showing you how to load asynchronous data before the vue-router enters a route.

We left off in Building a Vue SPA With Laravel Part 2 finishing a UsersIndex Vue component which loads users from an API asynchronously. We skimped on building a real API backed by the database and opted for fake data in the API response from Laravel’s factory() method.

If you haven’t read Part 1 and Part 2 of building a Vue SPA with Laravel, I suggest you start with those posts first and then come back. I’ll be waiting for you!

In this tutorial, we are also going to swap out our fake /users endpoint with a real one powered by a database.

They get immediately back to the code, creating a "user" table seeder to generate randomized data and adding it for execution. Next, they switch to the database side, creating the MySQL database for the user data and running the seeding to create the users. The tutorial then shows the creation of the Users controller and what the resulting JSON will look like when pulling all users. Finally, it moves out to the client side and shows how to pull in the data pre-load and push the user details into a template to be rendered.

On the Laravel News site there's a new tutorial posted showing you how to create a Vue.js single page application with Laravel for when you have API-driven applications.

Building a Vue single page application (SPA) with Laravel is a beautiful combination for building clean API-driven applications. In this tutorial, we show you how to get up and running with Vue router and a Laravel backend for building a SPA. We will focus on the wiring up all the pieces needed, and then in a follow-up tutorial, we will further demonstrate using Laravel as the API layer.

They walk you through the creation of a simple SPA that will render the initial content and allow for the browsing back and forth between content without a page reload. The tutorial helps you get all required libraries installed and includes the code to define the Vue router and two routes. The contents of the .vue files are also included as well as the server-side code to power the application.

Phillip Shipley has a post to his site for the AWS and Cloudflare users out there (or those that want to use these together) about an easy way to automatically deploy static sites.

Managing web servers can be a lot of work. Especially when it comes to configuring and maintaining SSL certs, server and software updates, etc. Let’s Encrypt has made the SSL part a lot easier, but it is still work and to me feels like overkill for something as simple as a static single-page-application. Especially when there are dead simple solutions like Amazon S3 that can be used to host and scale a static website without any server configuration or maintenance. Adding CloudFront with a free SSL certificate from Amazon’s Certificate Manager service make SSL painless too.

[...] In this article I’ll cover how to use Codeship’s continuous integration and deployment service to build/test your app, deploy it to S3, and then clear cached versions of it from CloudFront and Cloudflare.

He then shows how to use the Codeship service to do the actual deployment, broken down into a few steps:

• Step 1: Setting up project in Codeship
• Step 2: Configure Tests
• Step 3: Configure Environment Variables
• Step 4: Configure Deployment

Each step includes both screenshots and configuration examples you'll need to get the workflow set up and running for your site.

The NetTuts site has posted the first part of a tutorial series showing you how to create an application with Laravel and AngularJS to do some customer management. The application lets you track customers and transactions related to them.

When creating a single-page app we should use some kind of framework to do some of the job for us so we can focus on the actual functionality. AngularJS fits here perfectly, because features like dynamic dependency injection and bi-directional data binding are just great. Sometimes we also require some kind of server. If you've chosen PHP then Laravel may be your best option, as it's easy to work with and pretty powerful. In this part of the tutorial, we will build the front-end of our application using AngularJS.

He starts with some of the "preparation work" that has to be put into the main template for Angular to even work, including the loading of the Angular files themselves. He sets up a basic route and, some initial styling (CSS) and talks about the overall structure of the application. He includes the code to create the customer controller and transactions handling (via controllers) and how to do the usual CRUD (create, read, update, delete) operations for each. HTML output templates are also included to handle the forms and other tabluar output needed to display customer details.

Ryan Malesevich points out a very simple, one-script solution to the common need for an image gallery for your website - SimpleView Gallery - that a friend of his has written up.

In my post that I wrote that I would be back for good this time, I mentioned that I was going to be working on a gallery script. My good friend Chris let me know that he also wrote a simple script viewer that works quite while. His script is SimpleView Gallery and it requires to modification for it, just upload the script to a directory that contains images and that's it.

He also mentions a small change he made to make it work with WordPress and it's automatic thumbnailing system (to hide those thumbnails).

Ryan Malesevich points out a very simple, one-script solution to the common need for an image gallery for your website - SimpleView Gallery - that a friend of his has written up.

In my post that I wrote that I would be back for good this time, I mentioned that I was going to be working on a gallery script. My good friend Chris let me know that he also wrote a simple script viewer that works quite while. His script is SimpleView Gallery and it requires to modification for it, just upload the script to a directory that contains images and that's it.

He also mentions a small change he made to make it work with WordPress and it's automatic thumbnailing system (to hide those thumbnails).