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

This is the code repository for Hands-On Full Stack Web Development with Angular 6 and Laravel 5, published by Packt.

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

What is this book about?

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.

This book covers the following exciting features:

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).

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

{
 "require": {
     "laravel/framework": "5.*.*",
 }
}

Following is what you need for this book: 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.

With the following software and hardware list you can run all code files present in the book (Chapter 1-15).

Software and Hardware List

Chapter	Software required	OS required
1 - 11	Docker	Windows, Mac OS X, and Linux (Any)
1 - 11	VS Code	Windows, Mac OS X, and Linux (Any)
2 - 11	Node.js	Windows, Mac OS X, and Linux (Any)
4	Workbench	Windows, Mac OS X, and Linux (Any)

Development environment

All chapters and examples are based on Docker and Docker-compose.

Docker:
- Go to https://docs.docker.com/install/.
- Choose your platform and follow the installation steps.
- Start Docker.
VS Code:
- Go to the https://code.visualstudio.com/Download
- Choose your platform and follow the installation steps.
- Follow the installation steps for your platform.
MySQL Workbench:
- Go to https://dev.mysql.com/downloads/workbench/
- Choose your platform and follow the installation steps.
Node.js:
- Go to https://nodejs.org/en/
- Choose your platform and follow the installation steps.

Using the sample code

After download the individual chapters from repository, we need to take a few steps before running our application.

Here is the steps (Remember you must have all the softwares installed on your machine mentioned on Software list).

Installation process for chapters: 01, 04, 05, 06, 10, 11.

Edit .env.example to: .env if you can't see the .env. Important Note: on some operating systems .dot files are hidden by default, so you need a code editor to see and edit this kind of file, we strong recommend the use of VS.code. Open your terminal inside the chapter folder and type the following command on your Terminal: cp .env.example .env.

Change the .env database configuration using the docker-compose.yml MySql configuration as follow:

  DB_CONNECTION=mysql
  DB_HOST=mysql
  DB_PORT=3306
  DB_DATABASE=chapter-04 # Note here you need to use the right chapter number
  DB_USERNAME=chapter-04
  DB_PASSWORD=123456

Open your Terminal window inside the project folder and type the following command: docker-compose up -d to start all Docker containers, this should take some minutes do download and build the images.
Type the following command: docker-compose exec php-fpm bash to access container bash.
Inside the container bash, type the following command: composer install, this command may take a few minutes to download all the project dependencies, depending on your internet connection.
Run php artisan key:generate
Run php artisan migrate
Run php artisan db:seed

Congratulations now we have everything we need to see the application running.

Open your default browser and go to http://localhost:8081. and we can see the Laravel welcome screen.

Important note: On some chapters the url must be different. We advise you to use the individual instructions in each chapter to have access to the correct urls. if you are on windows, use the IP address generated by Docker-tools-cmd

Special instructions for some chapters

chapter 02: Open your terminal inside the chapter folder and type the folloing command: npm install.

chapter 03:

Open your terminal inside the chapter folder and type the folloing command: npm install.
Type on your terminal: npm start.
Go to http://localhost:4200/

chapter 07:

In this chapter you must conbine instruction for back-end chapters (01, 04, 05, 06, 10, 11) with front-end chapters (01, 03). So here is the step by step;

Edit .env.example to: .env if you can't see the .env. Important Note: on some operating systems .dot files are hidden by default, so you need a code editor to see and edit this kind of file, we strong recommend the use of VS.code. Open your terminal inside the chapter folder and type the following command on your Terminal: cp .env.example .env.

Change the .env database configuration using the docker-compose.yml MySql configuration as follow:

  DB_CONNECTION=mysql
  DB_HOST=mysql
  DB_PORT=3306
  DB_DATABASE=chapter-04 # Note here you need to use the right chapter number
  DB_USERNAME=chapter-04
  DB_PASSWORD=123456

Open your Terminal window inside the project folder and type the following command: docker-compose up -d to start all Docker containers, this should take some minutes do download and build the images.
Type the following command: docker-compose exec php-fpm bash to access container bash.
Inside the container bash, type the following command: composer install, this command may take a few minutes to download all the project dependencies, depending on your internet connection.
Run php artisan key:generate
Run php artisan migrate
Run php artisan db:seed

Open your terminal inside chapter/Client folder and type the following commands:

Open your terminal inside the chapter folder and type the folloing command: npm install.
Type on your terminal: npm start.

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Get to Know the Author

Fernando Monteiro is a full-stack engineer, speaker, and open source contributor. He has built and made some of his personal projects open source such as Responsive Boilerplate, Frontend Boilerplate, Angm-Generator, and TrelloMetrics. With around 16 years of experience in information technology, his current focus is on web and mobile enterprise JavaScript applications. He has worked as graphic designer for various companies and products, including mobile applications.

