Build a simple blog with Node.js, Express, MongoDB (Part 1)

What are Node.js, Express and MongoDB?

  • Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
    Read more https://nodejs.org/en/
  • Express is a Fast, unopinionated, minimalist web framework for Node.js.
    Read more https://expressjs.com/
  • MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.
    Read more https://www.mongodb.com/what-is-mongodb

Install Node.js

Node.js is available from the NodeSource Debian and Ubuntu binary distributions repository (formerly Chris Lea's Launchpad PPA). Support for this repository, along with its scripts, can be found on GitHub at nodesource/distributions.

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt install -y nodejs


Optional: install build tools
To compile and install native addons from npm you may also need to install build tools:
$ sudo apt install -y build-essential

If you use one of the following OS:
  • Arch Linux
  • Enterprise Linux and Fedora
  • FreeBSD and OpenBSD
  • Gentoo
  • NetBSD
  • nvm
  • openSUSE and SLE
  • macOS
  • SmartOS and illumos
  • Void Linux
  • Windows

please use this link https://nodejs.org/en/download/package-manager/ to install.

Check the node version with:
$ node -v
My current version is v8.4.0.

npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.
Check the npm version with:
$ npm -v
My current version is 3.10.10.

Create a blog application

$ mkdir node-blog
$ cd node-blog/
$ npm init


This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. Enter your information or press enter to use the default information for each key:

  • name: (node-blog) 
  • version: (1.0.0) 
  • description: 
  • entry point: (index.js) 
  • test command: 
  • git repository: 
  • keywords: 
  • author: 
  • license: (ISC) 

If ok, enter 'yes':

  • Is this ok? (yes) yes

The package.json file will be like:
{"name":"node-blog","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo "Error:no test specified" && exit 1"},"author":"","license":"ISC"}

Install Express

Run the following command:
$ npm install express --save
Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file.
When you push your project to GIT, you shouldn't push node_modules directory, so please add '--save' afterwards to update the package.json file. When others pull from GIT, they can use
$ npm install
to install all the dependencies.

Hello, Express!

Start up the web server

Create server.js with the basic form:
const express = require('express');

var app = express();

app.get('/', function(req, res) {
  res.send('Hello world!');
});

app.listen(3000);


The Text Editor the screenshot bellow is Atom, read more http://blog.alphaplus.vn/2017/08/atom-hackable-text-editor-for-21st.html

Then run the following command:
$ node server.js

Open your browser, navigate to localhost:3000

Now, please open the Text Editor again, change "world" to "Express", save and refresh your browser.
The browser also sends "Hello world!". It's not correct, because the "node server.js" command we used didn't monitor any changes in your node.js application.
To resolve this issue, we use nodemon https://www.npmjs.com/package/nodemon
nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application.

To install nodemon, please run the following command:
$ sudo npm install -g nodemon
And nodemon will be installed globally to your system path
Because we not only use nodemon for this project, but also others, so we install it as global (-g)

Now, open your terminal again, press Ctrl + C to cancel, then run the following command:
$ nodemon server.js

Open your browser again, refresh, then you can see "Hello Express!". Open your Text Editor, change "Express" to your first name, save the file, then refresh your browser, you will see the new change.

Follow ES6, we change "function(req, res)" to "(req, res) =>"
We can also send HTML or javascript object object with res.send method:
HTML:

Javascript object:

Javascript array is OK:
app.get('/', (req, res) => {
  res.send([{
    'id': 1,
    'title': 'Lorem ipsum dolor sit amet',
    'summary': 'Etiam sed ultricies erat. Aliquam a ligula erat. Fusce purus turpis, viverra non vestibulum a, vestibulum in orci.',
  }]);
});


We hard code:
app.listen(3000);

It's not good, the port should be changed in the terminal.
So, create the constant to get the environment port, if not, set it to 3000.
const port = process.env.PORT || 3000;
Then change the line:
app.listen(3000);
to
app.listen(port);

The complete source code:
const express = require('express');

const port = process.env.PORT || 3000;

var app = express();

app.get('/', (req, res) => {
  res.send([{
    'id': 1,
    'title': 'Lorem ipsum dolor sit amet',
    'summary': 'Etiam sed ultricies erat. Aliquam a ligula erat. Fusce purus turpis, viverra non vestibulum a, vestibulum in orci.',
  }]);
});

app.listen(port);


Open the terminal again, press Ctrl + C to cancel.
Then run the following command:
$ PORT=9000 nodemon server.js

Change 9000 to any available port you want, then open the browser with your port, in my case: http://localhost:9000

Part 2: http://blog.alphaplus.vn/2017/08/build-simple-blog-with-nodejs-express-mongodb-part-2.html
See you then!

No comments:

Post a Comment