Quick Node.js-Express Serving HTML Files

Ok. what if you have a Node.js-Express Server, sure you can use Jade or EJS using the template engine but how do you serve the most basic “index.html” files. the following is the code for a bare-bones quick server for “.html” files.

Here is a picture with the file-tree

The HTML file are in the Directory “pages”.

code in “package.json”:

 

For better results on development use: NODEMON

Category: Node | Comments Off on Quick Node.js-Express Serving HTML Files

Node Fixes

When installing some dependencies for a React app I got the following error:

To fix it, I execute the following terminal commands:

More information can be found on the following: LINK

 

 

Category: Node | Comments Off on Node Fixes

Layouts

LayOuts for a quick start

Layout 1 – Basic Responsive

This is for an app created using: Node.js Express.js EJS BootStrap Font Awesome, this is what should look like:

To see more details about the PARTS, app.js, etc see the GitHub this is page-10: LINK

Here is some of the CODE.

Make sure to see the code in the “parts” folder

Category: Node | Comments Off on Layouts

Deploy Node.js to Heroku

Create a GitHub Repository and add the GIT in your Local Machine (Even if is a subfolder of a Git).

  • git init
  • git add .
  • git commit -m”Adding Files”
  • git remote add origin https://github.com/Edxael/…..
  • git push origin master

 

Follow Instructions in Documentation: LINK

Create the files:

 

Update file “package.json” add missing data, compare to This File: LINK

 

Install: “Heroku CLI”  –> LINK  example in how to do it below:

 

Mega GOTCHA:  

 

Open the terminal in your PWD for your app:

Deploying to HEROKU

 

 

 

Category: Node | Comments Off on Deploy Node.js to Heroku

Postman + mlab

Here is the code from my study notes while working with Postman to add “Documents” to the “Collection” in a database hosted online in mlab. Here is also code to pull the data from the database and show it the browser and the “Terminal Console”.

File Tree:

Here is the PostMan Google Chrome configuration to add documents to Collection:

Now Here is the code of the Files:

SERVER.JS

01-TEMP1.JS

PACKAGE.JSON

Using this code I was able to add documents to my DataBase on mlab.

Here is the PostMan Google Chrome configuration to UPDATE documents FROM Collection:

Here is the PostMan Google Chrome configuration to DELETE documents FROM Collection:

.

Category: Node | Comments Off on Postman + mlab

Node.js – EJS

 

 

“E” is for “effective.” EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.

What is EJS: Link

Documentation: Link-1   Link-2

Text Tutorial: Link

 

 

express-ejs-layouts

Another tool is ” express-ejs-layouts ”

that allows you to import or stick HTML elements into the ejs file

Documentation: LInk-1   Link-2

Tex Tutorial: Link-1

YouTube: Vdo-1

 

.

Category: Node | Comments Off on Node.js – EJS

How to Deploy a Node.js App

Node.js Deployment to Heroku:

Here is a Online tutorial step by step:  SCOTCH.IO

 

Node.js Deployment to Digital Ocean:

Text Tutorial: LINK.

 

 

.

Category: Node | Comments Off on How to Deploy a Node.js App

Storing & retrieving Data in the CPU

To start with you need to have Node installed, if you do not have it use this: Link

Starting the Project:

Now crate a Directory this directory will have the “Blue-Prints” that node will use to build the App, make sure to “Terminal” “cd abc” into the directory, there initialize npm using the command:

Here is where node will ask you few questions, about the project that you are initializing, if you do not want to answer the question just press “Enter” and Node will use the default answer which you can see in parenthesis, then Node will pass to ask the next question.

The last question will ask you to review the answer that you just give, and if you say OK, it will create a JSON file with that information. (you can edit this file latter.)

Now if you see the directory you will see that Node just create a file named: “package.json” that file has the configuration parameters for your App, this is also the place were we will be storing the 3rd party libraries that we require, so each time that we use this “Blue-Prints” to build our App Node will make sure to check this file to see what other Library  or  Module, or Dependency  it has to bundle when building the app.

Next we will install a Module that will allow-us to store data Locally into our computer, this module name is:  node-persist witth the commad: npm install node-persist@0.0.6 –save

Let me explain what just happen, here Node it tells you that will install the Module: node-persist then it tells you that this module in order to work needs to install other modules and tells you the name of those modules, the version and Install them.

You will also notice  that thanks to the flag  ” –save  ” this will modify your JSON file.

