Book Image

Full Stack Development with Angular and GraphQL

By : Ahmed Bouchefra
Book Image

Full Stack Development with Angular and GraphQL

By: Ahmed Bouchefra

Overview of this book

GraphQL 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.
Table of Contents (16 chapters)
1
Part 1: Setting Up the Development Environment, GraphQL Server, and Database
7
Part 2: Building the Angular Frontend with Realtime Support
13
Part 3: Adding Realtime Support

Initializing our server project

In this section, we'll learn how to initialize our server project and install Express.js, which will help us quickly spin up a server without dealing with the low-level APIs provided by the Node.js platform.

npm provides a command that allows developers to create a project (an empty folder with a package.json file). Let's learn how to use it to generate a package.json file.

Generating a package.json file

We'll get started by creating a folder for our server files inside the ngsocial/packages/ folder:

  1. Open a new command-line interface and run the following commands:
    cd packages
    mkdir server && cd server
  2. Next, run the following command:
    npm init --yes

The --yes flag tells npm to generate a package.json file with the default settings.

  1. You can run the following command to update your npm version:
    npm install -g npm

We are executing this command because we need to update to npm 7 (if you are not...