How to Deploy Laravel Application on AWS EC2 the Right Way

Are you tired of developing your Laravel application on your localhost? Do you want to see your application in the cloud? This might sound scary at the beginning, but in this tutorial, we will cover every step you need to follow up to deploy your app into your ec2 instance, so you can scale to million users with AWS Laravel applications.  
Now, let’s start deploying Laravel on AWS!

Link: https://dzone.com/articles/how-to-deploy-laravel-application-on-aws-ec2-the-r?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

7 Popular Website Development Frameworks of 2018

There are various frameworks out there. So making a choice can be tricky. This write-up is not out and out geeky and is written from the perspective of clients as well as developers. The motive is to help you make an informed decision while choosing the framework for building web applications.
The following questions are very pertinent:

Link: https://dzone.com/articles/7-most-popular-website-development-frameworks-of-2?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

The Ultimate Vue.js and Laravel CRUD Tutorial

CRUD (Create, Read, Update, and Delete) are the basic operations of data storage, and one of the first things you learn as a Laravel developer.
But what happens when you add a Vue.js single-page app as the front-end to this the stack? Suddenly you have to deal with asynchronous CRUD since operations now occur without a page refresh. This will require special attention to ensuring the state of the data is consistent in both the front-end and backends.

Link: https://dzone.com/articles/the-ultimate-vuejs-amp-laravel-crud-tutorial?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Advanced Server-Side Rendering With Laravel and Vue: Multi-Page App

A few weeks ago I wrote a tutorial on the new Vue server-side rendering capabilities for Laravel. That tutorial mostly focused on the set up of SSR in a Laravel environment and so I only had time to demonstrate a simple “Hello World" app with no significant features.
Now I want to build on that previous tutorial and demonstrate how to server render a Vue app that includes multiple pages with Vue Router since most of your Laravel projects will have more than one page.

Link: https://dzone.com/articles/advanced-server-side-rendering-with-laravel-amp-vu?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Vuebnb: A Full-Stack Vue.js and Laravel App

This year I’ve been writing a new book called Full-Stack Vue Web Development: Vue.js, Vuex, and Laravel. It’ll be published in early 2018 by Packt Publishing.
The book is centered around a case study project, Vuebnb, a simple clone of Airbnb. In this post, I’ll give a high-level overview of how it works so you get a sense of what’s involved in building a full-stack Vue/Laravel app from scratch.

Link: https://dzone.com/articles/vuebnb-a-full-stack-vuejs-and-laravel-app?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Reasons Why Laravel Is the Best PHP Framework in 2018

In 2018, the Laravel framework will be the best open source PHP framework available, thanks to Taylor Otwell who developed this magical web framework. 
In this post, we will talk about why we feel that Laravel is the best PHP framework in 2018. As of now, Laravel has 35,231 stars on GitHub. 

Link: https://dzone.com/articles/reasons-why-laravel-is-the-best-php-framework-in-2?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Server-Side Rendering With Laravel and Vue.js 2.5

Server-side rendering is a great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn’t get populated until JavaScript runs.
One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby, etc.

Link: https://dzone.com/articles/server-side-rendering-with-laravel-amp-vuejs-25?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Avoid This Common Anti-Pattern in Full-Stack Vue/Laravel Apps

If you want your Vue.js single-page app to communicate with a Laravel backend, you will, quite reasonably, think of using AJAX. Indeed, Laravel comes with the Axios library loaded in by default.
However, it’s not advisable to use AJAX to retrieve application state on the initial page load, as it requires an extra round-trip to the server that will delay your Vue app from rendering.

Link: https://dzone.com/articles/avoid-this-common-anti-pattern-in-full-stack-vuela?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Procedurally Generated Game Terrain with React, PHP, and WebSockets

Last time, I began telling you the story of how I wanted to make a game. I described how I set up the async PHP server, the Laravel Mix build chain, the React front end, and WebSockets connecting all this together. Now, let me tell you about what happened when I starting building the game mechanics with this mix of React, PHP, and WebSockets…

The code for this part can be found at github.com/assertchris-tutorials/sitepoint-making-games/tree/part-2. I’ve tested it with PHP 7.1, in a recent version of Google Chrome.

Making a Farm
“Let’s start simple. We have a 10 by 10 grid of tiles, filled with randomly generated stuff."
I decided to represent the farm as a Farm, and each tile as a Patch. From app/Model/FarmModel.pre:
namespace App\Model;

class Farm
{
private $width
{
get { return $this->width; }
}

private $height
{
get { return $this->height; }
}

public function __construct(int $width = 10,
int $height = 10)
{
$this->width = $width;
$this->height = $height;
}
}

