local-setup.md

Local Setup

Helpful links

1. Full stack web dev in Rider
2. Local setup for angular development

Setup Node

Node.js is a JavaScript-based runtime environment that executes JS code outside of a web browser. You can use it to create web-servers and networked applications. You can also use it to perform helpful tasks on your computer such as concatenating and minifying JavaScript files and compiling Sass files into CSS.

NPM is a “package manager” that makes installing Node “packages” fast and easy. A package, also called a module, is just a code library that extends Node by adding useful features. For example, the “request” module simplifies the process of making HTTP requests so you can easily get web resources from other sites.

NPM is installed when you install Node.js.

Uninstall old node

Find the node (below command shows you the location of the file for a given command)

which node

Now remove that

sudo rm -rf /usr/local/bin/node

Also remove these files and folders

sudo rm -rf ~/.npm ~/.npm-global ~/.node-gyp ~/.npmrc ~/.node_repl_history

sudo rm -rf /usr/local/bin/npm /usr/local/bin/npx

sudo rm -rf /usr/local/share/man/man1/node*
sudo rm -rf /usr/local/share/doc/node
sudo rm -rf /usr/local/share/systemtap/tapset/node.stp

sudo rm -rf /usr/local/include/node
sudo rm -rf /usr/local/lib/node_modules /usr/local/lib/dtrace/node.d

Reference

Install nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.6/install.sh | bash

Make your terminal pick up the nvm command that was set by the installation in your ~/.bash_profile file

. ~/.bash_profile

This is called sourcing and it executes commands from the file (.bash_profile here) in the current shell environment. This will pick up the changes to your profile without having to close and reopen the terminal.

Now check your nvm version

Later when you want to uninstall nvm do the following

$ rm -rf "$NVM_DIR"

Edit ~/.bash_profile and remove the lines below

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[[ -r $NVM_DIR/bash_completion ]] && \. $NVM_DIR/bash_completion

Reference

Install node

Install the latest lts version.

nvm install --lts

Now check it

Reference

npm vs npx

npm

It is used to install, update, and manage packages from the npm registry in your projects or globally on your machine.
For eg:

npm install --save-dev --save-exact prettier

npx

npx is typically thought of as 'npm execute'. It allows you to run packages.

For eg:

npx prettier --write somefile.js

or

npx tsc -v // To view the Typescript version that's installed as your dev dependency

It first looks into your local project's dependencies for a command. If it can't find it locally, then it searches in globally installed packages. And if it can't find it there either, npx will temporarily download, use, and remove the package - helping ensure you use the latest version all the time without needing to permanently install it.

Editor

I'm using Jetbrains Rider. It already comes with the features present in WebStorm so I don't have to use a separate IDE for doing full stack work.

Reference

Editor Settings

1. Show memory

   

   The memory shows up in the bottom right corner. You can force GC to kick in when your IDE starts getting slow.

   

2. I'll add more when I find more cool settings to turn on...

Editor Plugins

ESLint

Reference

npm install --save-dev eslint

Create a file named .eslintrc.json at the package.json level to store lint configs.

Activate and configure ESLint in Rider by following this guide.

To see an example in a React project, take a look at this.

Preetier

Prettier in WebStorm
How to setup Prettier

Standard for working with JS TS projects. Rider already comes bundled with it

npm install --save-dev --save-exact prettier

Create a file named .prettierignore at the package.json level to specify files you want to ignore. For example:

node_modules

Configure Prettier in Rider

Turn off all rules that are unnecessary or might conflict with Prettier

npm install --save-dev eslint-config-prettier

And add this to your ESLint configuration. Now your .eslintrc.json file should look like this

{
  // eslint-config-prettier
  "extends": ["prettier"]
}

Note about --save-dev and --save-exact:

• --save-dev means to install that package as a dev dependency which is a dependency that is only required for dev and testing.
• --save-exact is used to lock the version of the package you're installing. This is useful when you want to ensure that your application always uses a specific version of a package, even if newer versions are released.

For eg:

  "prettier": "^2.6.2", // This isn't exact because package manager can update the Minor version (^)
  "prettier": "2.6.2", // This is exact

Note about ^ and ~ in version numbers:

• The caret (^) allows changes that do not include the next major version.
  For example, ^2.3.0 allows changes from 2.3.0 up to but not including 3.0.0.
• The tilde (~) allows changes that do not include the next minor version and major version, thereby only allowing patch-level changes for a given minor version.
  For example, ~2.3.0 allows changes from 2.3.0 up to but not including 2.4.0.

AceJump

https://plugins.jetbrains.com/plugin/7086-acejump

String Manipulation

https://plugins.jetbrains.com/plugin/2162-string-manipulation

Setup Angular CLI

Reference

Choose either way (1 or 2) shown below.

1. Installs the Angular CLI package locally in the current directory.

   npx --package @angular/cli

2. Installs the Angular CLI package globally on the computer (I went with this).

   npm install -g @angular/cli

Now check the Angular version

ng version

If it asks you to allow angular cli to autocomplete commands, choose Y which will write this to your .bash_profile:

Later when you want to uninstall Angular CLI, you can simply do this

npm uninstall -g @angular/cli