Learn Egghead, Nginx and Wordpress

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

wordpress

We'll look at the minimum requirements to create your own theme. With two files, style.css and index.php, you have all you need to get started. We'll look at how to pass information about the theme to WordPress and how to set-up a direct link to the admin panel.

Create a Stand-Alone Theme in WordPress

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Ghost has two hard dependencies which need to be installed before it can run. Those are Nginx and Node.js.

We will start by installing Nginx and set Nginx up to control the traffic coming into the EC2 server. After this, we'll install NVM using the raw install script that they provide on GitHub. With NVM installed we can then install the latest version of Node.js


Install Nginx and Node.js on a AWS EC2 Server

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

### While watching, consider...

- What are the tradeoffs of using a CMS for a site?
- Would headless WordPress work for me or my clients in this scenario?

WordPress as a Headless Content Management System (CMS) and GraphQL API

There are two approaches to dealing with an extensive media library when using a Headless WordPress solution. The first is that during the build step, the assets are queried and downloaded to a static folder that's served using a CDN. The second approach is that you use a third-party solution like Cloudinary to host your images.

In this lesson, we will use the [Cloudinary WordPress plugin](https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/) to migrate all images from our existing posts to Cloudinary. This approach provides the benefit of managing the assets directly on the WordPress interface and using Cloudinary to serve them.

## Next steps for you to try:

- Add additional data via WordPress Plugins
- Build a frontend for your data with Gatsby or Next.js

Manage Media Assets in a Headless WordPress Site using the Cloudinary WordPress Plugin 

One of the strengths of WordPress is the commenting system. In previous lessons, we have seen how to get the comments alongside the posts.

In this lesson, will use Application Passwords, a WordPress plugin that allows authentication via non-interactive systems (in our case, using REST API) to provide authentication when posting a comment.

Using the auth functionality provided by our API client, we'll `POST` to Posts comments, resulting in a comment associated directly to the HTML of the post.

There are different strategies for publishing comments. The first one is approving and triggering a build using WebHooks. The alternative is using a third-party system, something like DISQUS. But the benefit of keeping the comment directly associated with the HTML is that it becomes indexable and searchable.

Add Comments to a Headless WordPress Post using Application Passwords

It is critical for development that your local environment accurately reflects your remote site. In this lesson, you will learn how to import plugins, configuration, and content from a remote to a local WordPress instance.

There are a few steps to do this:

- Create a fresh install of a WordPress Instance
- Copy the `wp-content` folder over to your local site
- Activate all the necessary plugins that allow the instance to function properly
- Export and import custom post types
- Upload the generate content XML file to the local site

Replicate a Remote WordPress Site Locally by Importing Content and Logic

Not all the data in a WordPress instance needs to be backed up since it is part of the core install and can be re-downloaded at any time. 

The two types of data that you should be concerned with backing up are the actual content of the site as well as the custom logic that you add to WordPress. All the custom logic lives in the `wp-content` folder, the only part of the file system that needs backing up.

Backup Your Content and Custom App Logic in a WordPress Instance

One of the benefits of Headless CMS is that you can build the frontend (almost) however you would like. For instance, you don't have to create a WordPress site. You can use any new cutting edge technology like React or Vue.

In this lesson, we'll add fake data to our WordPress instance with the Faker Press Plugin. We can easily add new users, posts, custom posts, and comments.

Having fake data provides additional information about how to structure our data in a Headless solution.

Add Fake Data to a WordPress Instance with the Faker Press Plugin

The benefit of GraphQL is to have all the data you need in one request, with nothing more or less.

If you had a REST API, you would typically receive the entire object back in your response. This leads to over fetching and can result in performance issues. With GraphQL, you only receive the data you explicitly request.

In this lesson, we will build a GraphQL query that queries only the essential data needed on the front end to display a post.

Build a GraphQL Query with Exactly the Data you need for a Posts Page

