About the Book

With the help of Server-Side Enterprise Development with Angular, equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced book is a great way to learn how to build an effective UX by using the new features of Angular 7 beta, without wasting efforts in searching for referrals.

To start off, you'll install Angular CLI and set up a working environment, followed by learning to distinguish between the container and presentational components. You'll explore advanced concepts such as making requests to a REST API from an Angular application, creating a web server using Node.js and Express, and adding dynamic metadata. You'll also understand how to implement and configure a service worker using Angular PWA and deploy the server-side rendered app to the cloud.

By the end of this book, you'll have developed skills to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing.

About the Author

Bram Borggreve is a software engineer from the Netherlands, who currently works as an instructor at egghead.io, and is the founder of Colmena Consultancy. With almost 20 years of experience in all fields of the software lifecycle, Bram has a complete overview of the high-value challenges that clients are keen to resolve.

Objectives

• Identify what makes an Angular application SEO-friendly
• Generate commands to create components and services
• Distinguish between the container and presentational components
• Implement server-side rendering using Angular Universal
• Create a web server using Node.js and Express
• Add dynamic metadata to your web application
• Deploy a server-side rendered app to the cloud
• Implement and configure a service worker using Angular PWA

Audience

Server-Side Enterprise Development with Angular is for you if you are an experienced front-end developer who wants to quickly work through examples that demonstrate all the key features of server-side development. You need some prior exposure to Angular to follow through this book.

Approach

This is a fast-paced, practical hands-on book aimed at experienced developers. As you progress you'll find helpful tips and tricks, and useful self-assessment material, exercises, and activities to help benchmark your progress and reinforce what you've learned.

Minimum Hardware Requirements

For the optimal student experience, we recommend the following hardware configuration:

• Processor: i3
• Memory: 2 GB RAM
• Hard disk: 10 GB
• An internet connection

Software Requirements

You'll also need the following software installed in advance:

• Operating System: Windows 10
• Node 8.9.0 or higher
• npm 5.5.1 or higher
• Git
• Internet Browser: Google Chrome (latest version)

Conventions

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Running the ng new command will do the following:"

A block of code is set as follows:

cd angular- social
ng serve

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "You should be greeted with a default page that says Welcome to angular-social!."

Installation

Throughout the book, we will be using Node and npm to run our development environment, which is based on the Angular CLI. Additionally, Git is needed in order to retrieve content from https://github.com/. Please make sure your machine meets the following requirements:

• Node 8.9.0 or higher
• npm 5.5.1 or higher
• Git

To verify the installed versions, run the node -v and npm -v commands in a terminal.

If you want to install or upgrade to the latest version, please visit https://nodejs.org/.

Versions

While this book is written for Angular 7, most of the content will work exactly the same with Angular 6. We will do our best to keep the content of this book up to date, and in order to support future versions of Angular, we might add an errata.

Code Editor

Angular is written in and makes use of TypeScript, which is a superset of JavaScript that adds types. As a developer, you will get the biggest benefit from TypeScript if you use an editor that has good support for it. There are TypeScript plugins for most editors, but there are two we want to highlight, one free and one commercial option.

Visual Studio Code is a free and open source editor by Microsoft, which is the company behind TypeScript. This alone should give you confidence that the TypeScript support is amazing, which it is. VS Code runs on all major platforms. It can be downloaded from https://code.visualstudio.com/download.

WebStorm IDE is a commercial IDE by JetBrains, a company renowned for its solid IDEs. WebStorm also has great built-in support for TypeScript. There is a free community edition available for those who want to try it out at https://www.jetbrains.com/webstorm/download/.

Development API

This book focuses on building an Angular application that functions as a public website. It will retrieve the content from a REST API to match real-life use cases as closely as possible.

The development API can be downloaded from GitHub at https://github.com/TrainingByPackt/Server-Side-Enterprise-Development-with-Angular/tree/master/api and installed on your local machine:

$ npm install
$ npm start

If all went well, you should be greeted with this message:

Web server listening at: http://localhost:3000
Browse your REST API at http://localhost:3000/explorer

Additional Resources

The code bundle for this book is also hosted on GitHub at: https://github.com/TrainingByPackt/Server-Side-Enterprise-Development-with-Angular. Select the solution folder to access the code for the main theory and exercises. Select the solution-extra-activities folder to access the code for the activities.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!