Learn Flow, Mongodb and Serverless

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

MongoDB has a quite powerful aggregation framework that allows you to write data processing pipelines. Documents in the MongoDB collection go through a series of stages or a pipeline that transforms them into an aggregated result. In this short video series, you will learn how to write aggregations in MongoDB.

mongodb

MongoDB Aggregation Framework

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Create a TypeScript powered serverless React application

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

express

Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect to creating an API.

Select by ID with Mongoose and Express

flow

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Primitive Types in Flow

Learn how to import data into your MongoDB and then use Express to serve a simple Node.js API.

First API with Node.js, Express and MongoDB

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Up and Running with Facebook Flow for Typed JavaScript

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

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

Setup Nuclide to use Flow and Eslint (Mac)

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

Type Check React Components With Flow

In this lesson we are going to take a React and Redux application and add flow types throughout. This includes type checking a react component, a reducer, some actions, and a connect method. 

Type Check Redux Apps with Flow

Aggregation in MongoDB is really powerful and allows you to create solid pipelines to extract and transform data. This is an introductory video that aims to demonstrate the basics of aggregation — we will see how to create some basic pipeline to extract data using `$match` and manipulate the output using `$project` stages.

The aggregation stages/operators covered in this video are:

* [`$match`](https://docs.mongodb.com/manual/reference/operator/aggregation/match/index.html)
* [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
* [`$concat`](https://docs.mongodb.com/manual/reference/operator/aggregation/concat/)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/)


Find and Manipulate Data using Aggregation in MongoDB

In our last lesson, we learnt the basics of MongoDB aggregation and saw how we can [find and manipulate data](https://egghead.io/lessons/mongodb-find-and-manipulate-data-using-aggregation-in-mongodb). In this continuation, we will see how we can sort, skip and limit records during our aggregation stages.

The aggregation stages/operators covered in this video are:

* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
* [`$skip`](https://docs.mongodb.com/manual/reference/operator/aggregation/skip/index.html)
* [`$limit`](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Sort, Skip and Limit Records in MongoDB Aggregation

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

mongoose

One of the great things about NoSQL databases is that you do not have to decide on your data schema while developing. As you get closer to production though, you'll often want to more clearly define the shape of the data you are working with.

Enforce Schemas in MongoDB using Mongoose Models

Unlike the relational databases, MongoDB doesn't allow you to join collections using the simple `find` queries, but you can write the join queries using the aggregation framework. In this lesson, we learn how to join two collections to get the data in the format we want.

The aggregation operators that we cover in this video are:

- [`$lookup`](https://docs.mongodb.com/manual/reference/operator/aggregation/lookup/index.html)
- [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
- [`$arrayElemAt`](https://docs.mongodb.com/manual/reference/operator/aggregation/arrayElemAt/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Write Joins in MongoDB

In this lesson, we learn how to group documents in a collection using `$group` operator similar to `GROUP BY` in SQL. We also look at `$sum` operator and see how we can use it to count the number of documents as well as get sum of some field in our grouped results.

Here is the list of operators that we cover in this lesson:

* [`$group`](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
* [`$sum`](https://docs.mongodb.com/manual/reference/operator/aggregation/sum/index.html)
* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Group By and Sum in MongoDB

[In our last lesson](https://egghead.io/lessons/mongodb-group-by-and-sum-in-mongodb?pl=mongodb-aggregation-framework-3e5d), we saw how we can use `$group` operator to simulate `GROUP BY` operations that you might be aware from SQL. A minor gimmick with `$group` is that it only works with the scalar field values and not arrays. There might be times when you would want to group by some array fields; in this lesson, we learn how to do that using `$unwind` operator

Here is the list of operators that we cover in this lesson:

- [$unwind](https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/index.html)
- [$group](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
- [$sort](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
- [$limit](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Perform Group Operations on Array Fields in MongoDB

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

Netlify makes developing serverless functions easy with the netlify-cli (`ntl` for short). You'll be able to build and test functions locally as well as publish your functions from the CLI. 

We will install netlify-cli globally and create a `netlify.toml` file that will configure where the CLI should look to run functions that we define, in our case `functions/`. When the application is served up, Netlify runs functions under `/.netlify/functions/`.

Set up a Local Development Environment for Serverless Functions Using Netlify

There are a few ways you can run Netlify serverless functions while you are developing them. 

You can: 

- Navigate to the directory under the `/.netlify/functions/` path
- Curl them using the full URL
- Use an app like Postman

Manually Trigger Netlify Serverless Functions Locally

A serverless function is something that is going to allow us to do server-like things without having to manage servers, but an important distinction here is that serverless does not mean that there are **no** servers. 

The environment is actually running on top of an operating system and uses physical servers, but the responsibility for provisioning and managing the infrastructure belongs entirely to the service provider.

Some of the benefits of using serverless functions: 

- **Enhanced scalability.** No need for developers to implement code to scale. It scales automatically.
- **Reduced time to market.** Serverless is an optimized set of tools for building quickly.
- **No boiler code.** A serverless function is just a tiny piece of logic. Reducing the complexity of software.
- **More time for user experience.** Serverless functions allow teams to focus resources on the user experience and not on managing servers.
- **Security.** We can call third-party APIs securely without exposing important data on the client-side.

What Are Serverless Functions?

Netlify makes deploying to production a breeze by configuring your Netlify CLI to your Netlify account and integrating with GitHub.

We'll log in to Netlify through the CLI and initialize a site by completing all the options that the CLI runs us through. Once this is done, Netlify will trigger new builds for your site every time you push to GitHub.