You will also notice that it create a new folder named: “node_modules” inside you can find a folder for each module installed, also the ones that you do not install but the got installed as a requirement to a module you install.

Create Script to Start the APP  “app.js”:

In the directory create a new file and name it: app.js  and add the code: ” console.log(“Starting Edxael’s Passwor Manager”); ” and save it.

Then lest modify our JSON file. in the section of “scripts” we will add a new script that will be executed when we use the command: “ npm start “.

Remember we create the file “app.js” lest add this script to the list of scripts executed when we run the “npm start” command.

Now when we run the “npm start” command in the Terminal, code in the “app.jswill be executed.

—————————

Storing & retrieving Data in the CPU:

here we will get data and store this data in a file in the computer.

1st – To do this we will use the Module that we install “node-persist” to be able to to use it we will require it and store it in a variable in our “app.js” file:

Basic example in how to create a variable that is stored in the computer:

Another example, in this case we create a variable that will be the database for the Bank Accounts:

Now lest add one more account:

  1. Load the Browser var ‘dbase‘ with the current data in the CPU var: ‘accounts
  2. Add the new account to the Browser variable: ‘dbase
  3. Sync the data in ‘dbase‘ with the CPU variable ‘accounts

Then the next time that you need to get the data from the CPU:

 

 

 

 

.

Category: Node | Comments Off on Storing & retrieving Data in the CPU

Basic Web Server

Crating a basic Web Server.


Starting up Steps:

  • Create a directory with a Readme.txt file
  • Initialize a Git Repo (Optional)
  • CD to the directory and check node using: “npm -v”

Create Package.jason

In the project directory create the file: package.jason by executing the following commands in the terminal. ” npm init ” and provide the required information or just hit enter when you have a question to select the default value. Now open the new created file with Atom. The code should looks like:

Server.js File

Create a new file and name it: “server.js
Now go to the nodejs.org website and click on the About page. There you will find an extreme basic example of a “Web Server”, copy the basic code and paste on the server.js file.  The code should look like:

Testing the server

Now in the terminal type the command: ” node server.js ” and you should see the response  ” Server running at http://127.0.0.1:3000/ ”   NOTE: you can start the sever also using the command ” npm start

The address 127.0.0.1 is you local host and the 3000 is the port that is been used by the server. now lest check this on the browser.

In the browser type: localhost:3000 and hit Enter, if successful the browser should load a web page with the text: ” Hello World

Congratulations you create your first Node Project, a basic web server, but we are not done yet. this sever is serving text messages to the browser, in the real life this not happen, web servers serve HTML pages.

Serving a HTML Pages.

To do this we need to modify the code in the file: “server.js” and it should look like:

This is build to serve HTML pages, however this is just for exercise, in future projects we will be using a different code to crate and run the Node.js Server, in the industry is common practice to use Express and other tools to make this more simple, but it was important that you see the code without frameworks so you can see how it works.

Now you can start the server again and request some HTML Sites, I create a whole site with pages of some singers that I was lisenning while I was creation this project, find all the code and files in GitHub: Node.js-basic-Web-Server.

Here is a picture of the site when the server running and serving multi page sites.

The source code for the web pages is on the GitHub Repository too.

Category: Node | Comments Off on Basic Web Server

GULP


Gult is a build system or a build tool, this meas it will help us to automate things.

To install: there are two stages 01- Install Globally & 02- Install in local Project.

01- Installing Glup globally:

and to make sure is install check with:

02- Install Gulp Locally:

cd (to you project folder), there we want to add the Gulp to the “package.jason” file, to do that.

now open the “package.jason” file with a text editor and you will find out that a new area name “devDependencies” is created.

and just to make sure that the installation was completed, on your the terminal type: “gulp” and you should get the following error: “No gulpfile found”

now let use it.

In order to to be able to use Gulp, we need to create a .js file on the root directory of our project.  so: “cd ~(to your project)” and there you can create the file in the command line with:

now lest open this file so we can write on it:

01- Before we star coding, we should Import or Require the “Gulp Package” that we install a little ago. by typing on the “gulpfile.js” file:

save the file an now in the Terminal type:  “gulp”  and we should get the error “Task ‘default’ is not in your gulpfile” plus some other lines. this is OK now on the“gulpfile.js” file we need to write:

now save the file an in the Terminal run the command “gulp”

and now you can see that the task was successfully run, with the following result.

now lest practice creating another task

to run the default “gulp task” you only need to type in the terminal: gulp

but if you want to be more specific in what task you want to run you can type “gulp” space (and the name of the task like) “html”:

