Skip to content

C10.Software Setup.md

Latest commit

 

History

History
634 lines (404 loc) · 30.7 KB

C10.Software Setup.md

File metadata and controls

634 lines (404 loc) · 30.7 KB

Setting Up Software For the Class 🛠️

🎗️ TODO: There's some stuff that still needs to be done in this document, but the important parts should be complete.

[toc]

❓ "Why isn't THIS the first Chapter or even Appendix?"

🤷‍♂️ Beats me. But I suppose it is a fair point.

🏆 I'VE ADDED EXTRAS! Mainly to let you know about them.

Setting Up Your Terminal

⛔ ADMINSTRATORS ONLY! You will need adminstrative access to run some things. To do those things, you need to be able to use the sudo command for Mac or Linux or the Adminstrative PowerShell for Windows. If you do not have permission, ask someone who is an adminstrator.

Mac Users

😞 Of course they list Mac users first.

Mac has a UNIX terminal built in. There are a few ways you can find it.

Through the Finder

Open a new Finder window and navigate to Applications > Utilities > Terminal.

Through LaunchPad

If you are a fan of the LaunchPad feature, press F4 and inside the Other or Utilities folder, the Terminal icon should be there.

sudo Commands

⛔ ADMINSTRATORS ONLY! You will need adminstrative access to run some things. To do those things, you need to be able to use the sudo command. If you do not have permission, ask someone who is an adminstrator.

❓ "Hey, where's brew?"

Good question. UNIX on its own doesn't have a package manager, and in most cases, you are expected to install things from source. I'm not a complete Mac expert, but I am aware of a package manager for Mac called Homebrew or brew. It's written in Ruby and generally installs packages from source code as if you were installing a binary. Downside is that stuff takes a while to install. (See the Linux section about that.)

Windows Users

Windows users have the PowerShell. It sucks. However using it doesn't have to. You can install Chocolatey and make installing some of this stuff way eaiser.

To open a power shell, type CTRL+X. You will want to select Windows Powershell (Admin).

⛔ ADMINSTRATORS ONLY! You will need adminstrative access to run some things. To do those things, you need to be able to use the Adminstrative PowerShell. If you do not have permission, ask someone who is an adminstrator.

# Run these command to run to get the chocla
# Check to see if the execution policy is "Restricted".
# If it is, change it to "Bypass".
If($(Get-ExecutionPolicy) -eq "Restricted"){ Set-ExecutionPolicy Bypass -Scope Process -Force; }
# Download and run the Chocolaty install script
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'));

When software is installed using Chocolatey, you can install software like you would on Mac or Linux.

  • choco -? - Show Chocolatey's help, displaying info on commands.
  • choco list --local - List all the software packages that you have installed
  • choco search <string> - List packages that may contain <string> in their package name.
  • choco info <package-name> - Get information about a specific package.
  • choco install <package-name> - Install a specificed package.
  • choco upgrade <package-name> - Update a specific package.
  • choco remove <package-name> - Remove a specified package.
  • choco upgrade all -y - Upgrade all locally installed packages. (Add a -y parameter to avoid being prompted constantly.)

ℹ️ NOTE: You can install more than one package at a time with the install, upgrade, and remove commands by separating each package name with spaces.

The first thing you will want to install is Git for Windows. Launch Code's suggestion is to install Git through their website because of Git's version of Bash. You don't want that. It's kinda crappy. You should install Git using PowerShell instead.

choco install git -y

ℹ️ NOTE: If you don't add the -y to that choco command, you will be asked if you want to install the software, of which you you should say y for "Yes" if that happens.

Linux Users

ℹ️ NOTE: This section was not part of the original tutorial.

Do nothing. You're all set up. Bash is good, but if you want, install Zsh later. Just find the Terminal command.

⛔ ADMINSTRATORS ONLY! You will need adminstrative access to run some things. To do those things, you need to be able to use the sudo command. If you do not have permission, ask someone who is an adminstrator.

Depending on what distribution of Linux you use, there are different commands for finding, installing, upgrading, and removing software. Fortunately, Arch Linux has a wiki article which shows a table of those commands.

Linux users have the option of installing software either using the source code (which can take along time but does allow for customization, especially if they have a unique hardware architecture of which there is no binary package available yet) or binary packages (software packages that have the program already compiled into a executable program which is called a binary or executable). For new users, we recommend the binary route.

ℹ️ NOTE: If you are using a Rapsberry Pi, skip this part! There's another way to install install VS Code. Go to the next section at this point.

