General

Deploying Nx workspace based Angular and NestJS apps to Heroku

Published May 25, 2021

Updated Feb 14, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Deploying Angular and NestJS apps to Heroku in an Nx workspace

In previous articles, I've shown you how to create an Nx Workspace with Angular and NestJS applications in it. After the applications are ready, we need to host them somewhere. Heroku is one of the services that lets us deploy applications easily. In this article, I'll demonstrate how to deploy the Angular and NestJS applications that are developed using an Nx monorepo. You can find the example code with the aforementioned applications in my GitHub repository. To follow this article, please fork this repo, clone it locally and checkout nxDeployHeroku_entryPoint.

git clone git@github.com:<your_username>/nx-photos.git

# Or using Https
git clone https://github.com/<your_username>/nx-photos.git

cd nx-photos

git checkout nxDeployHeroku_entryPoint

Install Heroku CLI

To follow this article, you need to have the Heroku CLI installed. Please follow the official installation instruction on the Heroku documentation page here. After you install the CLI, type the following command to log in to Heroku:

heroku login

Deploying NestJS app

We're going to start with deploying the NestJS application. The first thing we need to do is creating a Heroku application. Because you need to come up with a unique application name in all the examples, I'll be using ktrz- prefix for the app names. Please replace it with your own prefix so that the application names don't collide with each other.

To create a Heroku application we can use the following command:

heroku create -a ktrz-nx-photos-api

Now we need to configure the application to use Node for building the application. This is what buildpacks are for. To add a buildpack, the heroku buildpacks:add command can be used:

heroku buildpacks:add -a ktrz-nx-photos-api heroku/nodejs

Heroku uses a Procfile file to specify the commands that are executed on application startup. The default configuration allows for only one Procfile and it has to be in the repository root. For it to work with the monorepo with multiple applications, we need a way to configure multiple Procfiles in the repository. For this purpose, a multi-procfile buildpack can be used. We can add it using a similar command to the previous one:

heroku buildpacks:add -a ktrz-nx-photos-api heroku-community/multi-procfile

Now we can create a Procfile and place it in the directory that makes sense for the monorepo. Let's create the following file:

web: node dist/apps/photo/api/main.js

apps/photo/api/Procfile

To let the buildpack know about the location of the Procfile, we need to set PROCFILE env variable for the Heroku application. We can do it using the following command:

heroku config:set -a ktrz-nx-photos-api PROCFILE=apps/photo/api/Procfile

By default, Heroku uses the build script from the package.json file to build the application. We need a more customizable way of building an application so we can configure which application in a monorepo to build. By defining a heroku-postbuild script, we tell Heroku to not use a default build one and use our custom script instead. Let's create the following script:

scripts: {
  "heroku-postbuild": "nx build $PROJECT_NAME --prod"
}

package.json

As you can see, the PROJECT_NAME env variable is used to determine which application to build. It needs to be configured on the Heroku environment:

heroku config:set -a ktrz-nx-photos-api PROJECT_NAME=photo-api

What is left to do is push the changes to a branch and configure Heroku app to use the repository as a source for deployment:

git checkout -b nx-photo-deploy

git push -u origin photo-api-deploy

To configure the Heroku app, go to the dashboard and choose the application that you've created before:

Next, navigate to the Deploy tab, choose the GitHub method, search for your repository, and click Connect:

Finally, on the bottom, you can choose to deploy manually from the branch that you've created a moment ago:

in package.json add script:

scripts: {
  "heroku-postbuild": "nx build $PROJECT_NAME --prod"
}

package.json

heroku create -a ktrz-nx-photos-api
heroku config:set -a ktrz-nx-photos-api PROJECT_NAME=photo-api

heroku buildpacks:add -a ktrz-nx-photos-api heroku/nodejs
heroku buildpacks:add -a ktrz-nx-photos-api heroku-community/multi-procfile

# create `apps/photo/api/Procfile` file
heroku config:set -a ktrz-nx-photos-api PROCFILE=apps/photo/api/Procfile

To learn more about heroku-buildpack-nodejs and heroku-buildpack-multi-procfile configuration, please visit the official documentation:

Deploying Angular app

Deploying an Angular app has a lot of similar steps.

# create another Heroku app
heroku create -a ktrz-nx-photos-fe

# add same buildpacks
heroku buildpacks:add -a ktrz-nx-photos-fe heroku/nodejs
heroku buildpacks:add -a ktrz-nx-photos-fe heroku-community/multi-procfile

