Learn Aws, Express and Gatsby

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.

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.

Cloud Infrastructure Fundamentals with AWS

In this course, we'll build a video course platform using the AWS Amplify Admin UI. 

The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content. 

The AWS Amplify Admin UI focuses on data types rather than backend infrastructure. 

All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

Before taking this course, you should have a basic understanding of React Hooks.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Get Started with the AWS Amplify Admin UI

Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, Webpack, react-router, GraphQL, and other front-end tools to provide an excellent developer experience.

This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system. After tackling the file system you'll optimize for SEO as well as additional styles through ThemeUI that will support features like syntax highlighting in code snippets. Finally, you'll learn how to performantly process and render images. 

By the end of the course, you'll have a fully functioning developer blog that will serve as a base for larger production-grade applications.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Build a Developer Blog with Gatsby

Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

Not anymore!

With the AWS Cloud Development Kit (CDK), you are able to configure AWS services from your terminal & editor.

Even better, you can do your configuration, frontend, and backend all with the same language. 

In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK. You'll see how to start a project, develop it locally, deploy it globally, then tear it all down when you're done.

The services & development approach Tomasz demonstrates in this course are used by countless companies around the world. 

Is yours next?

Build an App with the AWS Cloud Development Kit

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

Create-React-App is a great tool for getting started with React, but at some point you may find yourself needing something more.

Gatsby is one of the most popular choices to move on to. It boasts a number of performance optimizations and a large plugin ecosystem (while still allowing you to use anything from the React ecosystem as well).

In this course, Khaled Garbaya will help you get started with Gatsby.

You'll start by building a single page "Hello World" before moving on to programmatically creating new pages and setting up static and dynamic routing.

Once you've got a grasp on the basics, Khaled will share his process for migrating an existing application built with Create-React-App project over to the Gatsby way of doing things.

You'll also get practice adding and configuring Gatsby build plugins for Tailwind CSS and sourcing data from external APIs.

After this course, you'll be ready to port existing code, or start a new Gatsby project from scratch!

Eject create-react-app and Use Gatsby for Advanced React App Development

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.

Along the way, you’ll learn powerful concepts like dynamic route handling in Gatsby, form management with React Hooks, writing custom React Hooks, context management and reducers in React, handling real-time interactions in a React app, creating serverless functions in Twilio, and setting up a Twilio account to support realtime video calling.

Build a Video Chat App with Twilio and Gatsby

There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you *actually* want to build. 

Analysis paralysis is real.

Enter: Gatsbyjs Recipes 

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

In this collection, you will learn how to:

- Set up Gatsby to use Recipes
- Create a multi-step Recipe
- Install NPM packages
- Configure Gatsby Plugins
- Create Custom files with Recipes

Getting Started with Gatsbyjs recipes

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Creating a Gatsby Source Plugin

When you see the word “theme” you might think of the visual aspects of a site or code editor where setting an option in one place can change the look everywhere.

Gatsby Themes take this idea to another level by allowing you to change and compose entire pieces of functionality.

In this advanced course, you will iteratively convert a fictitious SaaS website with marketing, eCommerce, blog, and dashboard pages into a set of horizontally composed Gatsby Themes.

After everything's been split up, you will build a deeper understanding of parent/child theme relationships by exploring the blog data model with schema customization APIs that allow us to create multiple child themes with data sourced from different node types.

Composable Gatsby Themes

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Building an API with Express

The Gatsby ecosystem supports a ton of plugins that allow you to easily source data from a variety of sources like a GraphQL CMS or Wordpress. But what if you wanted to source your own custom data?

In this collection, we'll walk through learning how to source custom data and create nodes in Gatsby in order to build out a Pokedex using the PokeAPI. We'll learn how to request the data in Gatsby's build process, create nodes with that data, query that data, and use it to create a Pokemon Pokedex UI.

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.

Because they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Gatsby Theme Authoring

We generally tend to avoid paying for things unless we actually need them, and the same goes for AWS

When using a cloud provider like AWS sometimes an unexpected charge may occur and we'd like to understand what are we being charged for and how to be notified whenever an unexpected charge occurs (especially when we're trying to stay within a free tier).

In this quick (4 minutes, 2 lessons) collection we're going to learn how to:

- Review the AWS Billing & Cost Management Dashboard
- Set up a billing alarm to be notified whenever our bill is larger than $5
- Review the AWS bill to understand how much are we going to pay this month and why

Use AWS Billing & Cost Management Dashboard to keep your AWS bill to minimum

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Up and Running with Gatsby

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue and Socket.io for Real-Time Communication

The JAMstack, short for “JavaScript, APIs, and Markup,” has been making waves in the world of web development. 

Building JAMstack applications removes the hassle of building out a backend from scratch, freeing you to focus on what really matters: your content.

In this course, you’ll learn how to build and deploy your own static Gatsby site that pulls external data from Contentful and then deploys to the web with Netlify. After the course, you’ll have all the knowledge you need to build a blog, marketing site, or portfolio with Gatsby. Just add content.


Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-content-rich-progressive-web-apps-with-gatsby-and-contentful-notes).

Build Content Rich Progressive Web Apps with Gatsby and Contentful

There are many ways to build a new website, but it can often be a slow, painful process for both beginners and those who have been working in the field for a long time.

With the modern tooling in the Jamstack world, we can take advantage of tools like Gatsby that can allow us to rapidly spin up a new project and TakeShape that can provide us with an all-inclusive content management system (CMS) to focus on the important parts of what makes our websites unique. 

In this collection, we'll walk through building a new company website from scratch. After creating a new example project in TakeShape, we'll use the TakeShape API to fetch that data and dynamically build a website using a Gatsby Starter for a TakeShape Startup project. With your new website, we'll learn how we can customize it to make it your own by adding new content and changing the branding like the logo and colors.

Quickly Create a New Company Website Managed by a CMS with TakeShape and Gatsby

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a `Map`, and accessing asynchronous data with `async/await`.

Pre-requisites:

- [Install curl](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like [express-async-errors](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

Build a REST API with Express 5 and node 14

This playlist will be a smorgasbord of Auth0 authentication and authorization topics. Everything from adding Auth0 to various apps, customizing your Auth0 settings, adding specific rules / audiences / features, and debugging errors. 