Full Stack Development with Angular and GraphQL

Ahmed Bouchefra

• Publisher: Packt Publishing
• Year: 2022
• eBook ISBN: 9781800209756
• Edition: 1
• Topic: Informatik
• Subtopic: Webentwicklung

Design and develop full-stack and cross-platform Angular applications using the latest web tooling, development techniques, and modern app architectureKey Features• Implement scalability and maintainability to your full stack apps using Angular modules and components• Get the complete source code of the example social network app built using GraphQL and Apollo• Manage your Angular applications state using Apollo client for a seamless user experienceBook DescriptionGraphQL is an alternative to traditional REST technology for querying Web APIs. Together with Angular and TypeScript, it provides a tech stack option for building future-proof web applications that are robust and maintainable at any scale.This book leverages the potential of cutting-edge technologies like GraphQL and Apollo and helps Angular developers add it to their stack. Starting with introducing full-stack development, you will learn to create a monorepo project with Lerna and NPM Workspaces. You will then learn to configure Node.js-based backend using GraphQL, Express, and Apollo Server. The book will demonstrate how to build professional-looking UIs with Angular Material. It will then show you how to create Web APIs for your frontend with GraphQL. All this in a step-by-step manner. The book covers advanced topics such as local state management, reactive variables, and generating TypeScript types using the GraphQL scheme to develop a scalable codebase.By the end of this book, you'll have the skills you need to be able to build your full-stack application.What you will learn• Create a monorepo project with Lerna and NPM workspaces• Add realtime support with GraphQL subscriptions• Build a frontend with a modular architecture and Material Design UI components to consume the GraphQL API• Use GraphQL Code Generator to generate types and code for a type-safe and scalable code base• Create Angular modules and smart and dumb components and share data between them• Use Apollo Client features such as client-side queries and reactive variables for local state managementWho this book is forThe book is aimed at Angular developers who wish to learn about GraphQL for taking their frontend knowledge in full stack web development. The book assumes intermediate knowledge of Angular, however, full stack development is not required.

Part 1: Setting Up the Development Environment, GraphQL Server, and Database

In this part, we'll learn about our app's architecture and requirements, and we'll set up our development environment for full stack development. We'll also set up a GraphQL server with Express.js and Apollo and connect a SQL database for storing the application data using TypeORM.

This section comprises the following chapters:

• Chapter 1, App Architecture and Development Environment
• Chapter 2, Setting Up GraphQL with Node.js, Express.js, and Apollo
• Chapter 3, Connecting the Database with TypeORM
• Chapter 4, Implementing Authentication and Image Uploads with Apollo Server
• Chapter 5, Adding Realtime Support with Apollo Server

Chapter 1: App Architecture and Development Environment

Throughout this book, we'll develop a full stack web application with an Angular frontend, a Node.js backend, and a MySQL database.

As a consequence, in this first chapter, we'll learn about the project's structure and the tools required to develop the application. After that, we'll have our machine ready for development. Specifically, we'll install Node.js alongside npm and MySQL.

Node.js is required for the backend application, which runs a server that exposes a GraphQL API using Express.js, one of the most popular Node frameworks. Node.js is also necessary for development of the frontend application. This is because Angular uses an official command-line interface to initialize the project and scaffold any required artifacts during the application's development.

MySQL will be utilized to store our data but it will not be directly accessible in our code. Rather than that, we will be using an ORM called TypeORM.

In this chapter, we will cover the following topics:

• The project's architecture and development technologies
• Installing MySQL
• Installing and configuring Node.js

Technical requirements

This chapter will require access to a computer equipped with an operating system and an internet connection. Because I'll be working with an Ubuntu system, the instructions in this book will be specific to that system. They should also function on any other system that is based on Debian.

The architecture and technologies

In this section, we'll learn about the architecture of our application and the technologies that we'll use to develop both the frontend and backend of our application throughout this book.

Let's begin by familiarizing ourselves with the notions of full stack architecture and monorepo repositories (also known as mono-repositories).

