Learn Loopback, Serverless and Webstorm

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

In this course the developer will learn how to create a LoopBack API and build it out to an API that can be used as a backend for apps. We will start by creating a basic LoopBack API project and gradually enhance it to a production ready API. The API we create defines a few models to persist the data and has custom functionality, validation and hooks added to those models. 

After our data structure is defined we will learn how to extend the functionality of LoopBack by using mixins and components. We will also lock our API down using ACL’s and create a mechanism to automatically define the admin and user roles and create our admin user.   

The last part of the course will show how how to filter the data stored in the API. We will make the API production-ready by adding unit tests, connecting it to MongoDB and we will show how to deploy the app to now.sh.   

LoopBack is a highly-extensible, open-source Node.js framework.

loopback

Build a Node.js REST API with LoopBack

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 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

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.

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

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

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 

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Import and Set Environment Variables from a .env file using Netlify CLI

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

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

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

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

A relation in LoopBack is a way to associate the data from multiple models with each other. LoopBack supports various types of relations each with a different use case.

In this lesson we will create a second model called Category and create a relation between the Category and the Product models. To do this we will first add a property to the Product model called `categoryId`. This will allow us to store for each Product the category it belongs to. We then move on to create the actual relationships. 

Our first relationship defines that a `Category hasMany Products` and the second one that a `Product belongsTo a Category`.

After defining these relations we will use the API Explorer to see how we can interact with this related data.

Create a relation between two LoopBack models

In this lesson we will look at the filters that can be used to retrieve and manipulate the data stored in LoopBack. 

We will use [Postman](https://www.getpostman.com/) to interact with the `/Categories` and `/Products` endpoints. 

Using the URL parameters we will apply at the various filters LoopBack has to offer: `include`, `order`, `where`, `fields`, `limit` and `offset`. 

Filter model data in LoopBack

In this lesson we look at extending the functionality of LoopBack models by defining a remote method. 

A remote method is a method on a model exposed over a custom REST endpoint. 

Using the `lb remote-method` command we will create the remote method meta-data in `product.json`. We will verify that this got created and that we see the new REST endpoint got added. Then we will create the actual method in `product.js` and enhance it so that the API will return an error if we want to buy a negative amount of products.

Define a remote method on a LoopBack model

In this lesson we will create a dynamic datasource in LoopBack. If the API is started with the environment variable `MONGODB_URL` it will use this url and the `loopback-connector-mongodb` package to store the data in MongoDB.

In the course we will use a local MongoDB instance. If you don't have MongoDB running locally you can always create a [free MongoDB Atlas database](https://egghead.io/lessons/create-a-free-database-on-mongodb-atlas).


Create a MongoDB DataSource in LoopBack

In this lesson you will learn how to persist the data from the memory connector. As the name suggests, the memory connector stores the data in memory. This means that if you restart the server, the data is gone. In development mode it can be useful to store this data in a file, so it gets persisted between server restarts, and it can be easily inspected.

Persist in-memory data to a file when developing Node.js LoopBack API's

In this lesson we will learn to create a development mode for our server. We do this by installing nodemon as a dev dependency and creating a script tag called 'dev'. 

This script tag will execute the command `nodemon server/server.js --watch common --watch server`.  

We can execute this command by running `npm run dev`. 

When running in development mode the server will be automatically restarted when there are changes detected in the `common` and `server` directories.

Setup a development mode in LoopBack API using nodemon

In this lesson we will learn how to protect our API using ACL’s. 

ACL stands for Access Control List and it's function is to control permissions of resources in the API. It does this by keeping a mapping between an API resource and a principal. An API resource as an API endpoint like a remote method or a whole model. A principal in LoopBack are users or applications that can be grouped in a role.

In order to get the API production ready we will protect a selection of our REST endpoints with ACL’s. We will look at how we can obtain an access token and how we can use that in our requests.

Finally we will write some unit tests to make sure that the ACL does what we expect. We enhance our test setup by exporting `request` with is provided by the [supertest](https://www.npmjs.com/package/supertest) library.

In our tests we use `request` to verify that our endpoints return the correct HTTP status code.  

Configure ACL’s to protect the LoopBack API

In this lesson we will look at how to deploy our LoopBack API project using [now](https://zeit.co/now). 

We will install the now client, create an account and deploy our app.

Using `now secrets` features we will store our database connection url which we get by creating a [free MongoDB Atlas database](https://egghead.io/lessons/create-a-free-database-on-mongodb-atlas).

In order to simplify following deployments we will add a `now` key to our `package.json` where we use the `name`, `alias` and `env` parameters to configure our deployments. We will add some npm scripts so we can deploy our app in the desired way using `npm run now`.

Deploy a LoopBack API project using now.sh

In this lesson we will create a free account on monogdb.com. After the account has been created we will create a group in MongoDB Atlas and in that group we create a free cluster. In order to create the cluster we need to provide a username and password. We create our user called `admin` and have the site generate our password for use. Once the cluster is created we look at where we can find the connection string.

Create a free database on MongoDB Atlas

LoopBack is a framework built on top of Express for creating APIs. It allows you to create end-to-end REST APIs that can access data from many data sources such as MondoDB, PostgreSQL, MySQL or other REST APIs.

In this lesson you will learn how to install loopback-cli and create a new LoopBack API project. After creating the basic LoopBack project through the CLI, running the server will give us access to the project and API Explorer urls. The user model will be available to us because user authentication was enabled.

Initialize a LoopBack Node.js Project through the CLI

In this lesson we will learn how to add tests to the project to make sure our API behaves as we expect. 

After installing `mocha` and `chai` as devDependencies we will add `test` and `test:watch` scripts to our `package.json`. We will create a different datasource what we will use when running the tests by copying `datasources.json` to `datasources.test.json` and prefixing our `test` command with `NODE_ENV=test`. 

We will verify that our tests run against an empty datasource. We’ll also add various tests to verify that our remote method and validation on the Product model behave as expected.

Topics

Instructors

Content Type