Wednesday, September 12, 2018

Create Simple application with Nodejs using npm

Below are the summary of the steps I did to create a simple application using nodejs. I have used npm package manager to create this.

Needed Software
1. Download visual studio. get the zip from https://code.visualstudio.com/docs/?dv=winzip
2. Download Nodejs    64 bit binary zip https://nodejs.org/en/download/

Start your first application with Nodejs
1. Create a folder "TuteDemo"
2. Install JSPM and http-server
 a) npm install -g jspm http-server

     This will install jspm and http-server (-g)globally, across server anybody can use it. http-server is very light weight.
  If you have any issues encounter while setting up eg: rename error with path , copy the files to root directory (c:\).
  This will make foder path little less in length.
 
  you will get below output.
---------------------------------
 
C:\Code\React\TuteDemo>npm install -g jspm http-server
C:\node-v8.12.0-win-x64\hs -> C:\node-v8.12.0-win-x64\node_modules\http-server\bin\http-server
C:\node-v8.12.0-win-x64\http-server -> C:\node-v8.12.0-win-x64\node_modules\http-server\bin\http-server
C:\node-v8.12.0-win-x64\jspm -> C:\node-v8.12.0-win-x64\node_modules\jspm\jspm.js
+ http-server@0.11.1
+ jspm@0.16.53
added 341 packages from 233 contributors in 69.733s



2. Initialze the application
 b) nmp init
 press enter and will take default values.
 This will create 'package.json' file with all the initial information related to project.
 Note , root folder name "TuteDemo" automatically taken as package name with lower case.
 Others are set default values and save in json format.


Folder structure

TuteDemo
  -- package.json


{
  "name": "tutedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Below is the output
------------------------

C:\Code\React\TuteDemo>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.



3. Install jspm locally.
  for debugging purposes and our ease of use, we install jspm locally.

 c) npm install jspm --save
  
 this will install and --save for run time depnedency. --save-dev  for build

This will add "node_modules" folder and "package-lock.json" under root folder "TuteDemo" 
update "package.json"

"dependencies": {
    "jspm": "^0.16.53"
  }



Folder structure

TuteDemo
  -- node_modules   --> include all files with /bin folder
  -- package.json
  -- package-lock.json

 output - forgot to add --save at first run
 -----------------------------------------------

C:\Code\React\TuteDemo>npm install jspm
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN tutedemo@1.0.0 No description
npm WARN tutedemo@1.0.0 No repository field.
+ jspm@0.16.53
added 316 packages from 212 contributors and audited 2285 packages in 46.101s
found 1 critical severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

C:\Code\React\TuteDemo>npm install jspm --save
npm WARN tutedemo@1.0.0 No description
npm WARN tutedemo@1.0.0 No repository field.



4. Configure github with jspm registry.

 you need to have github account before running this step. Please go to https://github.com/ and make an account if yo do not have, else check your credential and confirm your username and password are working fine.
 just run "jspm" in command prompt, you will get the all the options associated with it.
 Just press enter and will take default values, only babel need to be set for ES6 Transpiler.
 This will create "config.js" and update "package.json"
 I have got few errors in gitgub account verification. However i have included the output as it is.

 with error in github token config.js as follows

 System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  paths: {}
});

 "package.json" you will see below

 "jspm": {
    "dependencies": {}
  }

 d) jspm  registry config github

 output
 ------
 C:\Code\React\TuteDemo>jspm  registry config GitHub

Would you like to set up your GitHub credentials? [yes]:yes
     If using two-factor authentication or to avoid using your password you can generate an access token at https://github.com/settings/tokens. Ensure it has public_repo scope access.
Enter your GitHub username:vrtugit
Enter your GitHub password or access token:
Would you like to test these credentials? [yes]:yes
err  Error: self signed certificate in certificate chain
         at TLSSocket. (_tls_wrap.js:1116:38)
         at emitNone (events.js:106:13)
         at TLSSocket.emit (events.js:208:7)
         at TLSSocket._finishInit (_tls_wrap.js:643:8)
         at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:473:38)

Would you like to try new credentials? [yes]:yes
     If using two-factor authentication or to avoid using your password you can generate an access token at https://github.com/settings/tokens. Ensure it has public_repo scope access.
Enter your GitHub username:vrtugit
Enter your GitHub password or access token:
Would you like to test these credentials? [yes]:no
ok   Registry github configured successfully.


Second time

C:\Code\React\TuteDemo>jspm init

Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:yes

Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [.\jspm_packages]:
Enter config file path [.\config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:babel
ok   Verified package.json at package.json
     Verified config file at config.js
     Looking up loader files...
warn Error on lookup for github:systemjs/systemjs, retrying (1).
     Error: fatal: unable to access 'systemjs/systemjs.git/': SSL certificate problem: self signed certificate in certificate chain

warn Error on lookup for github:systemjs/systemjs, retrying (2).
     Error: fatal: unable to access 'systemjs/systemjs.git/': SSL certificate problem: self signed certificate in certificate chain

warn Error on lookup for github:systemjs/systemjs, retrying (3).
     Error: fatal: unable to access 'systemjs/systemjs.git/': SSL certificate problem: self signed certificate in certificate chain

warn Error on lookup for github:systemjs/systemjs
     Error: fatal: unable to access 'systemjs/systemjs.git/': SSL certificate problem: self signed certificate in certificate chain

err
err  Error downloading loader files.
err




No comments:

Post a Comment