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

  1. git init
  2. npm init
  3. add .gitignore file: https://www.gitignore.io/
  4. 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

  1. git init
  2. add .gitignore file: https://www.gitignore.io/
  3. 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

FullstackJS Academy - course 1

By yagong

Made with Slides.com

FullstackJS Academy - course 1

  • 824

More from yagong

  • FullstackJS Academy - course 6
    yagong
    742
  • FullstackJS Academy - course 5
    yagong
    683
  • FullstackJS Academy - course 4
    yagong
    781
  • Introduction to modern JavaScript
    yagong
    754