# configure Procfile
heroku config:set -a ktrz-nx-photos-fe PROCFILE=apps/photo/fe/Procfile

# set PROJECT_NAME env variable
heroku config:set -a ktrz-nx-photos-fe PROJECT_NAME=photo-fe

The Angular application can be served as just static files with routing configured to always point to the root index.html and let Angular handle the rest. We can use another buildpack to accomplish that.

heroku buildpacks:add -a ktrz-nx-photos-fe heroku-community/static

heroku-buildpack-static is configured via static.json file. We can do a basic configuration like so:

{
  "root": "dist/apps/photo/fe/",
  "routes": {
    "/**/*.html": "index.html"
  }
}

static.json

The example Angular application is configured to use /api proxy for the backend. This also can be configured within static.json file:

{
  "proxies": {
    "/api/": {
      "origin": "https://ktrz-nx-photos-api.herokuapp.com/api/"
    }
  }
}

static.json

The last thing to do is configure Heroku to use the static buildpack via the Procfile:

web: bin/boot

apps/photo/fe/Procfile

To learn more about heroku-buildpack-static configuration, please visit the oficial documentation here.

Let's commit the changes and configure the second app to use the same GitHub repository:

Go to dashboard and choose the frontend application that you've created before.
Next, navigate to the Deploy tab, choose GitHub method, search for your repository, and click Connect.
Finally, on the bottom you can choose to deploy manually from the branch that you've pushed to a moment ago.

After all those steps, you can navigate to your deployed app:

Summary

If you want to see the result code, you can find it on my GitHub repository.

In case you have any questions, you can always tweet or DM me @ktrz. I'm always happy to help!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Chris Trześniewski

Software Engineer, ultra-marathoner. He is passionate about functional programming in JavaScript and loves working with RxJS. In his free time he likes to go jogging.

@ktrz__@ktrz

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

Angular Signals for Simpler State Management and DOM Performance

In this episode of the Modern Web Podcast, host Rob Ocel is joined by Adam Rackis, Danny Thompson, and guest Braydon Coyer, Senior Front-End Developer at LogicGate to talk about using Angular Signals for improved state management and DOM performance. Braydon explains how Signals simplify Angular development and offer better readability and efficiency compared to traditional methods like RxJS. The conversation also touches on hiring in the AI era, discussing challenges around take-home tests and live coding, and how AI tools like ChatGPT are changing the interview process. Chapters 00:00 - Introduction 00:57 - The Angular Renaissance 02:24 - Signals in Angular 03:27 - Transitioning to Signals 04:19 - Signals in Utility Development 05:09 - RxJS and Signals 07:52 - Signals vs Other State Management Solutions 09:34 - Testing Signals 10:29 - Control Flow and Standalone Components in Angular 12:02 - Angular's Evolution and Accessibility 13:28 - Angular’s Framework Governance 17:10 - Hiring in the Age of AI 19:15 - Pair Programming and Real-Time Problem Solving 22:24 - The Role of AI in Interviews 27:58 - Wrapping Up Follow Braydon Coyer Twitter: https://x.com/BraydonCoyer Linkedin: https://www.linkedin.com/in/braydon-coyer/ Github: https://github.com/braydoncoyer...

Oct 30, 2024

1 min

Angular

Introduction to Directives Composition API in Angular