I thought it would be a fun time to try out the class accessors macro by declaring private properties with public getters. For this I had to install pre/class-accessors (via composer require).
I then changed the socket code to allow for new farms to be created on request. From app/Socket/GameSocket.pre:
namespace App\Socket;

use Aerys\Request;
use Aerys\Response;
use Aerys\Websocket;
use Aerys\Websocket\Endpoint;
use Aerys\Websocket\Message;
use App\Model\FarmModel;

class GameSocket implements Websocket
{
private $farms = [];

public function onData(int $clientId,
Message $message)
{
$body = yield $message;

if ($body === "new-farm") {
$farm = new FarmModel();

$payload = json_encode([
"farm" => [
"width" => $farm->width,
"height" => $farm->height,
],
]);

yield $this->endpoint->send(
$payload, $clientId
);

$this->farms[$clientId] = $farm;
}
}

public function onClose(int $clientId,
int $code, string $reason)
{
unset($this->connections[$clientId]);
unset($this->farms[$clientId]);
}

// …
}

I noticed how similar this GameSocket was to the previous one I had — except, instead of broadcasting an echo, I was checking for new-farm and sending a message back only to the client that had asked.
"Perhaps it’s a good time to get less generic with the React code. I’m going to rename component.jsx to farm.jsx."
From assets/js/farm.jsx:
import React from "react"

class Farm extends React.Component
{
componentWillMount()
{
this.socket = new WebSocket(
"ws://127.0.0.1:8080/ws"
)

this.socket.addEventListener(
"message", this.onMessage
)

// DEBUG

this.socket.addEventListener("open", () => {
this.socket.send("new-farm")
})
}
}

export default Farm

In fact, the only other thing I changed was sending new-farm instead of hello world. Everything else was the same. I did have to change the app.jsx code though. From assets/js/app.jsx:
import React from "react"
import ReactDOM from "react-dom"
import Farm from "./farm"

ReactDOM.render(
,
document.querySelector(".app")
)

It was far from where I needed to be, but using these changes I could see the class accessors in action, as well as prototype a kind of request/response pattern for future WebSocket interactions. I opened the console, and saw {"farm":{"width":10,"height":10}}.
"Great!"
Then I created a Patch class to represent each tile. I figured this was where a lot of the game’s logic would happen. From app/Model/PatchModel.pre:
namespace App\Model;

class PatchModel
{
private $x
{
get { return $this->x; }
}

private $y
{
get { return $this->y; }
}

public function __construct(int $x, int $y)
{
$this->x = $x;
$this->y = $y;
}
}

I’d need to create as many patches as there are spaces in a new Farm. I could do this as part of FarmModel construction. From app/Model/FarmModel.pre:
namespace App\Model;

class FarmModel
{
private $width
{
get { return $this->width; }
}

private $height
{
get { return $this->height; }
}

private $patches
{
get { return $this->patches; }
}

public function __construct($width = 10, $height = 10)
{
$this->width = $width;
$this->height = $height;

$this->createPatches();
}

private function createPatches()
{
for ($i = 0; $i < $this->width; $i++) {
$this->patches[$i] = [];

for ($j = 0; $j < $this->height; $j++) {
$this->patches[$i][$j] =
new PatchModel($i, $j);
}
}
}
}

For each cell, I created a new PatchModel object. These were pretty simple to begin with, but they needed an element of randomness — a way to grow trees, weeds, flowers … at least to begin with. From app/Model/PatchModel.pre:
public function start(int $width, int $height,
array $patches)
{
if (!$this->started && random_int(0, 10) > 7) {
$this->started = true;
return true;
}

return false;
}

I thought I’d begin just by randomly growing a patch. This didn’t change the external state of the patch, but it did give me a way to test how they were started by the farm. From app/Model/FarmModel.pre:
namespace App\Model;

use Amp;
use Amp\Coroutine;
use Closure;

class FarmModel
{
private $onGrowth
{
get { return $this->onGrowth; }
}

private $patches
{
get { return $this->patches; }
}

public function __construct(int $width = 10,
int $height = 10, Closure $onGrowth)
{
$this->width = $width;
$this->height = $height;
$this->onGrowth = $onGrowth;
}

public async function createPatches()
{
$patches = [];

for ($i = 0; $i < $this->width; $i++) {
$this->patches[$i] = [];

for ($j = 0; $j < $this->height; $j++) {
$this->patches[$i][$j] = $patches[] =
new PatchModel($i, $j);
}
}

foreach ($patches as $patch) {
$growth = $patch->start(
$this->width,
$this->height,
$this->patches
);

if ($growth) {
$closure = $this->onGrowth;
$result = $closure($patch);

if ($result instanceof Coroutine) {
yield $result;
}
}
}
}

// …
}

