Scribd
Upload
108 views30 pages

Catbook Workshop: Intro To Nodejs: Monde Duinkharjav

This document summarizes a workshop on introductory NodeJS concepts. It discusses what NodeJS is, how to initialize a NodeJS project using NPM, create a basic web server using the HTTP package, and organize the project structure. It also covers using the Express framework to handle requests and routes, sending HTML files instead of plain text responses, and separating code into different files for scalability.

Uploaded by

msuoodh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
108 views30 pages

Catbook Workshop: Intro To Nodejs: Monde Duinkharjav

This document summarizes a workshop on introductory NodeJS concepts. It discusses what NodeJS is, how to initialize a NodeJS project using NPM, create a basic web server using the HTTP package, and organize the project structure. It also covers using the Express framework to handle requests and routes, sending HTML files instead of plain text responses, and separating code into different files for scalability.

Uploaded by

msuoodh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Catbook Workshop:

Intro to NodeJS
Monde Duinkharjav
What is NodeJS?
NodeJS is...
A Javascript RUNTIME ENGINE

NOT a framework

NOT Javascript nor a JS package

It is a method for running your code in Javascript. Let’s see how…

In your terminal run the command


$ nodejs

> node (for Windows users)


> console.log(“Hello World”);
Hello World
Pop Quiz: Where else can you find a
javascript runtime engine?
Programming Language Libraries
Programming languages have many libraries.

E.g. numpy, scipy for python.

In python, we have pip. This manages your python packages.

In javascript, we have...
Node Package Manager (NPM)
Initializing a Javascript Project using NPM
$ npm init

This command creates package.json.


This file keeps track of info about the
project
Let’s create a web server using the http package
Create a file called app.js. And in this file, type:

Now, running the command you will get:

$ nodejs app.js
Hello World
Let’s create a web server using the http package
$ npm install http --save

(parallel to pip install)


This command will do two things:

1. Add the http package


DEPENDENCY to your
package.json
2. Download the http library in under
the directory node_modules

WARNING: this installs http only


for the current project
IMPORTANT TANGENT
Make a file called .gitignore in your project’s directory

And write inside it: node_modules/

Why? You don’t want to push thousands of lines of code from libraries into your
repository. Instead, you make git ignore the node_modules directory.

When you later clone your project code, you always run

$ npm install

And reinstall node_modules to your machine


Let’s import the http package into our project
In app.js

(equivalent to import numpy for


python)

This loads the http library into our


project. Let’s use this package and
start a webserver:

You can run the app now with:

$ nodejs app.js
If you’re lost:
Go to go.6148.io/workshop2 and clone
git checkout step1
function(req, res) {}
1. req stands for request, res stands for response
2. We’re passing in a function to these methods:
Whenever a request is made, this function is invoked.
The argument res is mutated by this function.
3. This type of function pops up a LOT in web server request handling
Let’s test our web server out
Open your web browser: http://localhost:3000

Okay, we’re done! We have a web app. Thank you for coming. You’re done…
Let’s test our web server out
Real applications are many orders of magnitude more complex so the code base
can get out of hand really quickly.

Introducing: Express

A Javascript library that provides a web server architecture.

Rupayan’s Take on Express: Organize my web server.

Let’s install it... hold up. Let’s do some housekeeping first.


Housekeeping
1. Create a directory called src and
public
2. Move app.js into src
3. From here on we’ll use a wrapper
to nodejs: nodemon
a. Run $ npm install nodemon
--save-dev
b. Add npm start script to package.json
What happened to our project?
1. Server logic code is now in src. Static files accessible for all clients in public
2. Nodemon detects when you change the files in your app and restarts your
app.
3. Dev Dependencies are the libraries you use for development. Good to have
this distinction for development vs actual application logic
4. $ npm start is an ALIAS to typing nodemon src/app.js which is a good
abstraction to make.
Using express to send a Hello World message
Exercise: Create a new endpoint
Aside: endpoint - a reference to a service a web application provides.
E.g. ‘/’ is the “root endpoint”. We can have a ‘/u/profile’ endpoint that can
be reached by typing http://<webapp url>/u/profile

Exercise: Create a new endpoint called ‘/u/profile’ that sends the message ‘My
Profile’.

If you’re behind, you can run to hop in right before you need to do this exercise

git reset --hard


git checkout step2
Now let’s send our .html files instead of plain text
1. Create a directory called ‘/src/views’
2. Change res.send to res.sendFile
Now let’s send our .html files instead of plain text
Oops… when we request the
endpoint, the css and js files
don’t work properly…

Let’s fix that:

1. Add line 6 to your code


2. Move the js and css folders
into public
3. Change the references in
the html
Exercise: Render the ‘/u/profile’ endpoint
- ‘/u/profile’ endpoint should render the profile.html page we created on
Tuesday’s lecture.
Okay moving on… more Housekeeping
What happens if we try to reach the endpoint

‘/aaronsipsersucks’ or
‘/dannysrealnameisdanielwinstontang’
Okay moving on… more Housekeeping
What happens if we try to reach the endpoint

‘/aaronsipsersucks’ or
‘/dannysrealnameisdanielwinstontang’

404!!!
Okay moving on… more Housekeeping
We should also take care of 500
Internal Errors.

Not really important how this works


exactly… tbh i don’t exactly know
how this works myself.
Working with several files
As projects get larger, one app.js file
will be too much to deal with. Let’s
demonstrate how this is done by
moving our “view” endpoints
somewhere else.

1. Create a directory called


‘src/routes’
2. Inside, make a file called views.js
module.exports = router
Remember?

const http = require(‘http’);

This is importing http. Then, you export a package by typing:

module.exports = …;

We exported router just now, we import it back in our app.js by typing:


Final results: go.6148.io/workshop3

You might also like