Full-stack architecture

We'll be developing a web application that includes both a frontend and a backend, also known as a full stack application. This implies that we will take the job of a full stack developer.

A full stack developer is a web developer who can handle the development of both the frontend (client-side) and backend (server-side) parts of a web development project.

They must be proficient in fundamental technologies such as HTML, JavaScript, and CSS and have some familiarity with others such as TypeScript, Node.js, and database management systems such as MySQL. These technologies may be broadly classified into two types:

• Client-side languages, frameworks, and tools for developing browser-based applications, including HTML, CSS, JavaScript, TypeScript, and Angular.
• Languages and tools for the server side, such as Node.js, Python, or PHP, as well as database languages, such as SQL.

To build our full stack application, we'll need two parts:

• The frontend: This is the application that runs in the client's web browser on the client's machine. Historically, this was accomplished through the use of HTML pages rendered on the server and then returned to the client. However, browsers may now run fully fledged JavaScript applications (also known as client-side apps), which do the majority of the processing on the client's browser and rely on servers just to supply the application's initial files and data. Simply put, the frontend is what presents the user interface with which users interact.
• The backend: This is the server-side application that will handle HTTP requests, perform some processing logic, and return responses to the browser (HTML and/or JSON data).

We'll use tools such as Lerna to organize our application's code utilizing a monorepo approach. In the context of software development, monorepo simply refers to using a single source code repository (typically version controlled using Git) for all of our applications (the server, client, and any shared libraries).

Let's take a high-level look at how our application will be delivered to the client's machine:

1. First, the client will make a request by putting your application domain name into the address bar of the browser.
2. The server will intercept the requests and process the HTML document containing the Angular app.
3. The client's browser will begin downloading all of the JavaScript and CSS files required to run the Angular application.
4. Any initial requests to the server for data, such as posts, will be sent by the Angular application and rendered in the user interface.
5. The other requests will be made to the server after the user begins engaging with the application.

This process provides a high-level overview of how our application operates. We'll go through these stages in greater depth in the next chapters.

After quickly discussing the full stack and monorepo concepts, let's have a look at the technologies and tools we'll be using to build our application.

The development technologies

Every project necessitates the use of a set of technologies and tools. This includes programming languages, command-line interfaces, libraries, and frameworks. We'll be using diverse technologies for both frontend and backend development in our full stack project.

Nowadays, modern development involves using the same tools for both the frontend and the backend. Let's look at these technologies and tools in more detail.

We'll use a recent version of Angular (version 12 at the time of writing) for the frontend, Node.js for the backend, and a set of supporting libraries including Express.js for launching a web server and TypeORM for abstracting database operations.

One of the primary goals of this book is to build a GraphQL API that will be provided by our Express.js server and consumed by our Angular frontend. To abstract all of the low-level APIs necessary to run a web server, we'll utilize Express.js on top of Node.js.

The web server will listen for incoming HTTP requests from the client's browser, which are mostly GraphQL queries for getting data and...

Table of contents

• Full Stack Development with Angular and GraphQL
• Contributors
• Preface
• Part 1: Setting Up the Development Environment, GraphQL Server, and Database
• Chapter 1: App Architecture and Development Environment
• Chapter 2: Setting Up GraphQL with Node.js, Express.js, and Apollo
• Chapter 3: Connecting the Database with TypeORM
• Chapter 4: Implementing Authentication and Image Uploads with Apollo Server
• Chapter 5: Adding Realtime Support with Apollo Server
• Part 2: Building the Angular Frontend with Realtime Support
• Chapter 6: Angular Application Architecture and Routing
• Chapter 7: Adding User Search Functionality
• Chapter 8: Guarding Routes and Testing Authentication
• Chapter 9: Uploading Images and Adding Posts
• Chapter 10: Fetching Posts and Adding Comments and Likes
• Part 3: Adding Realtime Support
• Chapter 11: Implementing GraphQL Subscriptions
• Other Books You May Enjoy