Week 7: Node JS and Server-Side Frameworks

This week was Node JS and Server-Side Frameworks from Colt Steele The Web Developer Bootcamp.

   -Introduction to Node
   -Using Node
   -Introduction to NPM 
   -Installing NPM Packages
   -Introduction to Express
   -The Package.json
   -Route Params
   -Templates and EJS
   -EJS Conditionals and Loops 
   -Serving Custom Assets

Introduction to Node

Node is a way to make JavaScript code run on the server side. JavaScript alone is just a client-side scripting language that runs in browsers. Node makes it possible to give JavaScript full stack features in that it can be utilized in both client and server infrastructure. It is almost like one language to rule them all.

I have found this to be an helpful resource https://railsware.com/blog/what-is-node-js-used-for/

Using Node

Node has its own dedicated console version which is based on the command line that lives in the terminal. It is possible to access the node terminal by using : ‘node’
To run a file with node
Node filename.js

Introduction to NPM

NPM is node package manager. A package are libraries of prewritten code that helps your project.
npm install nameOfPage will put the package into your project.
When creating projects, developers use a lot of prewritten code of libraries and frameworks to give them a start so that they do not have to start from scratch which would take a lot of time and effort that could be spent on other aspects of that project

Installing NPM Packages

Installing packages into our projects alone is not enough, we must also use the require() statement to include the package in our projects for it to work properly.
Var package = Require(nameOfPackage)

Introduction to Express

https://expressjs.com/

Express is a web framework to help make web apps with the JavaScript programming language. There are frameworks that exist across all programming languages.

Flask/Django	Rails	Express
Python	Ruby	JavaScript

There are two different kinds of frameworks known as heavyweight and lightweight. The terminology references how much code that you have to do on your own. If you go with a heavy framework then more code is prewritten for you, therefore, you can write less code on your own. Meanwhile, a lightweight framework just has enough prewritten code to get you up and running and you will have to do more code on your own.

Express is a lightweight framework, therefore we have more options to customize our own code.

The Package.json

Package.json contains all the metadata about the application.

Route Params

‘*’ is a route matcher.
It is a catch all for routes that are not defined.

app.get(“*”, function(req, res) {
res.send(“You are a star”);
})

Routes

app.get(“/r/soccor”); 

Templates and EJS

https://ejs.co/

EJS is embedded JavaScript templating.
The tags for ejs

<%= EJS %>

And

<%  EJS <%> 

EJS makes its possible to generate HTML markup with plain JavaScript.

Some of the most useful features of EJS is 
       -Fast compilation and rendering
       -Simple template tags: <% %> 
       -Custom delimiters
       -Both server JS and browser support 
       -Static caching of templates
       -Complies with the Express view system

Use res.render() to render HTML from an EJS file.

var express = require(“express”)
var app = express()
app.listen(process.env.PORT,process.env.IP)
function() {
console.log(“Server”)
app.get(“/”, function req, res) {
res.send(“Welcome to home page”)
res.render(“dogs.html”)

We need dynamic HTML files, which are called templates.
EJS is embedded JavaScript.

app.get(“/”, function(req,res)
res.render(“dogs.ejs”)

Views directory is important to express.
Within an HTML tag it is possible to add in a single line of javascript.

<h1>You fell off a tree with: <% thing.Var.toUpperCase() %> </h1> 

EJS Conditionals and Loops

Control flow
There are different types of tags in EJS
The value that is returned will be rendered to the page and added to the HTML

<%= %>
<p>I love <%= 5+5 %> </p>
Will actually render to 10 in the HTML itself. 

This will just run the code.

<% %>

Serving Custom Assets

How we can start to include assets such as style sheets and JavaScript so that we can have more than just basic HTML.
Using partials
Partials are most commonly use for headers and footers.
<% include partials/header %>
<% include partials/footer %>