Learn Axios, Hapi and Zeit-now

zeit-now

[Vercel](https://vercel.com) is a hosting platform that works very well with [Next.js](https://nextjs.org) - because it's their framework! In this lesson, we prepare our project to be deployed to production by:

- Pushing code to [GitHub](https://github.com/)
- Deploying repo to [Vercel](https://vercel.com)
- Updating [GitHub OAuth app](https://github.com/settings/developers) to use production URL
- Updating [Supabase](https://supabase.com/) project to use production URL

## Resources

- [Deploy Next.js to Vercel guide](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy)
- [GitHub OAuth App settings](https://github.com/settings/developers)
- [Vercel](https://vercel.com)
- [Supabase URL configuration](https://app.supabase.com/project/_/auth/url-configuration)

Deploy Next.js App Router project to production with Vercel

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the [GitHub CLI](https://cli.github.com/) tool to create a public repo, and adding it as a remote origin for our project.

Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's [Authentication Site URL](https://app.supabase.com/project/_/auth/url-configuration) to our new live application URL.

## Extension ideas

- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to `update` and `delete` their own messages
- Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms

## Resources

- [GitHub CLI](https://cli.github.com/)
- [Vercel docs](https://vercel.com/docs)
- [Deploying Remix app to Vercel](https://vercel.com/guides/deploying-remix-with-vercel)

Deploy a Remix Application to Vercel from a GitHub Repository

Next.js is a minimalistic framework for server-rendered React applications.

Deploy a project on Vercel (formerly ZEIT) from a GitHub repository

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

Now by Zeit has recently been updated and now supports multi-language monorepos. In this lesson we'll build and deploy a simple app with an API powered by Node.js and Go.

If you want to follow along with this lesson, you will need to install [now-cli](https://github.com/zeit/now-cli).

Deploy a Monorepo to Now V2

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

In this lesson we will add support for deploying our application to [now.sh](https://zeit.co/now).

We will create a `now` object in package.json where we configure the name, the alias and the list of files we want to deploy.

We create an npm run-script called `now-build` and set the value to `true` to skip building the project on `now.sh`. The second run-script called `now` invokes `now deploy && now alias`. 

After this we sun `npm run build && npm run now` to build and deploy our app!

Deploy an Angular CLI Project to now.sh

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

In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the `now` service. Once properly configured, we’ll use the `now` CLI and publish our application to a production server.

Configure a React & Redux Application For Production Deployment and Deploy to Now

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.

Let's see how to use the `vue-axios` NPM package to make a request to an API, and make use of the data returned.

Make a request to an API with Axios in Vue

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

express

Now is a great way to deploy your node application, but the generated URLs aren't memorable or easily remembered. With Now's alias command, you can fix that. In this video lesson we'll cover how to add an alias to a deployment, giving you a custom `*.now.sh` subdomain, how to create an alias using your own custom domain name, how to list your aliases and finally how to remove an alias if you no longer want it.

Use Now alias for custom sub-domains

`now` allows you to take your JavaScript (Node.js) or Docker powered websites, applications and services to the cloud with ease,
speed and reliability. In practical terms, any directory that contains a `package.json` or `Dockerfile` can be transported to the cloud with one command: `now`.


Applications require a lot of sensitive information. Database passwords, API keys and secrets used for signing JWTs, just to name a few. If you're deploying your application using the Now CLI, you can deploy your secret information right through the CLI and give your code access to those secrets without exposing them directly in your source code. In this lesson, we'll cover how to add secrets to now, how to use a secret as the value of an environment variable and how to list and remove secrets in now.

Use Secrets When Deploying Applications with Now

A rich framework for building applications and services hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

hapi

hapi makes handling POST and PUT payloads easy by buffering and parsing them automatically without requiring additional modules or middleware. This video will demonstrate how to handle JSON and form based request payloads via hapi's route configuration.

hapi.js - POST and PUT request payloads

hapi automatically responds with JSON for any error passed to a route's `reply()` method. But what if your application needs errors rendered in HTML? This lesson shows how to implement friendly HTML error messages using hapi extension events.

hapi.js - Friendly error pages with extension events

hapi supports request validation out of the box using the joi module. Request path parameters, payloads, and querystring parameters can be validated with joi's simple, yet powerful, notation. This lesson covers the basics of validating requests using joi.

hapi.js - Request Validation with Joi

hapi has built-in support for parsing cookies from a request headers, and writing cookies to a response, making state management easy and straight-forward. It even has built in support for cookie encryption and auto detects when a cookie contains JSON, parsing or stringifying automatically.

hapi.js - Managing State with Cookies

Instead of using middlware, hapi provides a number of points during the lifecycle of a request that you can hook-in to provide additional functionality, called "extension events". This lesson will give you an introduction to using extension events, and show how they can be used to manipulate the request or response in-flight.

hapi.js - Extending the request with lifecycle events

hapi is a battle-tested, full-featured, framework for building web applications and services with Node.js. With integrated support for essentials like authentication, caching and validation, and a powerful plugin system, hapi is ideal for projects and teams of any size.

This course will introduce hapi, some of it’s plugins, and guide you through many of hapi’s core features.

Introduction to Node Servers with Hapi.js

View engines, or template engines, allow you to maintain a clean separation between your presentation layer and the rest of your application. This video will demonstrate how to use the vision plugin with hapi to enable template support.

hapi.js - View engines 

hapi does not support serving static files out of the box. Instead it relies on a module called Inert. This lesson will cover serving static files using Inert's custom handlers.

hapi.js - Serving static files

hapi's reply interface is one of it's most powerful features. It's smart enough to detect and serialize objects, buffers, promises and even streams. This video will demonstrate first hand how to use the reply method to send your data to the client, no matter the format.

hapi.js - Replying to Requests

Think of hapi's `reply()` function as "what you want to say" and the `response` object as "how you want to say it". While `reply` controls the payload sent to the client, the `response` object will allow you to control how the client interprets the payload by manipulating status code, content type, state and more.

hapi.js - Using the response object

Routing is a fundamental aspect of any framework. In this lesson, you'll learn how to use path parameters in hapi's router. We'll also touch on how the router uses specificity to order routes internally.

hapi.js - Route parameters

hapi doesn't ship with logging support baked in. Luckily, hapi's rich plugin ecosystem includes everything needed to configure logging for your application. This video will introduce good, a process monitor for hapi, and good-console, a reporter for good that outputs to standard out.

hapi.js - Logging with good and good-console

Creating powerful and context-aware tools for Cursor IDE becomes straightforward when leveraging information directly from your current project. In this lesson, you'll learn how to build a custom MCP (model context protocol) tool that intelligently requests essential details—such as the current project path and conversation summaries—from your Cursor project.

Workflow demonstrated in this lesson:

- Define MCP tool parameters to request specific project details.
- Pass project path and conversation summaries into your MCP tool.
- Automatically write or update files within your current project using these parameters.

Key benefits:

- Automate tasks with precision based on your active project's context.
- Simplify interactions by creating AI-driven CLI commands tailored to your needs.
- Open endless possibilities for integrating external APIs and advanced automation.

Through this practical demonstration, you'll gain a versatile technique for enhancing your development workflow in Cursor IDE.

[https://github.com/johnlindquist/mcp-cursor-tool-starter](https://github.com/johnlindquist/mcp-cursor-tool-starter)

John Lindquist

Build MCP Tools Using Project Context for Custom Cursor IDE Automation

Setting up custom MCP (Machine Command Protocol) servers in Cursor can involve tedious steps, such as configuring node paths or referencing additional commands. This lesson shows how to streamline this process by bundling your MCP server directly into a standalone executable.

Workflow demonstrated in this lesson:

- Use a simple MCP server project starter.
- Run a single bundling command to create an executable.
- Right-click the generated executable, copy its full path, and add that directly to your Cursor settings.

Key benefits:

- Eliminates the need for complex node path configurations.
- Simplifies the setup and integration of custom MCP servers into Cursor.
- Makes the server executable instantly accessible within your Cursor environment.

By following this streamlined approach, you can quickly and easily integrate custom MCP servers into Cursor, making your development workflow cleaner and more efficient.

[https://github.com/johnlindquist/mcp-cursor-tool-starter]()

Easy MCP Server Setup in Cursor IDE with Bundled Executables

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:
- set up and scaffold new applications,
- use file-based routing
- create nested routes
- manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Tomasz Ducin

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.


In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also **enables permalinks**, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Browse History in Tanstack Router

Browse history in TanStack React Router using the native history API for seamless navigation

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Hook into Route Lifecycle Hooks in Tanstack Router

Hook into TanStack React Router's lifecycle hooks for custom route logic and animations.

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels.

To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a `defaultNotFoundComponent` at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.



In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router.

When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like `employeeId`.

However, when using `useParams` globally without specifying a route, it requires an options object with `{ strict: false }`, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.



Access Dynamic Route Parameters with useParams in Tanstack Router

Access dynamic route parameters with useParams in TanStack React Router for type-safe routing.

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures.

We explore how to create additional nested routes by converting files into directories, allowing for further nesting.

For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `index.tsx` file inside it to define the route component for this nested route.

This approach provides flexibility in organizing files while maintaining the convention that file names and locations align with route paths. We also see how to adapt existing components and loaders to work with these reorganized routes, enabling features like edit forms or delete actions (or whatever) within nested routes.


Reorganize File-Based Routes in Tanstack Router

Reorganize file-based routes in TanStack Router for flexible nested routing.



In this lesson, we learn how to parametrize the loader for a nested route in TanStack Router.

We focus on a nested route like `/employees/$employeeId`, where the `$employeeId` is a **dynamic parameter**.

To fetch data for this route, we use a `loader` function that accesses the `$employeeId` parameter. This is achieved by using the params object available in the `loader` function, which contains the dynamic segments of the URL. We then use this parameter to call a function like `getEmployeeById`, which fetches specific employee details from an API.

We highlights that TanStack Router **automatically infers types** for these parameters, ensuring type safety for nested routes.

Parametrize Route Loader for Nested Route in Tanstack Router

Parametrize nested route loaders in TanStack Router using path parameters

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing.

We start by creating a new `employees` directory and files to represent nested routes, such as `/employees/$employeeId`. The `$` symbol is used to denote dynamic parameters.

We then use the `<Link>` component from TanStack Router to create links to these nested routes, passing necessary parameters.

To render the nested content, we use the `<Outlet>` component (nested), which automatically renders child routes. This approach allows us to dynamically display stuff under a nested route.

All the time, the TanStack Router generator automatically updates the route tree based on file changes - our routing configuration remains consistent 🔥



Create Nested Route and Nested Outlets in Tanstack Router

Create nested routes and outlets in TanStack Router using file-based routing

Search

Search Results