Node.js

    Node.js
    • Node.js allows developers to write and run JavaScript applications on the server.
    • Developers started using it to also write tools (like task automations, Sass) to help them with local web development, called packages.
    • Chcek if it's installed: open terminal, write node -v and npm -v, hit enter and it will show node's and npm's version, if they are installed.

    Node Package Manager (NMP)
    • The Node Package Manager (NMP) is a tool to download these packages.
    • NPM is a simple command line interface that allows developers to install and manage packages on their local computers.

    Node.js + NPM
    • This ecosystem is where we can find:
      a) Third party open source tools, libraries (lodash, jquery) and frameworks (react, angular) needed for web development.
      b) Development tools, like for task automations, automatic browser loading or to compile JS down to ES5.

      In order to use and share these packages, we need NPM to install and manage them.

    • Babel
      Converts ES6, ES7, ES8 (together called ESNext) back to ES5 so all browsers will understand the written JS code.

    • Webpack
      ES6 modules used to make our code more modular and easier to maintain.
      This is done by separating different parts of our app into different files.
      As browsers do not yet support multiple modules, we use a bundler called Webpack to bundle (group) them together.



      Some other things webpack can do: codesplitting, loadind menu types of assets like sass or images, decrease JS bundle size with treeshaking and much more.

    • To create the NPM
      a) To create the package.json file, type npm init.
      This creates the package.json file, which contains all of the website's package information.
      Having the package.json file, in any other computer you can just type npm install and node will analyse which packages are necessary and install them.
      b) To install webpack, type npm install webpack--save-dev, npm install webpack-cli --save-dev, npm install webpack-dev-server --save-dev and npm install html-webpack-plugin --save-dev, --save-dev to save it as a develop pendency for the project, which are development tools used for the project construction.
      c) To install a dependency, type npm install jquery --save.
      d) With this, when we download the project in another computer, we can say npm install to download all project devDependencies and dependencies at once.
      e) To uninstall the dependencies npm uninstall jquery --save.
      f) Install globally to use it in every project: sudo npm install packageName --global.

      Note
      devDependencies: only tools used for development.
      dependencies: real dependencies, like code that is actually used in our app.
      Example: if we are building a React app, we will need the React API. This will be a dependency that will be informed on the package.json file, to inform node that this needs to be downloaded for this project.
      Because for the code to work, we are going to need to have the React API installed.

      Webpack: it's important to have webpack so it will execute our package.json commands and have the live server feature, for when we save, it runs everything, compiling it and putting it in production.
      Webpack is basically used to execute the package.json commands, compiling the code from the src folder into the dist folder, an example would be that we write the index.html on the src folder and webpack will then compile that code and put it on the index.html file inside the dist folder.

      Start NPM: npm run start
      Stop NPM: ctrl + c.

    • Installing Babel
      Jonas's video about how to install it.

      Download the packages:
      npm install babel-core babel-preset-env babel-loader --save-dev.

      babel-preset-env: takes care that all the modern JS features are converted back to ES5.
      babel-loader: Loaders in Webpack allows us to import or to load all kinds of different files and process them. Like converting SASS to CSS code or ES6 to ES5 JS.

      Polyfills
      npm install babel-polyfill --save, this is a real dependency, because without this the code would't work.
      There are some ESNext code that can't be converted back to ES5 because it doesn't exists in ES5, like promises or methods like array.from. These need to be pollyfilled, so a code will be written to implement promises in ES5. This is what a polyfill does.

      Firstly, install the Babel package and add the rules on the webpack file, saying get all the files that have .js in the end, excluding the node_modules folder and use the babel-loader in them, converting ES6 to ES5.
      Secondly, create a config file, .babelrc, to tell babel what to convert back to ES5.
      Thirdly, include the polyfill to convert the ESNext features that can't be converted with babel loaders.

      Notes
      a) npm run dev error: babel version problem, unistall it npm unistall babel-loader --save-dev and install the version it's asking for npm install babel-loader@X --save-dev, where X is the version number, such as @7 or @8 and try npm run dev again.
      Worked with: "babel-core": "^6.26.3", "babel-loader": "^7.1.5" and "babel-preset-env": "^1.7.0".

    • Code Example - Forkify Project
      Here we have two main files:
      dist: this is the folder that will be sent to the client, with the compressed code.
      src: this is the developement folder, with uncrompressed code.

      {
      "name": "forkify",
      "version": "1.0.0",
      "description": "forkify project",
      "main": "index.js",
      "scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production" Once it's finished, we build it in production mode, so it will compress the code.
      "start": "webpack-dev-server --mode development --open" starts this and keeps it running. --open to open the page in the browser.
      },
      "author": "Diego Martinelli Magno",
      "license": "ISC",
      "devDependencies": {
      "webpack": "^4.29.5",
      "webpack-cli": "^3.2.3"
      },
      "dependencies": {}
      }