There are plans to try to unify binary installation process with a program called snap, but it's being lead by Canonical (the guys who make Ubuntu Linux which is a Debian Linux Distribution) so it means it will take forever before it happens in my opinion.

In fact the only way to install Visual Studio Code in the next section is to install snap. We recommend having a compute that uses the X86_64 architecture because there's a good chance that there is no ARM version yet.

You'll want to visit this page for instructions on how to install snapd, the daemon (background program) for snap as well as snap.

Setting Up Visual Studio Code

Just about every programmer uses a program called an integrated development environment (IDE) to write and run code. Launch code uses Microsoft Visual Studio Code as an IDE.

You can install Visual Studio Code for Mac, Windows, and Linux from their Download page.

Mac Users

🎗️ TODO: VSCode is available for Mac. Share these instructions! But write them first.

If I didn't mention it already, my experience with Macs are limited. So my guess the instructions are something like this.

  1. Go to the downloads page and click on the link for VS Code for Mac.
  2. Download the Zip file to your computer.
  3. Extract it somewhere

Windows Users

🎗️ TODO: Use Chocolatey to install it.

In an adminstrative PowerShell, type in this command

choco install vscode -y

You may be asked to install a few other things, but you should defintely install those. Use -y to streamline this installation.

❓ Are there more instructions?

Linux Users

🎗️ TODO: VSCode is available for Linux. (Probably 64-bit Linux. Probably not ARM.) Show dem instructions! 👽

🎗️ TODO: Alternatively show instructions for how to install Vim or better yet NeoVim.

Much to the chagrin of hardcore FOSS advocates, there is a version for Linux. Most of the major Linux distros have a version of VS Code for X86_64 architecture, which is the most common computer hardware architecture. The future is ARM processors, but I'm getting off point.

Use Snap (X86_64)

ℹ️ NOTE: If you haven't installed snap yet, go back to the previous section.

  1. Go here and follow the instructions.

Use a Community Build Version (Raspberry Pi 4)

There is a community build for VS Code for ARM Devices, but so far it's only available for Raspbian.

Extras

ℹ️ NOTE: This section was not originally part of the tutorial.

I have a couple of plug-in suggestions for Visual Studio Code.

Setting Up Git

⚠️ Visual Studio Code Users! READ THIS TO GET STARTED!

Accorind to the documentation, Git support should be built in to VS Code.

Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among developers, but it can be used to track changes in any set of files. It's goals include speed, data integrity, and support for distributed, non-linear workflows.

Well, that's sort of the defintion I borrowed from Wikipedia. Launch Code will likely have a better way of saying what it is a there's plenty of stuff that requires knowing how to use Git in this course. But first you got to install it.

Mac Users

🎗️ TODO: Can we brew it?

There is a version of Github Desktop for MacOS. But if the GitHub desktop is anything like it is for Windows, it probably sucks. Besides, you'll want to use the command line of it or the features in VS Code.

🎗️ TODO: ==Complete this section!== They may have the instructions in class!

  1. Open a new terminal.
  2. Enter git --version. If the output shows a Git version, you're ready. If it doesn't give you a version number, go to step 3.
  3. If it doesn't give you a version number, a popup will show up and ask you to install Developer Tools. Click "Install".

⛔ ADMINSTRATOR ONLY! You may need to be an adminstrator to install Developer Tools.

  1. Try git --version again. It should work this time.

Windows Users

Launch Code's instructions suggest going to the Git website and downloading the Github Desktop. But it kind of sucks and most of the time you'll use the command line version of git, which is what we are going to do with Chocolatey! The Chocolatey package will also install Git Bash, which is basically GitHub's version of a bash shell.

choco install git -y

