Web applications built with Angular can be optimized for search engine optimization (SEO). Wikipedia defines SEO as "the process of affecting the online visibility of a website or a web page in a web search engine's unpaid results—often referred to as "natural", "organic", or "earned" results." Optimizing your app for search engines means your app is more visible on the internet and can drive more revenue for you or your client. Angular provides built-in features that can be leveraged to ensure our apps enjoy maximum visibility on the web.
In this book, you will learn how to use Angular to create a progressive web app (PWA) that has great support for SEO. This learning journey begins by identifying what makes an app SEO friendly and installing Angular CLI. You will then build out the UI components and the application components. By the end of the first lesson, you will have an app ready that is built using Angular's best practices. In the remaining two lessons, you will implement server-side rendering and service workers in your app. You will create the server app, implement an Express server, and add dynamic metadata to your app. Finally, you will configure service workers and test the offline capabilities of your app.
By the end of this book, you will be equipped to create modern, SEO-friendly web apps with best practices using Angular CLI.
Lesson 1, Creating the Base Application, shows how to install Angular CLI and create the Angular application that will be used in this book. We will set a few default settings and configure our global styles with Bootstrap and Font Awesome. We will then create the basic UI and layout of our app.
Lesson 2, Creating the Application Module and Components, explains the different types of components such as presentational components and container components. We will then see how to create PostsComponent, ProfileComponent, PostListComponent, PostItemComponent, and ProfileItemComponent. Finally, we will create resolvers to retrieve data using the router.
Lesson 3, Server-Side Rendering, shows how to add server-side rendering to our application. We will start by generating the server app and adding its dependencies. We will then add scripts to our package.json file, before implementing a web server in Express.js. Lastly, we will see how to add dynamic metadata to our pages.
Lesson 4, Service Workers, shows how to work with service workers. We will start by installing the required dependencies. We will then move on to enabling the service worker, configuring it, testing it, and finally debugging it.
This book will require the following minimum hardware requirements:
Processor: i3
Memory: 2 GB RAM
Hard disk: 10 GB
Internet connection
Throughout this book, we will be using Node and npm to run our development environment, which is based on Angular CLI. Additionally, Git is needed in order to retrieve content from GitHub. Please ensure you have the following installed on your machine:
Node 6.9.0 or higher
npm 3.0 or higher
Git
We can check if our machine meets the requirements by checking the version of Node, npm, and Git. This can be done using the following commands:
node –v npm –v git --version
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 close as possible. The development API can be downloaded from GitHub and installed on local machines from
To install the API, run the following commands:
$ git clone <repo_url> $ cd packt-angular-seo-api $ npm install $ npm start
If all went well, you should see the following message in the terminal:
Web server listening at: http://localhost:3000 Browse your REST API at http://localhost:3000/explorer
This book is ideal for experienced front-end developers who are looking to quickly work through an intelligent example that demonstrates all the key features of server-side development with Angular. You'll need some prior exposure to Angular, as we skim over the basics and get straight to work.
You must also be well-versed with the following concepts:
Basics of Angular
HTML
CSS
Basics of TypeScript
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words and C++ language keywords in text are shown as follows: "We will update our PostsComponent to read the data that has been resolved by our router."
Folder names, filenames, file extensions, pathnames, include file names in text are shown as follows: "The header file boost/asio.hpp includes most of the types and functions required for using the Asio library".
A block of code is set as follows:
import { PostsResolver } from './resolvers/posts-resolver'
import { ProfileResolver } from './resolvers/profile-resolver'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: "If we check in the Network tab in Chrome Developer Tools, we see that we make two requests to the same endpoint."
Important new programming terms are shown in bold. Conceptual terms are shown in italics.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.