how to run a node.js application in debug mode?

it is very convenient to trouble shot a node.js application when we run it under debug mode.

here is the line that we can execute in the command line within the project folder in the CMD

set DEBUG=* & node main (for project with main.js as the start up file)

or
set DEBUG=* & node index (for project setting index.js as the entry point.

or we can add the following code to the script section in the package.json file.

"debug": "set DEBUG=* node main"


here is the sample from my node.js application.

  "scripts": {

    "start": "node main.js",

    "test": "echo \"Error: no test specified\" && exit 1",

    "debug": "set DEBUG=* & node main"

  },

then we can start the application with the following line

npm run debug

how to use environment variable in Node.js and Express Server development?

it is very convenient to use environment variable during the web development with express server and Node.js

here is the steps to configure the environment variable in the  project.

1. add a .env file to the project folder.

2. install the dotenv package
    npm i dotenv -S

3. add dotnet library to the file that will load the environment variable. in my case it is from a controller

dotenv = require('dotenv');

dotenv.config();

4. add required variables to the .env file

#test token
TOKEN=recipeT0k3n

# API
API_TOKEN=recipeAPIT0k3n

5. load the environment variable, it must be the same file in the step 3

const token=process.env.TOKEN || "recipeT0k3n",

or you can define it as global variable in the index.js or main.js with the following snippet of code

dotenv = require('dotenv');

dotenv.config();

export const token=process.env.TOKEN || "recipeT0k3n",

Handy npm commands

1. use npm init to generate a package.json file for the application

2. use npm install --save flag to mark the package as an application dependency.

for example when i ran npm install express --save, the process will automatically add express to the
dependencies section.

use npm install --save-dev to install the library for the development of an application only

{

  "name": "first_express_project",

  "version": "1.0.0",

  "description": "first web project build with express",

  "main": "main.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "Dan Deng",

  "license": "ISC",

  "dependencies": {

    "express": "^4.17.1"

  }

}

3.  run npm docs library name to access the library documentation.

for example npm docs express will launch the default web browser to http://expressjs.com.

4. npm i nodemon -g to install the node monitor package to force restart the application. after any change to the project.
use the following configuration to setup nodemon to run the application

 "scripts": {

    "start":"nodemon main.js",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

then run npm start to launch the application.

λ npm start

> first_express_project@1.0.0 start C:\code\Node\first_express_project
> nodemon main.js

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node main.js`
The express server has started and is listening on port number : 3000

React Application Development Quick tips and trick

1. it is Case sensitive to import library in the class.

Import react from 'react' will cause the issue with following error message

 Line 7:5:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 8:7:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 10:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 11:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 13:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope

the corrected syntax is Import React from 'react', the same apply to import Component

2. use npm init react-app <my-app-name> to create a react app without any specific template.

if you want to create  npx create-react-app <my-app-name>, you must provide a template like this below

npx create-react-app my-app --template typescript

3. we must use THIS keyword to access the variables and functions defined inside the component.
you will get this error message when you try to access the variable without THIS. The this keyword refers to the component instance.

./src/App.js
  Line 37:18:  'count' is not defined  no-undef

export default class App extends Component{

  count=4;

  isEven = () => this.count%2==0 ?"Even": "Odd"

  render = () =>

    <h4 className="bg-primary text-white text-center p-2 m-1"> 
number of things: {this.isEven()}</h4>

}

4. use spread attribute to pass properties to component, for example {...this.props}

 render={ (routeProps) => 

                            <DataGetter { ...this.props } { ...routeProps } >

                                <Shop { ...this.props } { ...routeProps } />

                            </DataGetter>

                        } />

how to fix the tricky component or function 'is not defined react/jsx-no-undef' error in React Development

here is the code for customsection.js

import React, { Component } from "react"

class CustomSection extends Component{

    render(){ 

        return (

        <h1>Hello Custom Section</h1>

        );

    }

}

export default CustomSection;

then i have the code from the App.js will have the CustomerSection component

import React, { Component } from 'react';

import  './CustomSection'

class App extends Component {

  render(){

  return (

    <div> 

      <h1>Hello World</h1>

      <CustomSection />

    </div>

  );

  }

}

export default App;

it looks simple and straight, however when i compile the code in the visual studio terminal

npm run-script build

PS C:\DanAngular\dan-react\my-first-react> npm run-script build

> my-first-react@0.1.0 build C:\DanAngular\dan-react\my-first-react
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/App.js
  Line 28:8:  'CustomSection' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

the error stems from this line

import  './CustomSection'

we must specific the component name in the import. that is very practice, i really like this checking on the compile time. it will enforce the proper component being reference and will be called.

import CustomSection from './CustomSection'

after i fixed this line, then the project compiled and ran,

my first try on the react is good and running


Happy programming, Cheers

How to save your day with a simple command on existing anuglarJS with angular/CLI running on Node.JS?

Today, I got a chance to run an application that I download from Angular office website

when I run ng serve to launch the SPA web application. I got compile error immediately



i can fix it by run this command line in the CMD Windows

npm install -save/dev PackageName

It will really take time to fix all the missing package error. there is a much simple approach with the following line


npm install

this command will automatically re-install all the missing packages for the existing project.

How to fix typescript file missed by yo @microsoft/sharepoint setup command

when i first executed yo @microsoft/sharepoint to generate a web part, the return was corrected, However the style sheet typescript was missing after i ran the  yo @microsoft/sharepoint in the same project.

 the root cause of this issue is that i had load the lasted change from microsoft sharpeoint page framewrok with this command  run npm i -g @microsoft/generator-sharepoint@latest

it really messes up development enviroment, fortunately the microsoft offer the work around for this mess. the following steps is provided by microsoft.

"

1.  - Run npm update then npm prune then npm dedupe
   This will update all the packages then optimize the node_modules folder size.
2.  - Run gulp nuke to clean up any old build artifact
3. - Run gulp to build your updated project

"

you can find more information regarding the above steps from this link

https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-4-and-MDL2


Update: in the lastest release, microsoft had remove the typescript object for the stylesheet. when you create the sharepoint web part from yo @microsoft/sharepoint with latest drop. you will not see any typescript object for stylesheet.

How to solve "error TS2307: Cannot find module 'angular'" issue in development using sharpeoint page framework

In the WebPart.ts file. I use the import * as angular from angular to reference the external source that pointing to the angular CDN location.

{
  "entries": [
    {
      "entry": "./lib/webparts/itRequest/ItRequestWebPart.js",
      "manifest": "./src/webparts/itRequest/ItRequestWebPart.manifest.json",
      "outputPath": "./dist/it-Request.bundle.js"
    }
  ],
  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
      "angular": {
            "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
            "globalName": "angular"
          }
  },
  "localizedResources": {
    "itRequestStrings": "webparts/itRequest/loc/{locale}.js"
  }
}

however the syntax error already is shown indicate the type script can not find the angular module.



after i launch the app with Gulp Serve. the same erorr was encounter on the application launch



the root cause of this issue is that the project did not contain the angular TypeScript typing. since it is from the external source. we just need to install the angular TypeScript typing to fix the issue.

here is the steps to add the type script typing to the project.

1. use npm install tsd to install the tsd command (if the tsd is not installed.)

2. run tsd install angular --save to install the angular TypeScript typing. and angularjs will be found under typing folder.







 for more information, please visit the following link. it really save my day...

Use existing JavaScript libraries in SharePoint Framework client-side web parts