Node projects environment set up

ECA Node/React - June 2019

Install tools

Node and NPM

Install with NVM or installer
check node version and npm version
prefer LTS version and at least Node 10

Use IntelliJ

Yes IntelliJ, not VSCode

IntelliJ Plugins

NodeJS
Prettier

Docker

docker run -p 27017:27017 mongo:latest

Setup code repository

Initialize a Node project

git init
npm init
add .gitignore file: https://www.gitignore.io/
create index.js

Start with hello world

create index.js
console.log('hello world')
run/debug the program

Start with hello world

// index.js
console.log('hello world');

Add some features

create a web server
says goodbye when exiting the program

web server

// server.js
var http = require('http');

//create a server object:
http.createServer((req, res) => {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

web server

http module
higher order function
import native library

EventEmitter process

// server.js
var http = require('http');

//create a server object:
http.createServer((req, res) => {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

process.on('SIGINT', () => {
  console.log('goodbye')
  process.exit(0)
})

EventEmitter process

handle event with process
exit the program

Are you happy with the code?

Code style, code formatting
Code quality

Best suite ever

Prettier + ESLint + Standard

Prettier

Code format consistancy
For *.js, *.json, *.html, *.jsx, *md
Easy to configure
npm install --save-dev prettier
create and configure a .prettierrc
IntelliJ integration
Try to format your files

Prettier

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

add file .prettierrc

Check your project files

package.json
package-lock.json

ESLint & Standard

Share best practices
Code formatting rules
npm install --save-dev eslint eslint-config-prettier eslint-config-prettier-standard eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard prettier-config-standard
create and configure a .eslintrc.js

ESLint & Standard

// .eslintrc.js
module.exports = {
  parserOptions: {
    ecmaVersion: 2018,
  },
  extends: ['standard', 'prettier', 'prettier/standard'],
  rules: {
    'no-console': 'off',
    'no-var': 'error',
  },
  env: {
    es6: true,
    node: true,
  },
}

Add more features

fetch base version for a service using axios

Asynchronous with promise

// index.js
function resolveRightNowAsync() {
  return new Promise((resolve, reject) => {
    console.log(2)
    Math.random() <= 0.5 ? resolve('success') : reject(new Error('failure'))
  })
}

console.log(1)
resolveRightNowAsync()
  .then(result => console.log(`3 ${result}`))
  .catch(err => console.log(`3 ${err}`))
console.log(4)

Setup code repository

React

Create-react-app

One Dependency: There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects
No Configuration Required
No Lock-In: You can “eject” to a custom setup at any time

Let's jump into it

Create a folder

git init
add .gitignore file: https://www.gitignore.io/
create index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Code Academy 2019</title>
  </head>
  <body>
    <div id="root">
      <h1 class="title">Hello Bro</h1>
    </div>
  </body>
</html>

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Code Academy 2019</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const rootElement = document.getElementById("root");
    const element = document.createElement("h1");
    element.textContent = "Hello bro";
    element.className = "title";
    rootElement.appendChild(element);
  </script>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Code Academy 2019</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const rootElement = document.getElementById("root");
    const element = React.createElement(
      "h1",
      { className: "title" },
      "Hello Bro"
    );
    ReactDOM.render(element, rootElement);
  </script>
</html>

index.html

Parcel

npm install -g parcel-bundler

https://parceljs.org/

Init node project and add React dependencies

npm init -y
npm i react
npm i react-dom

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Code Academy 2019</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="./index.js"></script>
</html>

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");
const element = React.createElement("h1", { className: "title" }, "Hello Bro");
ReactDOM.render(element, rootElement);

index.html

index.js

Parcel

parcel index.html

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

package.json

https://babeljs.io/repl

<h1 className="title">Hello Bro</h1>

npm i @babel-preset-env @babel-preset-react --save-dev

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "transform-runtime",
    [
      "transform-react-jsx",
      {
        "pragma": "React.createElement"
      }
    ]
  ]
}

.babelrc

Prettier

{
  "jsxSingleQuote": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

add file .prettierrc

ESLint & Standard

module.exports = {
  parserOptions: {
    ecmaVersion: 2018,
  },
  extends: [
    'standard',
    'standard-react',
    'prettier',
    'prettier/standard',
    'plugin:jest/recommended',
  ],
  rules: {
    'no-console': 'off',
  },
  env: {
    es6: true,
    node: true,
  },
  parser: 'babel-eslint',
}

https://codesandbox.io/s/canodereact2019-7nl82