Learn Loopback, Mdx and Redwoodjs

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

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

- React
- GraphQL
- Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.


Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

Introduction to RedwoodJS: full-stack framework for JAMstack

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

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

We use `yarn redwood generate page` (`yarn rw` for short) in this lesson to generate an `IndexPage` component. 

The first argument to `yarn rw generate page` is the name of the page you are generating. The second argument is the path you want the page to show up on. So `yarn rw generate page index /` will generate an `IndexPage` component and insert a route entry in our `web/src/Routes.js` file.

We learn that redwood import `React` for you so you don't have to import it manually when you are creating a component.

Generate a Page Using the Redwood CLI

In this lesson, we are going over how to generate a `RedwoodJS` project.

We can create a `RedwoodJS` project with `yarn create redwood-app ./my-redwood-project`.

`yarn` will generate the `RedwoodJS` app in the file folder you specified without installing any globals.

To run the `RedwoodJS` app, we use `yarn redwood dev`. This runs the Redwood client as well as the `GraphQL` backend.

Generate a Redwood Project

RedwoodJS provides a `Link` component that we can use to navigate around our app. We can provide a `to` prop with the path that we want to navigate to.

RedwoodJS takes this a step further and provides a `routes` object from `@redwoodjs/router`. This object is aware of all the routes defined in `web/Routes.js`. This allows us to use the methods on this object rather than referencing the our routes with a string literal. We can then change the route path without having to change all of the references to that route all over our app.

Use RedwoodJS Link and routes Object to Navigate

RedwoodJS gives us a cli command to generate layouts.

`yarn redwood generate layout main`

This will generate a `MainLayout` component in `src/layouts/MainLayout/`. We can use this layout component to define any headers or footers we want to share across multiple pages. 

Extract a RedwoodJS Layout Component

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

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

Topics

Instructors

Content Type