In version 15, Angular introduced a new directives composition API that allows developers to compose existing directives into new more complex directives or components. This allows us to encapsulate behaviors into smaller directives and reuse them across the application more easily. In this article, we will explore the new API, and see how we can use it in our own components. All the examples from this article (and more) can be found on Stackblitz here. Starting point In the article, I will use two simple directives as an example * HighlightDirective - a directive borrowed from Angular's Getting started guide. This directive will change an element's background color whenever the element hovers. ` Fig. 1 * BorderDirective - a similar directive that will apply a border of a specified color to the element whenever it hovers ` Fig. 2 We can now easily apply our directives to any element we want ie. a paragraph: ` Fig. 3 However, if we wanted to apply both highlighting and border on hover we would need to add both directives explicitly: ` Fig. 4 With the new directives composition API, we can easily create another directive that composes behaviors of our 2 directives. Host Directives Angular 15 added a new property to the @Directive and @Component decorators. In this property, we can specify an array of different directives that we want our new component or directive to apply on a host element. We can do it as follows: ` As you can see in the above example, by just defining the hostDirectives property containing our highlight and border directives, we created a new directive that composes both behaviors into one directive. We can now achieve the same result as in Fig. 4 by using just a single directive: ` Fig. 5 Passing inputs and outputs Our newly composed directive works nicely already, but there is a problem. How do we pass properties to the directives that are defined in the hostDirectives array? They are not passed by default, but we can configure them to do so pretty easily by using an extended syntax: ` Fig. 6 This syntax takes exposes the "inner" directives\ color input from the HighlightAndBorderDirective`, and passes them down to both highlight and border directives. ` Fig. 7 This works, but we ended up with a border and highlight color both being blue. Luckily Angular's API allows us to easily redefine the properties' names using the : syntax. So let's remap out properties to highlightColor and borderColor so that the names don't collide with each other: ` Fig. 8 Now we can control both colors individually: ` Fig. 9 We could apply the same approach to mapping directive's outputs eg. ` Fig. 10 or ` Fig. 11 Adding host directives to a component Similarly to composing a directive out of other directives, we can apply the same approach to adding behavior to components using hostDirectives API. This way, we could, for example, create a more specialized component or just apply the behavior of the directive to a whole host element: ` Fig. 12 This component will render the paragraph, and apply both directives' behavior to the host element: ` Fig. 13 Just like we did for the directive, we can also expose and remap the directives inputs using the extended syntax. But if we would like to access and modify the directives inputs from within our component, we can also do that. This is where Angular's dependency injection comes in handy. We can inject the host directives via a constructor just like we would do for a service. After we have the directives instances available, we can modify them ie. in the ngOnInit lifecycle hook: ` Fig. 14 With this change, the code from Fig. 13 will use lightcoral as a background color and red as a border color. Performance Note While this API gives us a powerful tool-set for reusing behaviors across different components, it can impact the performance of our application if used excessively. For each instance of a given composed component Angular will create objects of the component class itself as well as an instance of each directive that it is composed of. If the component appears only a couple of times in the application. then it won't make a significant difference. However, if we create, for example, a composed checkbox component that appears hundreds of times in the app, this may have a noticeable performance impact. Please make sure you use this pattern with caution, and profile your application in order to find the right composition pattern for your application. Summary As I have shown in the above examples, the directives composition API can be a quite useful but easy-to-use tool for extracting behaviors into smaller directives and combining them into more complex behaviors. In case you have any questions, you can always tweet or DM me at @ktrz. I'm always happy to help!...

Jan 4, 2023

4 mins

TypeScriptDirectiveAngular

The “Bottom-Up” Roadmap to Leadership with Ty Allen, Fractional CPO at Neso Advisors

Ty Allen, Founder and Fractional CPO at Neso Advisors, discusses his product management journey, from his early days at Georgia Tech and a successful startup to leading teams across various industries. Ty shares valuable insights on building adaptable roadmaps, balancing tech debt with feature development, and connecting product strategy to company vision. He also highlights the importance of a “bottom-up” roadmap approach and maintaining flexibility while ensuring strategic alignment. Chapters 00:00 - 01:32 — Introduction to Leadership and Product Management 01:33 - 04:16 — The Early Days: From Georgia Tech to Startup Success 04:17 - 08:03 — Product Strategy and Roadmap Essentials 08:04 - 12:23 — The Power of Adaptable Roadmaps 12:24 - 16:30 — Managing Tech Debt and Security in Roadmaps 16:31 - 19:52 — The Commercial Lens: Monetizing Features and Value Creation 19:53 - 23:23 — Balancing Innovation and Maintenance 23:24 - 27:29 — Aligning Product Teams with Company Goals 27:30 - End — Final Thoughts: Roadmap Wisdom and Career Advice Follow Ty Allen on Social Media Linkedin: https://www.linkedin.com/in/tylerallen/ Sponsored by This Dot: thisdot.co...

Nov 4, 2024

1 min

Engineering LeadershipSoftware Engineering

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Deploying Nx workspace based Angular and NestJS apps to Heroku

Deploying Angular and NestJS apps to Heroku in an Nx workspace

Install Heroku CLI

Deploying NestJS app

Deploying Angular app

Summary

Chris Trześniewski

You might also like

Exploring Angular Forms: A New Alternative with Signals

Angular Signals for Simpler State Management and DOM Performance

Introduction to Directives Composition API in Angular

The “Bottom-Up” Roadmap to Leadership with Ty Allen, Fractional CPO at Neso Advisors

Let's innovate together!

You might also like

Exploring Angular Forms: A New Alternative with Signals

Angular Signals for Simpler State Management and DOM Performance

Introduction to Directives Composition API in Angular

The “Bottom-Up” Roadmap to Leadership with Ty Allen, Fractional CPO at Neso Advisors