Monday, September 6, 2021

4 tools in javascript

picture name: wichy asking for more coffee


01 NVM: 

NVM is the acronym for Node Version Manager, which is a command-line tool that lets you install and use many Node.js versions and NPM on your computer. It is a dev tool, so I don't recommend using it in production environments. NVM works fine in Linux and Mac. You can also check the documentation here: https://github.com/nvm-sh/nvm.


When is it useful to use NVM? 

*   In teams where we have different operating systems.

*   When we have to test new things, for example, the testing version for Node.js.

*  When we have many projects with different versions, and you cannot update Node.js and you have to maintain two or more node js versions in many projects, so is a way to tidy up the dev environment, switching between Node.js versions.


NVM: Installation

Mac:

You can use homebrew. If you don’t know how to install it, you could check here it (https://brew.sh/) and that’s all.

 

brew install nvm
source $(brew --prefix nvm)/nvm.sh
echo 'source $(brew --prefix nvm)/nvm.sh' >> ~/.profile


Linux:

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


The line before will have an output such as this:

 

=> Downloading nvm from git to '/home/jennifer/.nvm'
=> Cloning into '/home/jennifer/.nvm'...
remote: Enumerating objects: 278, done.
remote: Counting objects: 100% (278/278), done.
remote: Compressing objects: 100% (249/249), done.
remote: Total 278 (delta 33), reused 88 (delta 16), pack-reused 0
Receiving objects: 100% (278/278), 142.36 KiB | 0 bytes/s, done.
Resolving deltas: 100% (33/33), done.
Checking connectivity... done.
=> Compressing and cleaning up git repository
=> Appending nvm source string to /home/jennifer/.bashrc
=> Appending bash_completion source string to /home/jennifer/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


Make sure that these lines below are in your ~/.bashrc or ~/.zshrc:

 

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm



 

My personal desktop runs over Arch Linux,  so I used an aur package, for example https://aur.archlinux.org/packages/nvm/. I downloaded the snapshot file and uncompressed the tar.gz file.  Also, you could use the same installation explained before or these lines for installing nvm:

$ cd nvm
$ makepkg  -s  #this will generate an Arch Linux package (nvm.tar.xz).
$ ls -l nvm.tar.xz

$ pacman -U nvm.tar.xz


NVM Usage:

nvm list : List all versions installed on your machine

➜  ~ nvm list
->       system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)


NVM install: Install a local version on your machine from the remote list. The remote list could be filtered by another command like: nvm ls-remote <versionLike>  for example “nvm ls-remote v11” lists all versions that have v11 as prefix.


➜  ~  nvm install v10.15.3
Downloading and installing node v10.15.3...
Downloading https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz...
######################################################################## 100,0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.15.3 (npm v6.4.1)
Creating default alias: default -> v10.15.3


nvm use: set in the current terminal the environments variables so all command executed related to Node.js will use the version defined by NVM.

➜  ~ nvm use v10.15.3
Now using node v10.15.3 (npm v6.4.1)


nvm which: show the path to the Node.js bin file.

➜  ~ nvm which v10.15.3
/home/jennifer/.nvm/versions/node/v10.15.3/bin/node




02 Docker container with node js/ angular-cli:



Hub docker contains a thousand images that you could use in your daily tasks at work, in a simple search you could see (https://hub.docker.com/search?q=angular-cli&type=image)

About 1 - 25 of 492 results for angular-cli. 

Here is my recommendation to use it in a local environment for a development process: https://hub.docker.com/r/trion/ng-cli/


docker pull trion/ng-cli

When node_modules directory already was generated.

docker run -u $(id -u) --rm -p 4200:4200 -v "$PWD":/app trion/ng-cli  ng serve --host 0.0.0.0 --disableHostCheck


In this way, you need node_modules directory inside the directory defined in $PWD variable.

When a node_modules directory is not generated. And that’s all.

first

docker run -u $(id -u) --rm -p 4200:4200 -v "$PWD":/app trion/ng-cli npm install


later:

docker run -u $(id -u) --rm -p 4200:4200 -v "$PWD":/app trion/ng-cli  ng serve --host 0.0.0.0 --disableHostCheck




03 Dotenv using a .env file with and avoid versioning



Dotenv is useful to keep tidy up the code, avoid magic number, avoid push any secret key to the repo and it is a relief for many environments. With this, you can run your app anywhere by modifying the environment variables without changing your code and without rebuilding it!

npm install dotenv


Later, create the .env file in the root of your app and add your variables and values to it. Don’t forget to add this file to .gitignore to avoid committing it.


.env
PORT=55555



Server.js
const dotenv = require('dotenv');
dotenv.config();
console.log(`Your port is ${process.env.PORT}`);


4 Cloud solutions:

For each project, you could use one of these, sometimes I have to share code with a friend or when I have a doubt, and I need to ask something with a context code, it’s the best way to show when you are remote, for example for an angular-cli project there is no doubt that the best is  https://stackblitz.com/ has a better integration with angular and let you download the project in a zip file, also is recommended by @angular documentation. 

Also for Js, HTML, and CSS, and tiny projects you could use https://jsfiddle.net/, https://codepen.io/.  In the last one, there are many web artists and you could make you own portfolio to share it.  And From Red Hat, we have https://codenvy.com/ has a free subscription with limitations, but it’s ok for prototyping things.