and now you can see that the task was successfully run, with the following result.

Now let me break the bad news, Gulp by it self is not very useful but if you want to make some great things we can use “GULP PLUG-IN’S”. so now lest see one Plug-In name “gulp-watch” and is the plug-in that makes automation possible, this plug in watch files on the computer and wen it detects that some changes have been made, it can trigger a “Gulp Task” in response.

so now lest install this plug in and add it to the our file “package.json”, now go to the in the Terminal:

once is completed we need to go to our .js file  “gulpfile.js” and add it in another variable,  I will add the code on the existing file so you see what I’m doing

we just create the task: “watch”  now lest run it on the Terminal

you will notice it not finish, because our faithful robot do not stop working, until we say so, but for now is keeping watch on the “index.html” file so lets open it on Sublime text and make a small change like add a extra space, save it, when you save it, ath the same time the task “watch” is activating the fiction programmed and  you will notice that in the TERMINAL, you can see the execution of that Function.

to tell gulp to stop watching in the command line type: “CTRL + C”

now lest create another that if ANY file in our css “styles” directory is changed it will trigger a task.

now it the Terminal start the gulp-task “styles”

now if we run the task gulp watch again:

and the same will happen if we create other .css files and change therm.


GULP & PostCSS

(lecture 10) – To create the code that we desire, we need to have a task that watch for changes on the CSS and copy those same thing using “.pipe()”  to do this we need to update one task in the gulp.js file to the following:

but copy the content of the file “styles.css” to another file is not our goal we want to modify the content from “.src()” to “.dest()” using pipe().

Before we can do that we need to use”NPM” to install “PostCSS” in the command line (inside of the working directory):

once that is completed, we can go to the file: “package.json” and see that the line””gulp-postcss”: “^6.3.0″,” has bee add to the “devDependencies”, more important now we can use PostCSS in our “gulp.js” file

so at the very top of the “gulp.js” file we nee to add the request for postcss, so now the top in the request area should be like.

now we need to add a plug-in to post-css, this plug in is “auto-prefixer” using “npm” in the Terminal.

now request the new package “autoprefixer ” in the “gulp.js” file


Addig support for Variables in the mani CSS file.

Go to the Terminal and install the simple-vars package

once completed we need to require that packagein our “gulp.js” file:


Now les continue editing our “glupfile.js” we nee to update the line were we call the “autoprefixer”

then in the terminal run the “gulpfile.js” then make a small change on the main css file, save it, and see how now the variable in the temporary css is in a acceptable format like: color: #2f5572, now you get the Idea that we can add as many “post-css” features as we want, so lets add one more.


Addig support for Nested CSS:

In the terminal install nested css:

once completed we need to require that packagein our “gulp.js” file:

Now les continue editing our “glupfile.js” we nee to update the line were we call the “autoprefixer”, again. (this time we add the word “nested”)

and time to run the “gulpfile.js” in the terminal to see how it affects the temporary css.

 

 

s

 

 

 

X

Category: Node | Comments Off on GULP

NPM


Use MPM to down-load JQuery in the current directory (single ingridient)

now you can delete jquery. because we will install it again in a better way.

Grocery List

after this in the current directory you should find a new file name: “package.json”  this file keeps track of all the packages that our project uses, you want want one of this for each one of you projects, now lest open it with a text editor and we will find something like:

you can delete most of it just make sure to keep: “name” & “version” lines, and save the changes.

now back in the command line lest Down-load JQuery again. but this time with a little extra code: “–save”

The same folders will appear, but if you check your file name: “package.json” you will find that the line “Dependencies” was created with “jquery 3.1.1” on it.

now lest install another package:

and as expected: withing the “node_modules” folder the “normalize.css” will apear aswell as the file name: “package.json” will be updated.

one reason this is a cool feature would be:  Delete the “node_modules” folder, now to get it back in the command line type:

and this will bring them back again.

Now to Find out what other packages can be use in your future projects: in the website:   npmjs.com  there you can search and browse for packages. or you can Google: “what you are hopping to achieve + npm”.

 

 

a

x

Category: Node | Comments Off on NPM

Node.js – Install

Node.js + Linux


How Install Node.js in Linux Mint: Link


Using: Node.js

To know what version you have install in your PC:

To print on the Terminal:

Creating a HTML file on local directory.

Saving a Picture from Internet to local directory:

The files created on this exersice are located in: GitHub.com

 

 

x

Category: Node | Comments Off on Node.js – Install