 Courses from Sam Julien

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Now that you have a high-level understanding of AWS' most commonly used services, you are ready to move on to more advanced topics! 

In this lesson, I recommend that you learn the following: 

- Route 53
- CloudFront
- CloudFormation
- IAM
- How billing works in AWS

Course Outro: Where to Go After Learning the Cloud Infrastructure Fundamentals

Currently, the only way to run your lambda function is with the test button. In order to run the function from elsewhere, you need to create a trigger. In our case, we will be creating an HTTP endpoint with API Gateway. 

API Gateway wraps requests and responses in its own format, which you will learn how to account for when writing your lambda functions in this lesson.

Add an API Gateway HTTP Endpoint Trigger to a Lambda Function in AWS

After creating a lambda function you get access to an in-browser editor where you can write, test, and deploy your function.

When testing your function you get access to a menu where you can edit the event body that gets passed to the lambda function.

Write and Test Your First AWS Lambda Function 

Lambda functions are incredibly useful. They are affordable and can be triggered in a variety of ways. One of the most common is through an HTTP endpoint. 

You can make an entire API without ever having to manage a server by writing Lambda functions and creating HTTP endpoints for them using API Gateway.

Overview of AWS Lambda and API Gateway 

To streamline the build and deploy process it's a good idea to create a deploy script in your package.json. The script is aws s3 sync and then the path to the build folder and the URL to your S3 bucket. 

Streamline Deployments to AWS S3 with a Deploy Script in package.json 

In order to deploy your static site to S3 from the command line you need to add your generated user credentials. 

Do this by running `aws configure` and pasting in the credentials that were generated after creating the user with IAM.

Configure an AWS S3 User in the AWS CLI 

You can drag and drop files directly into your S3 bucket but that isn't the most efficient workflow most of the time. In order to upload our static site from the command line using the AWS CLI we will have to create a new user with the correct permissions using IAM. 

The IAM data model is an advanced topic that we won't be covering in this lesson. But, what will we cover is how to create a user and assign them the existing policy,  `AmazonS3FullAccess`

Create a User with Programmatic S3 Access with AWS IAM 

Creating an S3 bucket is a straightforward process. You just have to make sure that you are using a unique name. But, there are a couple of things you need to do in order to host a static site on an S3 bucket. 

First, under the properties tab, you need to enable static website hosting. Make sure to provide the index document to your app. 

Second, you need to add a bucket policy. You can find examples in the policy examples docs. In our case, we will use the example under "Granting read-only permission to an anonymous user"