Other books by the authors

Suggestions and Feedback

Click here if you have any feedback or suggestions.

Download a free PDF

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

https://packt.link/free-ebook/9781788833912

Chapter 1 - 4: comments to use the book under windows. Issue with Swagger

Working with the .pdf version of the book on Windows 10 and found the following obstacles, which others might find helpful.

Excellent book, however feel the author should walk thru the steps under windows (issues see below).
For the moment stopped near end of chapter 4 after encountering the first show stopper that I could not fix (Swagger installation).
Possibly will resume later.

Chapter 1

Screen shot "PhpDocker interface"
Extensions: MySQL: "Memcached" not checked
I am running without the memcache container and it seems to work so far.

Creating a migrations file and database seed
"database/factories folder" folder: file "ModalFactory.php" does not exist.
Instead a file "BandFactory.php" has to be created inside the folder "factories".

Using the resource flag to create CRUD methods
"4. Add the following line, right after App\Http\Requests:"
"App\Http\Requests:" does not exist in this file.
Instead pasted
"use App\Http\Requests;
use App\Band;"
from the example code under line "use Illuminate\Http\Request;".

"5. Update the routes.php file, inside the routes folder, to the following code:"
The filename is not "routes.php", but "web.php".

Creating the Blade template engine
Step 4:
missing is the need to edit file "BandController.php": function "index":
"return view('bands.index', array('bands' => $bands));"

Chapter 2

Using Enum
Step 4: Output string "My favorite..." not in "console.log".

Chapter 3

Installing the Angular CLI
Step 3: "rm -rf node_modules"
Under windows, "rm" has no parameter "rf".

Command: "ng doc HttpClient":
Result:
"The doc command requires to be run in an Angular project, but a project definition could not be found."

Installing VS Code Angular plugins:
The last one "GitLens" is doubled ("This extension is extremly..." text is duplicated.

Creating a simple Angular application
Command "ng new chapter03 --routing": question "Which stylesheet...": missing in book text.
Did choose CSS

Environments
Command "ng build --env = prod"
"The build command requires to be run in an Angular project, but a project definition could not be found."
Using "chaper03" files from .zip archive: same error message.

Solution:
".angular-cli.json" must be named "angular.json".
The command to built is "np serve".

Tunning the sample application
"npm serve" includes "npm start"

Creating an Angular service
Code file "beers.service.ts"
"import { Observable } from 'rxjs/Observable';"
Compiler error: "src/app/beers/beers.service.ts(4,10): error TS2305: Module '"F:/Laravel-angular/chapter03/chapter03/node_modules/rxjs/Observable"' has no exported member 'Observable'."
Solved by command: "npm install --save rxjs-compat"

Simple deployment
Command "cd dist && http-server -p 8080":
"&&" not valid in windows
Directory must be subdirectory "chapter03".

Step 5: Command "git add .git commit -m "chapter03 initial commit"
Error: "unknown switch `m'".
Solved by seperating commands (error is that "-m" gets passed to the "add" command):
"git add ."
"git commit -m "chapter03 initial commit"

Chapter 4

Using PHP Composer to scaffold a Laravel application

Step 3: 3. We will see the following output on the Terminal:
Composer version 1.6.3
Output warning: "Do not run Composer as root/super user! See https://getcomposer.org/root for details"
Version is: "Composer version 1.8.4 2019-02-11 10:52:10"

Creating the application scaffold
Command "composer create-project laravel/laravel=5.6.12 project --prefer-dist"
The directory "project" is created inside another directory "project".
This seems to be an error, because "http://localhost:8081/" later results in "file not found".
Solution is to manually move the directoy "project" one level up ("chapter04/project/app...").

Creating our first database seed
Step 2: Sample data
In the .pdf file, the first "picture": URL is missing the closing quotation mark.

Installing the L5-Swagger library
Step 2: the line must be terminated with ",".
Step 3: before the command "php..." "php-fpm bash" is required:
"docker-compose exec php-fpm bash"

Command issues error:
In ProviderRepository.php line 208:
"Class 'L5Swagger\L5SwaggerServiceProvider' not found "
Could not fix this.

Docker troubleshooting under Windows 10:

Windows Professional required
Virtualization has to be enabled in the BIOS
In the Hyper-V manager console, a new virtual switch of type "extern" has to be created
after that a reboot was required
worked, however
after Windows did update itself, docker commands failed.
solution was that the Hyper-V service had to be set to be loaded automatically on windows startup. Set by a powershell command to automatic.

packtpublishing / hands-on-full-stack-web-development-with-angular-6-and-laravel-5 Goto Github PK