{"id":5055,"date":"2020-09-25T17:52:34","date_gmt":"2020-09-25T12:22:34","guid":{"rendered":"https:\/\/www.h2kinfosys.com\/blog\/?p=5055"},"modified":"2020-09-25T17:53:15","modified_gmt":"2020-09-25T12:23:15","slug":"how-to-set-up-node-npm","status":"publish","type":"post","link":"https:\/\/www.h2kinfosys.com\/blog\/how-to-set-up-node-npm\/","title":{"rendered":"How to Set Up Node\/NPM?"},"content":{"rendered":"\n

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

What is a Package?<\/strong><\/h2>\n\n\n\n

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

Introduction to React:<\/strong><\/h2>\n\n\n\n

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 <\/a>files which can run in a browser.<\/p>\n\n\n\n

Setting up node<\/strong><\/h2>\n\n\n\n

Step 1:<\/strong> Once you have the project directory, navigate to the project directory, and initialize the project using npm.<\/p>\n\n\n\n

mkdir node-project<\/p>\n\n\n\n

cd node-project<\/p>\n\n\n\n

npm init<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

{\n  \"name\": \"project\",\n  \"version\": \"1.0.1\",\n  \"description\": \"Test\",\n  \"main\": \"home.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test  is specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"IS.\"\n}\n<\/pre>\n\n\n\n
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 \u2013save option.<\/p>\n\n\n\n
Creating Node.js Express Project<\/strong><\/h2>\n\n\n\n
Let’s start by installing the express framework to the Node.js project. Using npm, install the express framework.<\/p>\n\n\n\n
# installing express web framework
npm install express --save<\/code><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
{\n  \"name\": \"project\",\n  \"version\": \"1.0.1\",\n  \"description\": \"Test\",\n  \"main\": \"home.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test is specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"IS\",\n  \"dependencies\": {\n    \"express\": \"^4.16.4\"\n  }\n}\n<\/pre>\n\n\n\n
Create a file called app1.js and add the following code to it.<\/p>\n\n\n\n
const express = require('express')\nconst app = express()\nconst port = 3000\napp.get('\/', (req, res) => res.send(\"Welcome to setting up Node.js project !'))\napp.listen(port, () => console.log(`Application listen\n<\/pre>\n\n\n\n
Step 2: <\/strong>Installing create-react-app<\/p>\n\n\n\n
By using NodeJS\/NPM should be installed on your machine, so you can run the command:<\/p>\n\n\n\n
npm install -g create-react-app<\/code><\/p>\n\n\n\n
Now, install create-react-app globally so we can use it anywhere.<\/p>\n\n\n\n
Let’s Create a New React App<\/p>\n\n\n\n
Use create-react-app installed, so we can create a new app by running this command:<\/p>\n\n\n\n
create-react-app my-react-tutorial-app
cd my-react-tutorial-app<\/code><\/p>\n\n\n\n
The above command will use to create a new directory.<\/p>\n\n\n\n
my-react-tutorial-app\n{\n \"name\": \"my-react-tutorial-app\",\n \"version\": \"0.1.0\",  \n \"private\": true,\n \"dependencies\": {\n     \"react\": \"^16.5.2\",\n     \"react-dom\": \"^16.5.2\",\n },\n \"devDependencies\": {\n     \"react-scripts\": \"1.0.7\"\n   },\n   \"scripts\": {\n  \"start\": \"react-scripts start\",\n  \"build\": \"react-scripts build\",\n  \"test\": \"react-scripts test --env=jsdom\",\n  \"eject\": \"react-scripts eject\"\n }    \n}\n{\n  \"name\": \"my-react-tutorial-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@babel\/core\": \"7.1.0\",\n    \"@svgr\/webpack\": \"2.4.1\",\n    \"babel-core\": \"7.0.0-bridge.0\",\n    \"babel-eslint\": \"9.0.0\",\n    \"babel-jest\": \"23.6.0\",\n    \"babel-loader\": \"8.0.4\",\n    \"babel-plugin-named-asset-import\": \"^0.2.2\",\n    \"babel-preset-react-app\": \"^5.0.2\",\n    \"bfj\": \"6.1.1\",\n    \"case-sensitive-paths-webpack-plugin\": \"2.1.2\",\n    \"chalk\": \"2.4.1\",\n    \"css-loader\": \"1.0.0\",\n    \"dotenv\": \"6.0.0\",\n    \"dotenv-expand\": \"4.2.0\",\n    \"eslint\": \"5.6.0\",\n    \"eslint-config-react-app\": \"^3.0.3\",\n    \"eslint-loader\": \"2.1.1\",\n    \"eslint-plugin-flowtype\": \"2.50.1\",\n    \"eslint-plugin-import\": \"2.14.0\",\n    \"eslint-plugin-jsx-a11y\": \"6.1.1\",\n    \"eslint-plugin-react\": \"7.11.1\",\n    \"file-loader\": \"2.0.0\",\n    \"fs-extra\": \"7.0.0\",\n    \"html-webpack-plugin\": \"4.0.0-alpha.2\",\n    \"identity-obj-proxy\": \"3.0.0\",\n    \"jest\": \"23.6.0\",\n    \"jest-pnp-resolver\": \"1.0.1\",\n    \"jest-resolve\": \"23.6.0\",\n    \"mini-css-extract-plugin\": \"0.4.3\",\n    \"optimize-css-assets-webpack-plugin\": \"5.0.1\",\n    \"pnp-webpack-plugin\": \"1.1.0\",\n    \"postcss-flexbugs-fixes\": \"4.1.0\",\n    \"postcss-loader\": \"3.0.0\",\n    \"postcss-preset-env\": \"6.0.6\",\n    \"postcss-safe-parser\": \"4.0.1\",\n    \"react\": \"^16.5.2\",\n    \"react-app-polyfill\": \"^0.1.3\",\n    \"react-dev-utils\": \"^6.0.3\",\n    \"react-dom\": \"^16.5.2\",\n    \"resolve\": \"1.8.1\",\n    \"sass-loader\": \"7.1.0\",\n    \"style-loader\": \"0.23.0\",\n    \"terser-webpack-plugin\": \"1.1.0\",\n    \"url-loader\": \"1.1.1\",\n    \"webpack\": \"4.19.1\",\n    \"webpack-dev-server\": \"3.1.9\",\n    \"webpack-manifest-plugin\": \"2.0.4\",\n    \"workbox-webpack-plugin\": \"3.6.2\"\n  },\n  \"scripts\": {\n    \"start\": \"node scripts\/start.js\",\n    \"build\": \"node scripts\/build.js\",\n    \"test\": \"node scripts\/test.js\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": [\n    \">0.2%\",\n    \"not dead\",\n    \"not ie <= 11\",\n    \"not op_mini all\"\n  ],\n  \"jest\": {\n    \"collectCoverageFrom\": [\n      \"src\/**\/*.{js,jsx}\"\n    ],\n    \"resolver\": \"jest-pnp-resolver\",\n    \"setupFiles\": [\n      \"react-app-polyfill\/jsdom\"\n    ],\n    \"testMatch\": [\n      \"<rootDir>\/src\/**\/__tests__\/**\/*.{js,jsx}\",\n      \"<rootDir>\/src\/**\/?(*.)(spec|test).{js,jsx}\"\n    ],\n    \"testEnvironment\": \"jsdom\",\n    \"testURL\": \"http:\/\/localhost\",\n    \"transform\": {\n      \"^.+\\\\.(js|jsx)$\": \"<rootDir>\/node_modules\/babel-jest\",\n      \"^.+\\\\.css$\": \"<rootDir>\/config\/jest\/cssTransform.js\",\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>\/config\/jest\/fileTransform.js\"\n    },\n    \"transformIgnorePatterns\": [\n      \"[\/\\\\\\\\]node_modules[\/\\\\\\\\].+\\\\.(js|jsx)$\",\n      \"^.+\\\\.module\\\\.(css|sass|scss)$\"\n    ],\n    \"moduleNameMapper\": {\n      \"^react-native$\": \"react-native-web\",\n      \"^.+\\\\.module\\\\.(css|sass|scss)$\": \"identity-obj-proxy\"\n    },\n    \"moduleFileExtensions\": [\n      \"web.js\",\n      \"js\",\n      \"json\",\n      \"web.jsx\",\n      \"jsx\",\n      \"node\"\n    ]\n  },\n  \"babel\": {\n    \"presets\": [\n      \"react-app\"\n    ]\n  }\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":5091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[1414,1413],"class_list":["post-5055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-tutorials","tag-set-up-node-js","tag-setup-npm"],"_links":{"self":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/5055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/comments?post=5055"}],"version-history":[{"count":0,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/5055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media\/5091"}],"wp:attachment":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media?parent=5055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/categories?post=5055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/tags?post=5055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}