How To Dev

Introduction Amazon S3 (Simple Storage Service) is an object storage service offered by AWS. It's designed to be highly scalable, available, and secure, making it a popular choice for a wide range of use cases, from hosting static websites to storing backups and big data. Basic Concepts Object Is a file. Can include metadata to describe information for that file. Bucket Is where objects are stored. Can create one or many buckets in the regions that Amazon supports. The bucket name must be a unique name globally. Can configure permissions for the bucket to allow access and modification of files inside. Amazon S3 stores data as objects in buckets. AWS CLI First, access this link to install the AWS CLI according to the operating system you are using: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html Use the following command to check the version after successfully installing the AWS CLI: aws --version Next, use the following command to configure AWS inform...

Introduction If you saw my previous post, I showed you how to upload files to AWS S3 using NodeJS, but that isn't actually the most efficient way to handle file uploads. The best way to handle secure file uploads to AWS S3 is by using Presigned URLs. How the process works: The Frontend requests an upload link from the server. NestJS generates a temporary, short-lived URL from AWS. The Frontend uses that URL to PUT the file directly to S3. This saves server resources because the file data doesn't have to pass through your backend. Prerequisites If you are new to AWS S3, please check out my previous posts. You’ll need to understand the basics, including how to set up your AWS Access Key ID, AWS Secret Access Key, and how to create an S3 Bucket before moving forward. Implementation Details First, install the NestJS CLI and create a new project: npm install -g @nestjs/cli nest new {project name} Create a .env file and add your AWS credentials: REGION = {REGION} ACCESS_KEY_ID ...

Introduction Angular is a TypeScript-based, open-source web application framework developed by Google, widely used for building dynamic and feature-rich single-page applications (SPAs). Advantages Two-way data binding: Synchronizes data between the view and model seamlessly. Component-based architecture: Enhances code reusability and maintainability. Built-in tools: Offers robust features like dependency injection, directives, and routing. Community support: Benefits from an active developer community and regular updates from Google. Disadvantages Steep learning curve: Requires understanding of TypeScript, RxJS, and other Angular concepts. Complexity: Can be overwhelming for smaller projects due to its size and structure. Performance issues: May face challenges with performance in very large applications. Key features Here are the key features of Angular that I will introduce in this series: Lifecycle Hooks: A set of methods triggered throughout a component’s lifecycle—from creation to...

Introduction I've already covered implementing microfrontends for React using Vite and Module Federation . In this article, we'll continue that discussion by implementing a microfrontend using Angular. Since Angular is a complete framework, the integration of microfrontends comes with automatic tooling support. We won't need to configure as much as we did with React. Detail First, you need to install the Angular CLI: npm install -g @angular/cli Note that in this article, I'm using Angular version 20. If you're using a different version, please ensure that Module Federation is compatible with that Angular version. As per the theory I discussed in previous articles about Microfrontends, we need a shell app and a remote app. In this article, I'll also add a remote component to demonstrate how to integrate both a remote app and a remote component into the shell app. Creating the Remote App Use the Angular CLI to execute the following command: ng new remote-app...