# 04 - Install the toolkit

Watch the YouTube video:



Today I will demonstrate how to install a developers' toolkit.

# Executive summary

There are generic tools available to developers for building their apps. There are also optional, specialist tools that improve your developer experience. During development, these generic tools and specialist tools achieve their goals in various ways. In this guide I will introduce these tools that can help with building your apps.

# Prerequisites

The following technologies are needed for this dev guide:

  • a browser,
  • a terminal,
  • a FaunaDB account,
  • a Netlify account, and
  • an Internet connection.

NOTE: You can use the terminal built into VS Code instead of using a terminal program.

# Citations

References for each tool are cited in their respective sections below.

# Install the toolkit

Use a browser to create the following accounts:

NOTE: Fauna Shell does not currently support GitHub or Netlify logins. For the sake of simplicity, create a FaunaDB account with an email address.

Use a terminal to install the following tools:

  • Git ($ sudo apt update && sudo apt install git),
  • VS Code ($ sudo snap install --classic code),
  • Node and NPM ($ sudo apt update && sudo apt install nodejs),
  • NVM and NPX ($ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash && npm install -g npx),
  • Fauna Shell ($ npm install -g fauna-shell),
  • Netlify CLI ($ npm install -g netlify-cli),
  • Netlify Dev ($ netlify dev - Netlify CLI required),
  • Netlify Lambda ($ npm install netlify-lambda), and
  • Git LFS ($ git lfs install).

Once installed, these tools will be available from your local machine.

# Generic tools

Generic tools are the essential, yet invisible, workhorses of every developers toolkit. They are the ubiquitous utilities that are so pervasive that they are only missed when they're not installed.

# Git

Git is a version control system that let's you manage your software development by:

  • tracking the changes that you make to your codebase,
  • creating branches where you can write code without affecting the master branch,
  • merging branches (that successfully pass the tests) to the master branch,
  • uploading your codebase to remote repositories like GitHub and Bitbucket,
  • collaborating with other developers on your - and their - projects, and
  • possibly sharing your codebase with the community.

# VS Code

VS Code is a text editor that:

  • let's you manage your codebase,
  • includes a variety of optional extensions, and
  • fully supports a git-based workflow.

# Node and NPM

Node is a number of things, including:

  • non-blocking,
  • single threaded,
  • an open-source server,
  • a cross-platform environment,
  • a runtime that executes JavaScript as a system process instead of a browser process,
  • memory efficient due to it's asynchronous programming model,
  • free (as in open-source), and
  • Free (as in $0 cost).

# NVM and NPX

You can also use Node Version Manager to switch between different versions of Node:

$ npm install -g npm@latest # Install the latest NPM
$ nvm install stable # Install the latest stable NVM
$ npx -v # Display the NPX version

After installing NVM, a new terminal may be needed to run $ nvm -v.

# Specialist tools

This Login system is not big enough to explore all of the features behind all of these tools. But the Login system is only a foundation on which to deploy your ideas. As your project grows beyond this simple starting point, more opportunities will arise for using, and combining, these utilities.

# Fauna Shell

Fauna Shell is an interactive CLI (command line interface) that lets you:

  • login to your remote FaunaDB account,
  • issue FaunaDB queries to the remote server, and
  • immediately generate results to your FaunaDB queries.

# Netlify CLI

Netlify CLI is an interactive CLI that lets you:

  • login to your remote Netlify account,
  • execute CLI commands to run Netlify functions, and
  • run Netlify Dev to bring Netlify's Edge Logic layer, serverless functions, and the add-on ecosystem to your local machine.

# Netlify Dev

Netlify Dev runs the production routing engine in a local dev server to make all redirects, proxy rules, function routes, or add-on routes available locally, and injects the correct environment variables from your site environment, installed add-ons, or your netlify.toml file into your build and function environment. To achieve these outcomes, your setup requires the following:

  • You should have the latest Netlify CLI version. Run $ npm install -g netlify-cli to be sure.
  • You should be logged in on Netlify CLI.
  • Your project should be linked to a siteID on Netlify (using netlify init or netlify link). You can confirm this has been done if you have a .netlify folder with a state.json file containing your siteID.

This is how Netlify pulls down your build environment variables and manages your addons on your local machine.

# Netlify Lambda

Netlify Lambda helps with building, or locally developing, Netlify functions using a simple webpack/babel build step.

# Git LFS

Git LFS (large file storage) is used to save space when working with image files, audio files, and video files. This is achieved by saving these, and other, binary files in a different location and referencing them in the repo. Netlify Large Media takes advantage of the benefits behind Git LFS.

# Review

In this dev guide, we installed:

  • Git,
  • VS Code,
  • Node and NPM,
  • NVM and NPX,
  • Fauna Shell,
  • Netlify CLI,
  • Netlify Dev,
  • Netlify Lambda, and
  • Git LFS.

We also included small introductions and reference links to each tool.

# Next

In the next dev guide, we are going to setup a continuous deployment strategy.