The same problem occurs as the [previous lesson](https://egghead.io/lessons/egghead-adding-custom-post-type-to-graphql?pl=headless-wordpress-4a14) with the blocks that Gutenberg exposes in our API with the GraphQL endpoint. 

In this lesson, we will show how to expose the Gutenberg Block data to the GraphQL layer by adding the `wp-graphql-gutenberg` plugin. There are a couple of things to note about the plugin. Whenever you use a new block type in your editor, you will have to update the blocks registry in the plugin so that it properly exposes the data in GraphQL. Also, when you query for block data you will need to be explicit in the attributes that you request. This behavior is different from REST where REST will serve you all the data available.

Expose Gutenberg Blocks to the Headless WordPress GraphQL Endpoint

The data that is added to the REST API through Advanced Custom Fields (ACF) is also not present automatically in our GraphQL endpoint.

You'll be used to the problem and workflow to fix the issue now.  

In this lesson, we will add the `wp-graphql-acf` plugin which allows us to expose ACF data to our GraphQL endpoint. There's even a UI to flip the switch here.

Expose WordPress Advanced Custom Field (ACF) Plugin Data to the GraphQL Endpoint

In this lesson, we will expose a Custom Post Type to the graphQL layer. This would normally be done in the Custom Post Type Plugin UI but if you browse the options you'll notice that there is no setting for GraphQL. This means we will need to write a custom function that exposes our user-created post type.

We will use `add_filter` in our `headless.php` file to expose the chairs post type. The filter we'll use is `register_post_type_args`. There are three fields that need to explicitly declared: `show_in_graphql`, `graphql_single_name`, `graphql_plural_name`.

Add a Custom Post Type to the GraphQL Headless WordPress API Endpoint

GraphQL is a popular solution for many web applications because of the flexibility it offers the client by giving you exactly the data you need.

And there's a WordPress Plugin for it! We'll find and install the plugin in the Plugin Directory.

You'll notice that the custom post types and the fields from ACF aren't exposed by GraphQL. These will need to be added manually.

Create and Test a GraphQL Endpoint for WordPress with wp-graphql

If there's something you want to do with your WordPress site, there is likely a plugin that will make it easy!

In this lesson, we will show how you can use Markdown to write your posts. We will install the `WP Githuber MD - WordPress Markdown` plugin to easily add this functionality.

Write Markdown Posts in WordPress with the WordPress Markdown Editor Plugin

In this lesson, we will install the Advanced Custom Fields (ACF) plugin and discuss some of the advantages of using this. ACF gives us increased options of what we can do with our different types. For this example, we'll extend the Chair field to include fields for price, material, and weight.

These fields are not automatically exposed to the API. We will need to install the ACF to REST API plugin which will add an `acf` field to our REST API object for you to access this data on the front end. This keeps the data pure so that you can receive them as props instead of being forced to extract the data from the rendered content.

Add the Advanced Custom Fields (ACF) Plugin and Expose those Fields to the REST API

There are dozens of options available in Gutenberg for building a post, the amount of data coming through the Headless WordPress API can make it hard to manage presentation on the front end. To handle this we can filter out blocks that we won't use so that we can reasonably expect what data will be coming through the API.

In this lesson, we will limit the blocks available in the editor by adding the `allowed_block_types` filter.

Filter Blocks Types that are Exposed in Gutenberg for a Predictable Headless WordPress API

We will expose the Gutenberg blocks to the REST API. Rather than having a single content blob, we now have the content split into blocks on the API. We can get accompanying data from each block and have more control when we render on the frontend.

This will be done by installing the `wp-rest-blocks` plugin. The catch here is that it isn't available in the WordPress plugin directory. We will need to download a zip from the `wp-rest-blocks` GitHub to then upload and activate in WordPress.

Expose Gutenberg Blocks to the REST API with the wp-rest-blocks Plugin

In this lesson, we explore the Gutenberg editor and discuss how this is reflected in the database. Gutenberg has endless options of how you can create and style posts in the WordPress UI. There are plenty of content blocks to choose from and each of those blocks has several options with how you can customize the content to your needs.

The downfall of this experience is how it is exposed in the API from the database. The whole post is saved to the database as a single rendered blob of HTML. This blob has to be parsed and handled on the front-end without the context of the blocks in the editor. If you were using React, you would need to use `dangerouslySetInnerHTML` which is not optimal.

Compare the Gutenberg Editing Experience with the Resulting REST API Structure

WordPress ships with a set of default content types that you might be very used to Posts, Media, Pages, and Comments. In many cases, we'll want custom content types that fit our use-case. To do this, we'll create custom post types.

In this lesson, we will use a plugin, Custom Post Type UI, to create a custom post type and see how to retrieve the data in the REST API.

Add a Custom Post Type in WordPress with the CPT UI Plugin



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

Search

Search Results