Learn Npm, Serverless and Tweenmax

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

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own. 

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

Publish JavaScript packages on npm

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

The ability to pull in just about anything your project needs from npm is amazing, but it can also lead to bundle bloat if you aren't selective about what libraries you pull into your library. In this lesson, we'll take a look at bundlephobia.com, a tool that provides insights about a library's size. With bundlephobia, you can make informed decisions about what libraries you pull into your project and avoid unnecessary bundle bloat.

https://bundlephobia.com/

Make informed decisions about 3rd party npm libraries with bundlephobia

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

With Node.js installed, bootstrapping a react app is as simple as executing `create-react-app` with `npx`. No further downloads necessary.

Bootstrap a react app using create-react-app

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

While there are a few options for building maps, [Leaflet](https://leafletjs.com/) is the most popular. Lucky for us, Leaflet is also available as a ReactJS component library with [React Leaflet](https://react-leaflet.js.org/). We'll use both Leaflet and React Leaflet to build a map in our React app.

To get started, we need to install:

[Leaflet (npmjs.com)](https://www.npmjs.com/package/leaflet) and [React Leaflet (npmjs.com)](https://www.npmjs.com/package/react-leaflet)

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/02%20-%20Adding%20Your%20First%20React%20Leaflet%20Map%20to%20a%20New%20React%20Application#1-installing-our-dependencies)**


Install Leaflet and react-leaflet with NPM in a JavaScript Project

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

Nx has been design to work especially well in large monorepos. One particularity (compare to other monorepo solutions) is that Nx follows the principle of having one single version of a package in the entire workspace. That said, you'll have one version of React, one version of Angular etc.. This helps to keep things consistent, facilitates code sharing as well as easier migrations.
In this lesson we're looking into adding the [material-ui](https://material-ui.com/) package to our React app.

Install and use external npm packages in an Nx Workspace

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

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

Tests are really important in the software development cycle. But how we can test if our API - or even a page - will support the web traffic and requests our users will create by accessing them?

In this video, you will learn how to create HTTP load and benchmarking tests in Node.js using the autocannon package. With that, we can make sure our API is not consuming too much memory, CPU, or any other resource that can cause slow responses.

Create Load Tests in Node.js Using Autocannon

A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.

Create a custom npm script

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

Pass arguments to npm scripts

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli. 

Create a node script to replace a complex npm script

In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.

Use custom config settings in your npm scripts

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the `create-react-app {project-name}` command. We then use the npm scripts that are provided: `npm start` to develop, `npm run build` to ship, and `npm run eject` to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

Set up React apps with zero configuration in two minutes

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequenced animation with very little code or setup.

Topics

Instructors

Content Type