Bucket policy that was copy pasted: 

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action":["s3:GetObject", "s3:GetObjectVersion"],
            "Resource:["arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"]
        }
    ]
}
```

Create an AWS S3 Bucket for Hosting a Static React App 

S3 is short for Simple Storage Service. It uses "buckets" to store static files and sites. Buckets are basically storage containers. They are regional and each has a globally unique name.

Overview of S3 (Simple Storage Service)

**Delete your RDS instance now!** RDS instances are expensive. It would be unfortunate to create one for tutorial purposes and forget about it until you're charged a month from now. 

To delete an RDS instance select it in the list view, open the actions drop-down menu, select the delete option, go through the acknowledgments, then select the delete button.

Delete an AWS RDS Instance

There are a variety of options to choose from when creating a new RDS instance. What engine to use, the engine's version, templates, standby databases, private clouds, etc. In this video, we go over each of the options and what they mean. 

But, an RDS instance can get expensive fast. That's why you will also learn how to configure your instance so that is affordable for dev/test purposes.

Create a New AWS RDS Instance

RDS stands for Relational Database Service. You can select from database engines such as PotgreSQL, MySQL, Oracle, and amazon's Aurora. 

Pricing can get expensive but the AWS free tier, per month, gives you 750 hours of Single-AZ db.t2.micro instance running mySQL, MariaDB, PostgreSQL, Oracle, or SQL Server. You also get 20GB of general storage, and 20GB of backup storage.

Overview of AWS Relational Database Service (RDS) Features and Pricing

Amazon has a ton of options for databases. But the three most common ones that you may come across are DynamoDB, DocumentDB, and RDS. 

DynamoDB is a fully managed service. This comes at the cost of flexibility. 

DocumentDB is basically a MongoDB NoSQL database. It's more flexible than DynamoDB but requires more management from you. 

RDS stands for Relational Database Service and it is probably the most familiar to the majority of us. You can select from database engines such as PotgreSQL, MySQL, Oracle, and amazon's Aurora.

Compare AWS, DocumentDB DynamoDB and RDS

When you hit the connect button to your instance, AWS actually gives you instructions and copyable commands for you to run to connect to your instance. 

After connecting to your instance you will have access to a real live server! From there, the first thing you'll almost always want to do is check for updates and upgrade them using `sudo apt update` and `sudo apt upgrade`

Connect to an AWS EC2 Instance via SSH 

Creating an EC2 instance is straightforward but there are a few things to keep in mind. 

When you create an instance you have to choose its AMI (Amazon Machine Image). The AMI is the operating system and other software of your EC2 instance. When selecting make sure to pay attention to what is eligible for the free tier

After selecting your AMI you can go into your configure your instance and choose options for the network, public IP, etc. Then you choose your storage option, create tags, and configure the security group. In your security group configuration, you can create rules for your instance's traffic.

Create and Configure an AWS EC2 Instance 

EC2 instances are what we can think of as traditional servers. You can choose your hardware options and OS. Pricing is based on server uptime and if you control when that uptime is. 

You can see the details of their pricing here, [Amazon EC2 pricing](https://aws.amazon.com/ec2/pricing/). As you can see there is a free plan that gives you 750 hours of Linux and Windows t2.micro instances a month for the first year.

Overview of AWS Elastic Compute Cloud (EC2) Purpose and Pricing 

In this lesson, you will learn the key concepts that give cloud infrastructure its edge. 

AWS trades capital expenses for ongoing variable expenses, mitigating a huge amount of financial risk when starting a new business. 

When you lose traffic, you eat the costs of both your servers and your reduced revenue. When you get an unexpected spike in traffic, you can lose a huge amount of potential revenue if your servers can't handle the traffic. Elasticity mitigates these risks by giving you the ability to acquire and release resources on demand. 

The advantages clearly explain why the cloud market has become a $100 billion dollar industry.

Understand the Advantages of AWS and Cloud Services 

In this course, you will learn what the cloud is and why AWS is so big in the industry, learn to use the AWS dashboard with confidence, and become familiar with the key services EC2, RDS, S3, and Lambda. 

To learn more about creating billing alarms check out, [Review billing dashboard and set up a billing alarm to avoid paying too much for AWS - Tomasz Łakomy](https://egghead.io/lessons/aws-review-billing-dashboard-and-set-up-a-billing-alarm-to-avoid-paying-too-much-for-aws)

Check out [this documentation](https://aws.amazon.com/cli/) to set up the AWS CLI

Introduction to Cloud Infrastructure Fundamentals with AWS

You're going to find cloud services being used at nearly any enterprise you work for. So it's important for us developers to at least have a high-level understanding of this infrastructure.

And since AWS has the dominant share of the cloud market, being familiar with it is incredibly valuable and opens a lot of doors.

But gaining that familiarity isn't easy. Just browsing through the list of 200+ services is overwhelming. 

Getting started with learning AWS usually involves having a dozen or more open tabs and the feeling that you're going down a rabbit hole that never ends.  

This course is an alternative to that stress. It has been structured like a boat tour on a river of knowledge, linearly guiding you through the core of AWS. 

By the end of this course, you will be confidently spinning up servers, creating relational databases, storing static assets, and writing serverless functions with confidence. 

So, whether you need to learn AWS for your current job or are looking to earn your cloud practitioner certification, start watching this course and gain the skills you need today.

Cloud Infrastructure Fundamentals with AWS

Bite-size video tutorials for badass web developers.

egghead

I get asked all the time how I get that cool highlight effect for my code in my talks. It's actually a technique in Keynote my friend [Mike Ryan](https://twitter.com/MikeRyanDev) taught me a few years ago. In this screencast, I'll walk you through the steps so you can add this effect to your own talks. This technique should also work in PowerPoint and Google Slides, though the steps might look a little different.

Animate and Highlight Code in Keynote Presentations

In this course, we will be setting up a server that uses Elastic Compute Cloud (EC2) as well as a database through Amazon Relational Database Service (RDS). In order for these two services to talk to each other, they will need to live on the same Virtual Private Cloud (VPC).

Throughout the course, as you build out functionality, the settings for your VPC can be modified or disrupted causing painful errors. This lesson is to give you a tour of the key attributes of a VPC and show you the default settings so that you can revert back if you find yourself in a bad state.

We'll cover what a VPC looks like in the AWS console, Subnets, Internet gateways, route tables, and the Network ACL.


Understand the Default AWS Virtual Private Cloud Network


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Create AI Prompts Based on a Directory of Files


With Cursor's "Composer" feature, you can select and entire directory and make changes to every file. This video walks through the process of selecting a folder and refactoring all the files from JavaScript to TypeScript. It also demonstrates other tips around generating terminal commands and customizing your main Cursor "Rules for AI".


Run an AI Refactor on Every File in a Directory with Cursor


This lesson breaks down the concept of asynchronous iterators and generators in JavaScript. Using the Node.js glob function as a practical example, you'll learn how Array.fromAsync facilitates the creation of arrays from asynchronous iterables and how generators can improve performance in file processing tasks.

Efficient File Processing in Node.js with Async Generators and Array.fromAsync

Learn the concept of asynchronous iterators and generators in JavaScript and Node.js Array.fromAsync


With the introduction of Svelte 5, the Svelte team has created a CLI, `sv`, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).

This lesson will create a Svelte project using the new `sv` CLI and build a counter component to showcase the new `$state`, `$derived`, and `$effect` runes that ship with the new version.



Get Started with Svelte 5 using the sv CLI

You'll create a SvelteKit project using the sv CLI and build a counter component showcasing Svelte $state, $derived, and $effect runes.



pnpm ships with a streamlined, easy way of managing Node.js versions for youself and your team. This video demonstrates why pnpm uses a specific version of Node.js, how to configure it globally, and how to set up your project so that anyone who is running your project will automatically use the same version of Node.js even if that version of Node.js is not installed.


use pnpm as a Node.js version manager

How you build with Angular has changed quite a lot over the years.

For example, the `inject` function was introduced in version 14 but you might still be familiar with Angular's constructor injection.

Similarly, structural directives like `ngif` or `ngfor` have been replaced with `@if` and `@for` blocks since version 17 and beyond.

These are patterns that need to be adjusted if you want to stay up-to-date with the latest Angular has to provide.

Luckily, Angular gives you great tools in the form of a migration CLI for supporting your migration efforts as you incrementally update your App from older version features and patterns. 

When you're done with this course you'll know how to target specific features, folders, and files to migrate to the latest Angular version.

You'll learn how to 'migrate':
- Structural directives with control flow syntax
- Constructor dependency inject to inject function
- Make components standalone
- Lazy load routes
- Input/Output decorators to signal-based API


Angular Migrations in Practice

Migrate old Angular patterns for version 18 and beyond

When we import assets in React components outside of the `public` folder that Nitro reads for assets by default when running the development server we need to tell Nitro how to find them with the `devProxy` configuration option.

```typescript
export default defineNitroConfig({
  renderer: './renderer.ts',
  devProxy: {
    '/app/assets': 'http://localhost:5173/app/assets'
  }
})
```

This is ultimately inadequate in scenarios where you want to import assets arbitrarily and have them "just work" but works in a pinch.



Use devProxy in Nitro Config to Serve Static Imported Assets in Dev Mode via Vite

Learn how to use devProxy in Nitro Config with Vite to serve static assets in React components in dev mode.

Start with a basic Vite React TypeScript app and enhance it for production use by integrating Nitro as the server. 

This requires a custom Vite plugin for nitro as well as a custom renderer and manually creating Nitro config.

The other way to approach this would be to add Vite to a Nitro app instead. Same basic result.

The [Nitro config reference](https://nitro.unjs.io/config) is a great read of you'd like to explore more options.


Configure a Vite React TypeScript Application on a Basic Nitro Server

Configure a Vite React TypeScript app by integrating Nitro for production, using custom plugins, renderers, and configs.

Quick Get Started style introduction to Vite using `pnpm create vite` with the React TypeScript template.

See [more in the official docs](https://vite.dev/guide/).

Create a Vite App with the React TypeScript Preset

Quick guide to start a Vite app using React TypeScript template with pnpm.

Over the years, your application have grown huge. Sometimes, really HUGE.

Many developers have contributed to the codebase. One day they pushed one coding style, a different one another day. Sometimes even different patterns and solutions for similar problems.

You want to keep your codebase consistent. In the Angular ecosystem, there were well established patterns for doing things the right way ™️. But the old solutions are being challenged by signal-based approach.

Eventually, you ask yourself the key question: **Should you integrate with the NEW solutions or stick to the battle-tested ones, but already considered LEGACY**?

That's a very good question indeed. Don't rush with architectural decisions 🤓.

## First, think of what problems you want to solve by introducing the change.

Do you have 1k LoC Angular components? Maybe even 2k? Do you and your team enjoy working with these? 😏

Where does the **domain logic and state management code** belong to - do you have a clear guidance on which code should be put where? Have you spot that different devs implement similar features in totally different ways?

Do you keep on asking the same questions over and over again: **whether this certain piece of code** should be **imperative** (plain old object properties and variables) or **reactive** (streams)? It'd be nice to keep all thinga reactive, but more often than not, it introduces complexity.

## Second, think of long-term consequences.

You are going to have more than one way to **manage the state**. But is that really an issue? If your codebase is modular, separate modules should not depend on each other in any way. Inner abstractions of one should be invisible to the other, etc.

You are going to introduce a **new tool**. On one hand, you need to learn it, and so does your team. But on the other hand, it's a breathe of fresh air. And it's useful to question the way you've been doing things so far. Maybe there's a more effective way?

You are going to embrace signal-based APIs. And that means taking taking advantage of Zoneless Angular. This means using all modern Angular APIs. And you know that signals are the future. Why would you want to stick to the **less performant, less type-safe, less flexible and, objectively, less effective solutions**?

## Finally, plan your INCREMENTAL integration.

INCREMENTAL is the absolute keyword here. You don't want to tell your PM you need to stop delivering features because of a refactor.

Actually, there's no need for a "refactor". Just pick the first new feature to be implemented. Or pick the one that needs to be extended.

NGRX Signal Store allows you to create both very simple & small stores, as well as bigger ones. **Composition** is the key here.

**Start simple**.

Create a `withState` section with the signals that hold the state. That's already reactive. And relatively simple.

```ts
const initialState: CartState = {
  items: ...,
  rebate: ...,
}

