Let’s learn how to make Nx + Next + Firebase work together in a harmonious way to improve our DX

I’ve been using Nrwl.io Nx for Angular development for over 3 years now and love the developer experience with the ability to have multiple applications and libraries in a Monorepo.

In my recent development I started using Firebase and became increasingly frustrated with the way in which Firebase Functions are setup using a sub-directory under the main workspace. This did not gel with the Nx apps and libs development as Firebase Functions lived under a separate folder with its own package.json and node_modules installation.

This created many difficulties in being able to share code between the front-end application and the firebase back-end. I used hand crafted tsconfig.json file in the Firebase Functions folder to provide the ability to reference common code in the Nx workspaces. This just didn’t provide a great developer experience. I guess I feel spoiled with Nx functionality.

After reading through countless articles from the likes of Jeff Delaney and various Github issues I was able to finally stitch together and solve my developer experience issues and streamline my development in the process.

Whilst this may not be the most elegant solution I thought it would be of use to the community. A schematic could be written to automate this manual process.

Initialize Nx Workspace

Let’s get started by creating a new coffee app using Nx workspace with the following command:

> npx create-nx-workspace@latest

After specify the various configuration options for my Angular, Nx will scaffold out a workspace with apps and libs.

Open the newly generated workspace using your preferred IDE. Under the apps folder you should see two applications, coffee application and coffee-e2e for end to end tests .

All the following commands are to be run from the root of the workspace.

Nest Application

Installing the Nest Plugin

Installing the Nest plugin to a workspace can be done using the following:

> npm install -D @nrwl/nest

Generating Nest Application

Generating a new Nest application can be done with the following:

> nx generate @nrwl/nest:application <nest-app>

Example:

> nx generate @nrwl/nest:application coffee-api

Serving Nest Application

Your Nest application can be served with the following command:

> nx serve coffee-api

nx serve coffee-api

Nx will build and serve the API to the specified port. Any changes to the API will trigger the build process again.

The generated Nest application file structure should look like this:

Firebase

Next is to initialize firebase into the workspace, skip this section if you know what you are doing.

Firebase initialization

Ensure that the Firebase tools have been installed globally using:

> npm install -g firebase-tools@latest

Next is to initialize firebase into the current workspace.

> firebase init

Select the various options required for the Firebase deployment, Functions is required to be setup for the API.

Install the options — Functions is required

Select an existing Firebase project or create a new one.

Accept all the Firebase defaults or modify as required. Ensure Typescript is selected as the language for Cloud Functions and do not install dependencies.

Specify each of the emulators to setup, ensuring Functions Emulator is selected.

Accept all the Firebase emulator defaults for the various ports. Note these can be changed later if required.

Firebase is now installed into the sub-directory called functions.

#angular #nx #firebase #nest #developer