JAVA Tutorials

How to Set Up Node/NPM?

NPM package manager for the Node.js using the packages, or modules if you like. www.npmjs.com hosts thousands of free packages to download and use. NPM program should be installed on your computer when you install Node.js. Now, NPM is ready to run on your computer!

What is a Package?

A package in Node.js which contains all the files which are required for a module. Modules are the JavaScript libraries that we can include in your project.

Introduction to React:

The React is a front-end framework that is used to create a UI. JSX is a JavaScript syntax extension, which is typically used to React to describe the UI elements. A web pack is a pack of the JavaScript files which can run in a browser.

Setting up node

Step 1: Once you have the project directory, navigate to the project directory, and initialize the project using npm.

mkdir node-project

cd node-project

npm init

The above command will ask for a couple of details like name, version, git, etc. related to the Node.js project. Enter the details, and you will have the project created with a package.json file.

{
  "name": "project",
  "version": "1.0.1",
  "description": "Test",
  "main": "home.js",
  "scripts": {
    "test": "echo \"Error: no test  is specified\" && exit 1"
  },
  "author": "",
  "license": "IS."
}

The package1.json file will have all the information related to the Node.js project. Information related to all node package modules installed in the project can be saved to the package.json file using the –save option.

Creating Node.js Express Project

Let’s start by installing the express framework to the Node.js project. Using npm, install the express framework.

# installing express web framework
npm install express --save

The above command installs the express framework to the node-project. Now, if you check the package1.json file, you will have the express module details saved in the package1.json file as a dependency.

{
  "name": "project",
  "version": "1.0.1",
  "description": "Test",
  "main": "home.js",
  "scripts": {
    "test": "echo \"Error: no test is specified\" && exit 1"
  },
  "author": "",
  "license": "IS",
  "dependencies": {
    "express": "^4.16.4"
  }
}

Create a file called app1.js and add the following code to it.

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send("Welcome to setting up Node.js project !'))
app.listen(port, () => console.log(`Application listen

Step 2: Installing create-react-app

By using NodeJS/NPM should be installed on your machine, so you can run the command:

npm install -g create-react-app

Now, install create-react-app globally so we can use it anywhere.

Let’s Create a New React App

Use create-react-app installed, so we can create a new app by running this command:

create-react-app my-react-tutorial-app
cd my-react-tutorial-app

The above command will use to create a new directory.

my-react-tutorial-app
{
 "name": "my-react-tutorial-app",
 "version": "0.1.0",  
 "private": true,
 "dependencies": {
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
 },
 "devDependencies": {
     "react-scripts": "1.0.7"
   },
   "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
 }    
}
{
  "name": "my-react-tutorial-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.1.0",
    "@svgr/webpack": "2.4.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-preset-react-app": "^5.0.2",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.3",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.5.2",
    "react-app-polyfill": "^0.1.3",
    "react-dev-utils": "^6.0.3",
    "react-dom": "^16.5.2",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.2"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}
Facebook Comments
Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button
Close
Close