Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Become fluent in both frontend and backend web development with Docker, Angular and Laravel

Fernando Monteiro

• Editore: Packt Publishing
• Anno: 2018
• ISBN:
  9781788836647
• Edizione: 1
• Argomento: Informatik
• Categoria: Programmierung in JavaScript

Build modern, fast, and progressive web applications using modern features of PHP 7 and TypeScript

Key Features

• Explore the latest features of Angular and Laravel to build applications that are powerful, consistent, and maintainable
• Develop modern user interfaces with a reusable component-based architecture using Angular 6 and Bootstrap 4
• Learn how to build secure backend APIs with Laravel

Book Description

Angular, considered as one of the most popular and powerful frontend frameworks, has undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.

This book gives you practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel Restful back end.

The book begins with a thorough introduction to Laravel and Angular and its core concepts like custom errors messages, components, routers, and Angular-cli, with each concept being explained first, and then put into practice in the case-study project.

With the basics covered, you will learn how sophisticated UI features can be added using NgBootstrao and a component-based architecture. You will learn to extend and customize variables from Bootstrap CSS framework.

You will learn how to create secure web application with Angular and Laravel using token based authentication. Finally, you will learn all about progressive web applications and build and deploy a complete fullstack application using Docker and Docker-compose.

By the end of this book, you'll gain a solid understanding of Angular 6 and how it interacts with a Laravel 5.x backend

What you will learn

• Explore the core features of Angular 6 to create sophisticated user interfaces
• Use Laravel 5 to its full extent to create a versatile backend layer based on RESTful APIs
• Configure a web application in order to accept user-defined data and persist it into the database using server-side APIs
• Build an off-line-first application using service-worker and manifest file
• Deal with token based authentication on single page application (SPA).
• Secure your application against threats and vulnerabilities in a time efficient way
• Deploy using Docker and Docker-compose

Who this book is for

This book targets developers who are new to Angular, Laravel, or both, and are seeking a practical, best-practice approach to development with these technologies. They must have some knowledge of HTML, CSS and JavaScript. Familiarity of PHP is assumed to get the most from this book.

Creating a RESTful API Using Laravel - Part 1

Before we get started, let's briefly introduce a software development standard called the RESTful API.

An Application Programming Interface (API) is a set of instructions, routines, and programming patterns used to access an internet-based application. This allows a computer or other application to understand the instructions in this application, interpret its data, and use it for integration with other platforms and software, generating new instructions that will be executed by this software or computers.

In this way, we understand that the APIs allow interoperability between applications. In other words, this is communication between applications, in our case, the communication between the client-side and the server-side.

Representational State Transfer (REST) is an abstraction of the web architecture. Briefly, REST consists of principles, rules, and constraints that, when followed, allow the creation of a project with well-defined interfaces.

The features available in a RESTful service can be accessed or manipulated from a set of operations that are predefined by default. The operations make it possible to create (PUT), read (GET), change (POST), and delete (DELETE) resources, and are available from messages using the HTTP protocol.

Although Laravel is an– MVC framework, we can build RESTful apps that are extremely robust and scalable.

In this chapter, you will learn how to build a RESTful API using the core elements of the Laravel framework, such as controllers, routes, and Eloquent Object Relational Mapping (ORM). Mainly, we will cover the following topics:

• Preparing the application and understanding what we are building
• An Eloquent ORM relationship
• Controllers and routes

Preparing the application and understanding what we are building

Let's start this session using the application that we started to develop in the previous chapter. However, we will make some adjustments before continuing. First, we are going to add our code to the version control. In this way, we will not lose the progress we made in the previous chapter.

1. Inside the chapter-04 folder, create a new file called .gitignore and add the following code:

storage-db
.DS_Store

• See https://help.github.com/articles/ignoring-files for more information about ignoring files
• If you find yourself ignoring temporary files generated by your text editor or operating system, you probably want to add a global ignore instead git config --global core.excludesfile '~/.gitignore_global'
• Ignore the storage folder's due size

The previous code just added the storage-db folder to untracked files.

2. Let's add the changes to source control. Inside the Terminal window, type the following command:

git init

Finally, let's add our first commit.

3. Inside the Terminal, type the following commands:

git add .
git commit -m "first commit"

Bravo! We have our code under Git source control.

Refactoring the application files

Now, it is time to change some files to adjust to chapter-05:

1. Copy all the content of chapter-04 and paste it into a new folder called chapter-05.
2. Open the docker-compose.yml file and replace the code with the following lines:

version: "3.1"
services:
 mysql:
 screenshot: mysql:5.7
 container_name: chapter-05-mysql
 working_dir: /application
 volumes:
 - .:/application
 - ./storage-db:/var/lib/mysql
 environment:
 - MYSQL_ROOT_PASSWORD=123456
 - MYSQL_DATABASE=chapter-05
 - MYSQL_USER=chapter-05
 - MYSQL_PASSWORD=123456
 ports:
 - "8083:3306"
 webserver:
 screenshot: nginx:alpine
 container_name: chapter-05-webserver
 working_dir: /application
 volumes:
 - .:/application
 - ./phpdocker/nginx/nginx.conf:
 /etc/nginx/conf.d/default.conf
 ports:
 - "8081:80"
 php-fpm:
 build: phpdocker/php-fpm
 container_name: chapter-05-php-fpm
 working_dir: /application
 volumes:
 - ./project:/application
 - ./phpdocker/php-fpm/php-ini-
 overrides.ini:/etc/php/7.2/fpm/conf.d/99-overrides.ini

Note that we changed MYSQL_DATABASE and MYSQL_USER and also changed the container names to fit the chapter-05 title.

3. Edit the project/.env file with the new database information, as in the following code:

DB_CONNECTION=mysql
 DB_HOST=mysql
 DB_PORT=3306
 DB_DATABASE=chapter-05
 DB_USERNAME=chapter-05
 DB_PASSWORD=123456

4. Now, delete the storage-db folder. Don't worry – we will create a new one with the docker-compose command later.
5. It's time to commit our new changes, but this time we will do it another way. This time, we will use the Git Lens VS Code plugin.

6. Open VS Code. On the left-hand side bar, click on the third icon for source control.
7. Add the following message inside the message box at the top-left sidebar Init chapter 05.
8. Press Command +Enter on macOSX, or Ctrl + Enter on Windows, and click Yes.

Well done. Now, we can start chapter 05 with a new baseline of files.

What we are building

Now, let's talk a bit...