export const CartStore = signalStore(
  withState(initialState)
);
```

Create a `withMethods` section to provide ways to change the state:

```ts
export const CartStore = signalStore(
  ...
  withMethods((store) => ({
    addItem(item: ShoppingItem): void {
      patchState(store, (state) => ({ items: [ ...state.items, item ] }));
    },
    ...
);
```

Create a `withComputed` section to provide all derived computations:

```ts
export const CartStore = signalStore(
  ...
  withComputed(({ items }) => ({
    totalPrice: computed(() => items().reduce(...))
    ...
);
```

**Start simple**.

Now you can (literally) **`inject` this code into your existing solution**. All you need is to inject your brand new NGRX Signal Store implementation into a component, or a service:

```ts
@Injectable()
class ExistingBigService {
  cartStore = inject(CartStore)
  //...  
}
```

and that's it! What's beatiful is that NGRX Signal Store should remain an implementation details (of a component, service, etc). It **shouldn't leak outside to the entire application unintentionally**. Small NGRX Signal Stores help us to **keep logic more modular**.

Don't hesitate - give NGRX Signal Store a try! Start with the [_**Scalable Signals Angular Architecture with NGRX Signal Store**_](https://egghead.io/courses/scalable-signals-angular-architecture-with-ngrx-signal-store-a33abd39) course now!

Integrating NGRX Signal Store with an existing Angular application

Integrate NGRX Signal Store into your Angular app incrementally for modular, reactive state management. Improve consistency and performance with modern APIs.

Sam Julien

Search Results