Node Begin

This is an auxiliary app. The project that aims to setup the Node development automatically. The following are the basic setup configurations that will be installed:

• nodemon
• eslint
• prettier
• babel
• webpack

How to use

The 'devSrc' directory is the heart of this application.

• Create your own project directory
• Initialize npm
• Copy the 'devSrc' into the root of your project
• On your terminal run "node devSrc"

Options

Running "node devSrc" will install default set of configurations. To install different configurations refer to the list below:

• Default: node devSrc
• All configs: node devSrc -a
• Custom: node devSrc -c configNames (e.g. node devSrc -c nodemon eslint)
• Uninstall: node devSrc -a

Note that when webpack is installed, your index.js from ./src folder will have "require('regeneration-runtime)" declaration on top of your code. It will also install that that npm in your production dependencies. This is needed to make the webpack output file to run appropriately.

Also, when you chose to install all configs, your package.json scripts will be modified to a common scripts setup.

Manual setup of configurations

eslint

Install eslint dependency:

npm install -D eslint npx eslint --init

Create a file named:

.eslintrc.json

{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
"node": true
},
"extends": [
"airbnb-base",
"prettier"
],
"plugins": [
"prettier"
],
"parserOptions": {
"ecmaVersion": 12
},
"rules": {}
}

prettier

Install prettier dependencies to work with eslint:

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

From settings, choose ‘Prettier - Code formatter’ as default formatter.

Create a file in the root of your project directory named:

.prettierrc

{
  "printWidth": 100,
  "singleQuote": true
}

babel

npm install -D @babel/core @babel/preset-env babel-loader @babel/node

Create a file in the root of your project directory named:

.babelrc

{
  "presets": ["@babel/presets-env"]
}

To start using babel

babel-node ./src or nodemon --exec babel-node ./src

To also make it work with “jest”:

npm install -D babel-jest @babel/polyfill Add a file on the root of src directory called “jest-setup.js” import "core-js/stable"; import "regenerator-runtime/runtime";

From the “package.json” file add a property “jest”:

"jest": {
"setupFiles": [
"./src/jest-setup.js"
]
}

webpack

Install webpack dependencies

npm install -D webpack webpack-cli webpack-node-externals

npm install regeneration-runtime

Create a file in the root of your project directory named:

webpack.config.js:

const nodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  mode: "production",
  externals: [nodeExternals()],
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

Modify thr package.json scripts:

"build": "webpack"

On your JS files, add the following on top of your code:

require("regeneration-runtime");

Done. Once you run the build script, the compressed file will be located on the "dist" directory, short for distribution.