Serving Angular Microfrontends Securely in Development Mode: Native Federation with HTTPS
Problem: Setting up Angular microfrontends with Native Federation for development can be challenging when you need to ensure secure communication (HTTPS) between the host application and the remote microfrontends. This article will guide you through the process of configuring HTTPS for your Angular Native Federation setup in development mode.
Scenario: Imagine you are building an e-commerce application using Angular Native Federation. You have a main application (host) and multiple remote microfrontends responsible for different functionalities like product listing, checkout, and user profile. In development, you need to ensure that all communication between these components happens over HTTPS to prevent vulnerabilities.
Original Code (without HTTPS):
// host application (main.ts)
import { bootstrapApplication } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { routes } from './app/app.routes';
import { provideRemoteModuleFederationConfig } from '@angular-architects/module-federation';
bootstrapApplication(AppModule, {
providers: [
provideRouter(routes, withInMemoryScrolling()),
provideRemoteModuleFederationConfig({
remotes: [
{
name: 'product',
exposedModule: './Module',
remoteEntry: 'http://localhost:4201/remoteEntry.js',
},
{
name: 'checkout',
exposedModule: './Module',
remoteEntry: 'http://localhost:4202/remoteEntry.js',
}
],
}),
],
});
Analysis:
The problem with the above code is that it uses http for the remoteEntry.js URL, making the communication insecure. To secure it, we need to use https instead of http. However, simply replacing http with https in development won't work as your local development server doesn't automatically run on HTTPS.
Solution:
-
Use a self-signed SSL certificate: The most common approach is to generate a self-signed SSL certificate and configure your development servers to use it.
-
Set up HTTPS for your development servers:
-
For Angular CLI:
ng serve --ssl --ssl-cert=path/to/cert.pem --ssl-key=path/to/key.pemReplace
path/to/cert.pemandpath/to/key.pemwith the paths to your self-signed certificate and key files, respectively. -
For Node.js servers:
Use a library like
httpsto create a server with the self-signed certificate. You can find numerous examples and tutorials online.
-
-
Update your remoteEntry URLs: Once you have your development servers running on HTTPS, update the
remoteEntryURLs in your host application's configuration:provideRemoteModuleFederationConfig({ remotes: [ { name: 'product', exposedModule: './Module', remoteEntry: 'https://localhost:4201/remoteEntry.js', }, { name: 'checkout', exposedModule: './Module', remoteEntry: 'https://localhost:4202/remoteEntry.js', } ], }),
Example:
Let's consider a basic example. Assuming your microfrontend applications are running on ports 4201 and 4202, you can generate a self-signed certificate using openssl like this:
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes
Then, you can start your development servers using the following commands:
# For Angular CLI
ng serve --ssl --ssl-cert=cert.pem --ssl-key=key.pem
Additional Tips:
- Trust your certificate: You may need to add your self-signed certificate to your browser's trusted certificate store to avoid security warnings.
- Consider a dedicated HTTPS development environment: Using a dedicated environment specifically for development with HTTPS can simplify your setup and provide a more realistic testing environment.
- Use a tool like mkcert: mkcert is a great tool for generating local SSL certificates for development, making the process much simpler.
Conclusion:
Securing your Angular microfrontends with Native Federation in development mode requires HTTPS communication. By generating a self-signed certificate and configuring your servers to use it, you can ensure secure communication between your host and remote microfrontends during development, building a more robust and secure application.
References:
This article provides a comprehensive guide to setting up Angular Native Federation with HTTPS in development mode. It covers the process, provides code examples, and offers additional tips for a secure and efficient development workflow. Remember to adapt these instructions to your specific project setup and configurations.
