Web Programming Header

INFO PAGE


NodeJS

NodeJS is an asynchronous JavaScript runtime for building scalable network applications. It is JavaScript on the server and actually the server as well. Node also has Node Package Manager (NPM) that lets developers distribute and use apps.

  1. BEFORE installing Node, make sure your computer updates are up-to-date.
  2. Download Node at https://nodejs.org.
  3. Close all applications including the browser and then install Node.
  4. Follow all the defaults and check Automatically install the necessary tools.
  5. Once installed, open a Command Prompt from the Start Menu search

// Type the following and press Enter to see the version of Node 
node -v

// Enter the following to see the version of Node Package Manager 
npm -v


Node Package Manager (NPM)

Packages are how node files are organized and shared. See https://npmjs.com. Packages usually rely (depend) on more pacakages. Packages always have a package.json file that holds configuration data such as the following:

{
    "name": "zimjs",
    "version": "16.2.5",
    "type": "module",
    "main": "./src/zim.js",
    "types": "./ts-src/typings/zim",
    "scripts": {},
    "devDependencies": {
        "typescript": "^4.5.2"
    },
    "dependencies": {
        "@zimjs/createjs": "^1.4.1"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/danzen/zimjs.git"
    },
    "keywords": [
        "ZIM",
        "ZIMjs",
        "Canvas",
        "Components"
    ],
    "author": "Dr Abstract - Dan Zen",
    "license": "ISC"
}      


PROJECT

Let's make a project:

  1. Make a folder called firstnode in your Web Programming directory
  2. Drag this folder onto your VS Code desktop icon (or open it)
  3. Just make sure that this is the only folder in your VS Code.
  4. Add an app.js file with the following code:

  5. // Load HTTP module
    const http = require("http");
    
    const hostname = "localhost";
    const port = 3000;
    
    // Create HTTP server (in future, we do this with the Express package)
    // req - will hold a request object (what is coming in)
    // res - will hold a response object (what is going out)
    const server = http.createServer((req, res)=>{
    
        // Set the response HTTP header with HTTP status and Content type
        res.writeHead(200, {"Content-Type": "text/plain"});
    
        // Send the response body "Hello world"
        res.end("Hello world\n");
    
    });
    
    // Start the server listening
    server.listen(port, hostname, ()=>{
        console.log("Server running on port " + port);
    });
    

  6. Open a terminal in VS Code (CTRL `) or use Terminal menu
  7. I open a terminal by dragging the bottom of VS Code up
  8. Type the following into the terminal:

  9. // type the following and press ENTER and answer the questions
    npm init
    
    // Package name: the default is fine, change the name if you want
    // Version: the default is fine
    // Description: my first node.js program then press ENTER
    // Entry point: this should default "app.js"
    // Test Command: leave blank
    // Git Repository: leave blank
    // Keywords: can leave blank
    // Author: your first and last name
    // License: accept default
    

  10. Note the package.json file that gets made
  11. To run the app type the following:

  12. // type the following and press ENTER (no need for .js)
    node app
    
    // you should see Server running on port 3000 in the terminal
    
    

  13. Open a browser and type http://localhost:3000 in the browser bar
  14. You should see Hello world! in the browser
  15. To make changes to your app you must stop it running in the terminal
  16. Press CTRL C to stop


  17. INSTALLING A PACKAGE

  18. Constantly stopping and starting after each update is annoying
  19. We will install a package called nodemon to help us

  20. // type the following and press ENTER. 
    npm install -D nodemon
    
    // you can use i instead of install 
    // -D will save a dev dependency (not for distribution)
    // see the update in your package.json
    
    // TERMINAL TIPS
    
    // to copy code from the lessons page or somewhere else
    // select the code and use CTRL C 
    // then right click in the terminal - it will add the code 
    
    // you can use the arrow up and down 
    // to go to a previous and next commands
    

  21. Note that a node_modules folder with content has been installed
  22. Add the following in the scripts brackets {} in the package.json file
  23. "start": "nodemon app.js"

  24. "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "nodemon app.js"
    },

  25. Make sure to put a comma after the test line that is in there
  26. Now start the app using the following:

  27. // type the following and press ENTER. 
    npm start
    
    // this calls the start script which runs the app with nodemon

  28. Each time you save your app.js file nodemon will restart the app
  29. Not so important for this app, but handy when actually coding


CONCLUSION

We have installed NodeJS and gone through the basics for creating and running a node app. In other pages we will install more packages including an important package called Express which helps us server our pages using an important concept called Routing.

FULL Sheridan Node documentation can be found in Wendi Jollymore's Lessons.