There was a lot going on here. For starters, I introduced an async function keyword using a macro. You see, Amp handles the yield keyword by resolving Promises. More to the point: when Amp sees the yield keyword, it assumes what is being yielded is a Coroutine (in most cases).
I could have made the createPatches function a normal function, and just returned a Coroutine from it, but that was such a common piece of code that I might as well have created a special macro for it. At the same time, I could replace code I had made in the previous part. From helpers.pre:
async function mix($path) {
$manifest = yield Amp\File\get(
.."/public/mix-manifest.json"
);

$manifest = json_decode($manifest, true);

if (isset($manifest[$path])) {
return $manifest[$path];
}

throw new Exception("{$path} not found");
}

Previously, I had to make a generator, and then wrap it in a new Coroutine:
use Amp\Coroutine;

function mix($path) {
$generator = () => {
$manifest = yield Amp\File\get(
.."/public/mix-manifest.json"
);

$manifest = json_decode($manifest, true);

if (isset($manifest[$path])) {
return $manifest[$path];
}

throw new Exception("{$path} not found");
};

return new Coroutine($generator());
}

I began the createPatches method as before, creating new PatchModel objects for each x and y in the grid. Then I started another loop, to call the start method on each patch. I would have done these in the same step, but I wanted my start method to be able to inspect the surrounding patches. That meant I would have to create all of them first, before working out which patches were around each other.
I also changed FarmModel to accept an onGrowth closure. The idea was that I could call that closure if a patch grew (even during the bootstrapping phase).
Each time a patch grew, I reset the $changes variable. This ensured the patches would keep growing until an entire pass of the farm yielded no changes. I also invoked the onGrowth closure. I wanted to allow onGrowth to be a normal closure, or even to return a Coroutine. That’s why I needed to make createPatches an async function.
Note: Admittedly, allowing onGrowth coroutines complicated things a bit, but I saw it as essential for allowing other async actions when a patch grew. Perhaps later I’d want to send a socket message, and I could only do that if yield worked inside onGrowth. I could only yield onGrowth if createPatches was an async function. And because createPatches was an async function, I would need to yield it inside GameSocket.
"It’s easy to get turned off by all the things that need learning when making one’s first async PHP application. Don’t give up too soon!"
The last bit of code I needed to write to check that this was all working was in GameSocket. From app/Socket/GameSocket.pre:
if ($body === "new-farm") {
$patches = [];

$farm = new FarmModel(10, 10,
function (PatchModel $patch) use (&$patches) {
array_push($patches, [
"x" => $patch->x,
"y" => $patch->y,
]);
}
);

yield $farm->createPatches();

$payload = json_encode([
"farm" => [
"width" => $farm->width,
"height" => $farm->height,
],
"patches" => $patches,
]);

yield $this->endpoint->send(
$payload, $clientId
);

$this->farms[$clientId] = $farm;
}

This was only slightly more complex than the previous code I had. I needed to provide a third parameter to the FarmModel constructor, and yield $farm->createPatches() so that each could have a chance to randomize. After that, I just needed to pass a snapshot of the patches to the socket payload.

Random patches for each farm

"What if I start each patch as dry dirt? Then I could make some patches have weeds, and others have trees …"
I set about customizing the patches. From app/Model/PatchModel.pre:
private $started = false;

private $wet {
get { return $this->wet ?: false; }
};

private $type {
get { return $this->type ?: "dirt"; }
};

public function start(int $width, int $height,
array $patches)
{
if ($this->started) {
return false;
}

if (random_int(0, 100) < 90) {
return false;
}

$this->started = true;
$this->type = "weed";

return true;
}

I changed the order of logic around a bit, exiting early if the patch had already been started. I also reduced the chance of growth. If neither of these early exits happened, the patch type would be changed to weed.
I could then use this type as part of the socket message payload. From app/Socket/GameSocket.pre:
$farm = new FarmModel(10, 10,
function (PatchModel $patch) use (&$patches) {
array_push($patches, [
"x" => $patch->x,
"y" => $patch->y,
"wet" => $patch->wet,
"type" => $patch->type,
]);
}
);

Continue reading %Procedurally Generated Game Terrain with React, PHP, and WebSockets%

Link: https://www.sitepoint.com/procedurally-generated-game-terrain-reactjs-php-websockets/