ℹ️ TODO: You need to change the default shell in VS Code to Git Bash (at least for this course.) To do this, follow these instructions:

  1. Open the Command Palette ether going to View > Command Palette... or Ctrl+Shift+P.
  2. Type Select Default Shell. Select the Terminal: Select Default Shell.
  3. Select Git Bash. It should have a path of C:\Program Files\Git\bin\bash.exe
  4. Open the Command Prompt terminal Ctrl+` it should show a bash Terminal.

If once Git Bash is installed, you should be all set.

Linux Users

🎗️ TODO: Use the Arch Linux pacman Rosetta Stone to show how to install git for various Linux Distributions. (Probably should put this in the Linux Guide.)

Git should be built into Linux most recent linux distros. If not, use your distro's package manager to find and install the package called git.

Setting Up Node

Node.js is an asynchronous event-driven JavaScript runtime application desgined to build scalable network applications. Launch Code recommends isntalling the "LTS" version of node which is stable verses the "Current" version that has new features but may have issues. More than likely you won't be using those new features, so it really won't matter. On the other hand, if you don't like upgrading as frequently, LTS is probably the better option.

You can check to see if you have Node already installed by typing node -v into bash.

node -v

If nothing returns, or you get an error message, then you will likely want to follow the following instructions.

Mac Instructions

Install the MacOS Installer on the Downloads page. It should be a .pkg file.

🎗️ TODO: Is ther a command line way to do this?

Windows Instructions

You could install Node with either the Windows Installer (.msi) or Binary Package (.zip) file. Or you can do it the easy way and use Chocolatety to do it.

Use Chocolaty to install the nodejs-lts package.

choco install nodejs-lts

⛔ ADMINSTRATOR ONLY: Sure you can run this command in the Git Bash shell in VSCode, but it won't work because it's not an adminstrative shell! So you will need to use an Adminstrative PowerShell to install it.

Once you've installed it you can run node in the Git Bash Shell in VSCode!

Linux Instructions

Most of the popular Linux distros should have a Node.js package called nodejs. Use your package manager to install it.

Extras

Here are some things that are not part of the origninal instructions that probably should get instructions.

TypingTest.com

Employers like users who can type, and type fast. I average about 40 WPM (words per minute), but there are people who can type twice as fast as that. Regardless of what speed you type, professional developers do not "hunt and peck" when they type. So go check out TypingTest.com to learn how to type. Or if you do know how to type, see how fast you can type.

NPM

❓ "Why NPM?"

NPM, or Node Package Manager, allows you to install other node packages like the ones below using Node.js without creating a big mess. Basically it uses Node.js to install other things that run in Node.js. A "package" is another way of saying "module".

❓ "What is NPX"?

NPX, or Node Package eXecutor, allows youto execute some NPM packages, much like a task runner. (See Webpack for an understanding about that.)

❓ "I have a Node.js project on Github. How do I share it on NPM?"

🤷‍♂️ I don't know. But it would be nice to find out. I'll have a better answer later.

🤓 Actualy... npm and npx are included with node. You can check by looking up their version information.

npm -v
npx -v

Yarn

❓ "Why Yarn?"

If NPM allows you to install packages, then Yarn allows you manage them. In Linux, we use a program called a package manger. It allows us to maintain our packages such that if a newer version of something comes out we can upgrade it without needing to rebuild the package.

Mac

Install the .pkg file from the Downloads page.

Windows

In an Admisntrative PowerShell, use Chocolatey to install it.

choco install yarn -y

Linux

Use your distro's package manager to install a package called yarn.

Express.js

❓ "Why Express?"

Because a lot more people use Express than they use Jasmine.js. Also the "E" in "MEAN" stands for "Express"

Express.js is a minimalist framwork that a lot of other frameworks are based on.

There really isn't a "global" way to install Express.js, apparently. Which means you add it everytime you need it. Generally the process goes like this.

  1. Assuming you've already installed Node.js, create a directory to hold your application, and make it your working directory.

    mkdir <app-name>; cd <app-name>

  2. Use npm init to create a package.json file for your application.

    npm init

  3. The script will ask you quite a number of questions. For a quick and dirty demonstration, the example on the Express.js website is done by htting ENTER on everything. It's probably not a good idea. Except for the entry point: (index.js) question! For that you will want to enter a name for your app like app.js. Or you can let it be index.js by default.

    entry point: (index.js) <app-name>.js

  4. Install Express in the <app-name> directory and save it in the dependencies list with the --save argument. To Install Express temporarily, and not add it to the dependencies list, use the --no-save argument instead.

    npm install express --save

Hello World

Let's assume you entered hello-world.js as the app name back in step 3. We would open the hello-world.js file and write the following code.

const express = require('express');
const app = express();
const port = 3000;

app.get('/',(req,res) => res.send('Hello World!'));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

After we saved this file, we would then use node to run it.

node hello-world.js

Once that is done, use your browser to go to http://localhost:3000/.

So what happened?

The app started a server and listens on port 3000 for connections. The app responds with "Hello World!" for request to the root URL /. This path is call a route. For all other paths, it will respond with a "404 Not Found" error.

For more information about this process, visit this page and this page.

Webpack

❓ "Why Webpack?"

Webpack is a module bundler. A module bundler takes modules with dependencies and converts them into static assets.

❓ "Why not use Browserify, Grunt, or Gulp?"

In addition to being a module bundler, Webpack can also act as a task runner like Grunt or Gulp can.

Whereas Browserify is another module bundler and Grunt and Gulp are task runners, Webpack does all those things in one program. You can use Browserify and Grunt/Gulp separately and learn all the stuff that each of those programs do. But at the end of the day, Webpack is a program that handles a ton of bureaucracy (most of which you'll likely not care about and will suck the fun out of programming) by using loaders, preconfigured settings, workflow automation, and faster processing time, than those other three separatey.

Here's a good comparison of Webpack, Grunt, Gulp, and Browserify.

TL;DR: Webpack makes the Node.js stuff run faster and handles a lot of technical gobbledygook.

But you came here to learn to code. Let Webpack handle the heavy lifting when we start going into useing modules in Node.js.

Much like Express.js, prefers a local installation. A local installation is installing a module specifically for that project where as a global installation will be applied to EVERY project.

❌ Global installation is NOT recommended! Do not use the --global argument to install webpack or webpack-cli. Installing globally will lock you down to a specific version of Webpack, and could fain in projects that use different versions.

To install the latest release, use the --save-dev argument. To install a speici version use the --save-dev argument (--save-dev webpack) but add a version number to the end of the package (--save-dev webpack@<version>). If you are using Webpack v4 or later (which you likely will), you'll also need to install the CLI package (--save-dev webpack-cli).

npm install --save-dev webpack webpack-cli

Installing locally makes it easier to upgrade projects individually when breaking chages are introduced. Typically, webpack is run via one or more NPM scripts wich will look for a webpack installation in your local node_modules directory, like this for example:

"scripts": {
    "build": "webpack --config webpack.config.js"
}

To run the local installation of webpack, you can access its binary version at

node_modules/.bin/webpack

or use npx to do it.

npx webpack

See this page for more information on installation.

Basic Setup

Much like the Express.js "Hello World" example, using Webpack is similar.

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack webpack-cli

Nest create the src/index.js file. (Note: Lodash is used in this example.)

function component(){
    const element = document.createElement('div');
}

TypeScript

❓ "We are going to learn TypeScript. Why didn't they put instructions on how to install it here?"

🤷‍♂️ IDK, personally I like to install everything before getting on a project. like slowly building your collection of tools in your garage before you start diving in an fixing small engines on lawn mowers or motorcycles, as well as collecting books on the subject.

The good news is we can install TypeScript like a Node.js module.

🎗️ TODO: Instructions coming soon.

Angular

❓ "We are going to learn Angular. Why didn't they put instruction on how to install it here?"

🤷‍♂️ Same reason as TypeScript.

🎗️ TODO: Instructions coming soon.

MongoDB

❓ "Why MongoDB?"

The "M" in "MEAN" stands for MongoDB. Unless there's a way to use MySQL.

❓ "Do we need to make instructions for each operating system?"

For other things we can install through NPM, no. For MongoDB, more than likely.

❓ "Wouldn't it be better if we used MySQL, Oracle, or MariaDB and learn SQL that way?"

It would, be the Launch Code course doesn't cover SQL. I guess you could say we're working more on a MAN stack in this course. 🥁 (rimshot)

🎗️ TODO: Instructions here later.

Jasmine.js

❓ "Why Jasmine?"

IDK, for some reason the Launch Code people decided to use Jasmine instead of a proper MEAN stack component. Still, I should check to see if Jasmine offers Express first.

🎗️ TODO: Add instructions here later.

Lodash

Lodash is a modern JavaScript utility library that provides modularity and performace as well as some other extra features.

Here's how to install it locally

npm install --save lodash

Once it is added, you can add it to your JavaScript files for a Node.js project.

// Choose one of the three following lines to use.
var _ = require('lodash');		// Load the full build
var _ = require('lodash/core');	// Load the core build
var fp = require('lodash/fp');	// Load the FP build
// The Functional Programming (FP) build allows for immutable auto-curried
// iteratee-first data-last methods.

// Load method categories
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller webpack/browserify bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

ℹ️ NOTE: for older versions of Node.js (pre-v6), install n_ for Lodash in npm.

There's nothing part of the Launch Code course where it appear we use Lodash, but I've seen JavaScript Joel use it in some of his examples.

ESLint

❓ "Why ESLint?"

ESLint is what is known as a code linter. When you think "linter", you're probably think "lint roller" which picks up all that dandriff and cat hair. Well, that's sort of what a linter does. It catches small problems and correct them, sort of like a spellchecker in a word processor, while you fix the much bigger problems.

There are other linters like JSLint and JSHint (which is more my favorite in terms of online linting), but it's pretty clear that ESLint is everyone's favorite linter at this point.

🎗️ TODO: Set up instructions later.

ZIM.js

❓ "Why Zim?"

Zim is very visual. Also I want to try it out later. It uses a lot of JavaScript and HTML5 Canvas.

🎗️ TODO: Set up instructions later.

NeoVim

NeoVim pretty much settles the debate between Vim and Emacs by providing its own text-editor.

NeoVim includes a lot of the features Vim provides as plugins, so there is no need to search for a bunch of plugins to do stuff in NeoVim.

🎗️ TODO: Provide installation instructions.

TMUX

TMUX will save your life if you use the command line, espeically if you work remotely!

TMUX, or terminal multiplexer, allows you to create a safe environemnt that will save your session if you get disconnected, and will also allow you to turn one terminal into several terminal or split a terminal into parts. Even if you use Visual Stuido Code instead of a terminal-based text editor, you will want to install this!

🎗️ TODO: Provide installation instructions

Zsh 🐚

❓ "Why Zsh?"

There are so many great features added to Zsh which also include some customization to the command prompt which are useful to Node.js and Git users. In addition the use of PowerLevel9K.

Zsh is a shell much like Bash. Bash is the default shell of Linux and UNIX

🎗️ TODO: Setup instructions later.

Typora

❓ "Why Typora?"

All these notes that I've created were generated using the Typora markdown editor. I'm not sure if I can use it on ARM-based Linux, but it is available for Mac, Windows, and Linux. I wish there was an Android app so I can see these notes on my tablet.

🎗️ TODO: Set up instructions later.

Also check out

Github

GitHub is a company that provides hosting for software development project that use the [Git](###Setting up Git) version control. In 2018, GitHub was bought by Microsoft for $7.5B, which has caused some folks (especially Free and Open Source Software (FOSS) advocates) to encourage migrating projects to sites like SourceForge, Gitlab, Bitbucket, and a bunch of other places.

However, the megalomaniacal Microsoft of the 1990s has scaled back it's want of world domination in a world dominated by Google and Facebook anyway. 😁

On the plus side, having Microsoft as a partner mean we got VS Code around the same time Github's Atom Editor and the Github Desktop. Both of which were a little janky before the Microsoft takeover.

Still, it's the go-to place for developers. And you'll defintely want to use Github for sites like Launch Code, Repl.it, and CodePen.io.

Repl.it

㊙️ PSST... get a GitHub account and sign up for Repl.it using your GitHub account!

Repl.it is a site where you can create code projects that can be posted online. Launch Code will use this fervently!

The name Repl.it comes from the acronym REPL which is short for "read-eval-print loop", which is basically what a shell like Bash or Zsh, or the command line interface of Node.js are.

A shell is a user interfce for accessing services of an operaing system. Often, a shell has a scripting language like Bash, Node, or Python. "read-eval-print loop" orignated from the names of the primative functions from the Lisp programming language which implemented this functionality:

  • read would accept a function from a user and parse it into a data structure.
  • eval would take the internal data structure and evaluate it.
  • print would take the results yielded by eval and print the user output.

The development environemtn would then return to the read state, creating a loop, which terminates when the program closes.

So Repl.it, provides a place to run REPLs!

CodePen.io

㊙️ **PSST...**get a GitHub account and sign up for CodePen using your GitHub account!

CodePen.io is basically like a playground for programmers. You can build, test, and share front-end code examples with a built-in code editor. There are similar sites like JSFiddle and JSBin, but CodePen is probably the most social.

The creator of CodePen, Chris Coyier, also runs another website called CSS-Tricks which provides helpful advice for using HTML and CSS.

Other websites you should probably bookmark

Cheat.sh

😱 "EEK! CHEATING?!" NO! NOT LIKE THAT!

Cheat.sh is a shell script and online community-driven program that provides "cheat sheets", and when we mean helpful handy guides for how to use stuff, mostly in Linux. Think of it as if the man command was online and listed the more practical function. Cheat.sh can be summoned in the terminal using the curl command.

curl cheat.sh/

Similar to Cheat.sh there are other tools and sites like TLDR.sh and Learn X in Y Minutes.

#LaunchCode