Xây dựng website bằng Nodejs và Express

Chắc hẳn các bạn đã nghe nhiều đến Nodejs - một nền tảng server side được xây dựng từ nền tảng Javascript, hôm nay tôi sẽ giới thiệu đến các bạn một cách nhanh chóng để xây dựng website bằng Nodejs. Trước hết, hãy chắc chắn rằng bạn đã cài Nodejs và npm, nếu chưa, bạn có thể tham khảo cài Nodejs và npm (trên Ubuntu):

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

hoặc có thể tham khảo thêm cách cài đặt Nodejs trên nền tảng khác tại đây

Để kiểm tra nodejs và npm đã cài đặt thành công hay chưa, hãy thử kiểm tra version:

nodejs -v
v6.10.3
npm  -v
4.2.0

Cài đặt express:

npm install -g express-generator

hoặc

sudo npm install -g express-generator

Flag -g có nghĩa là ta đã cài đặt express trên phạm vi global (trong hệ thống của bạn)

Nào, bây giờ chúng ta sẽ bắt đầu xây dựng website:

express -c stylus express_example

Flag -c nghĩa là chúng ta muốn sử dụng stylus cho css. Bạn có thể nhìn thấy kết quả:

warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : express_example
   create : express_example/package.json
   create : express_example/app.js
   create : express_example/public
   create : express_example/routes
   create : express_example/routes/index.js
   create : express_example/routes/users.js
   create : express_example/views
   create : express_example/views/index.jade
   create : express_example/views/layout.jade
   create : express_example/views/error.jade
   create : express_example/bin
   create : express_example/bin/www
   create : express_example/public/javascripts
   create : express_example/public/images
   create : express_example/public/stylesheets
   create : express_example/public/stylesheets/style.styl

   install dependencies:
     $ cd express_example && npm install

   run the app:
     $ DEBUG=express-example:* npm start

Tiếp theo là đi đến thư mục vừa tạo express_example:

cd express_example && npm install

npm thứ không thể thiếu được - dùng để cài đặt, chia sẻ và phân phối mã nguồn, gần giống như chức năng của Gem trong Ruby on Rails vậy. Cài đặt thành công npm sẽ bao gồm rất nhiều các gói con được cài đặt và hiển thị ra màn hình console dưới dạng như:

├─┬ body-parser@1.17.2 
│ ├── bytes@2.4.0 
│ ├── content-type@1.0.2 
│ ├── debug@2.6.7 
│ ├── depd@1.1.0 
│ ├─┬ http-errors@1.6.1 
│ │ └── inherits@2.0.3 
....

Nếu lỗi sẽ báo ERROR và công việc tiếp theo của bạn trong trường hợp này là tìm lỗi và khắc phục nó, đa số các trường hợp lỗi là do npm và nodejs chưa tương thích hoặc quá cũ, bạn nên update trước khi bắt tay vào xây dựng project.

Sau khi cài đặt npm thành công, chúng ta có thể khởi động app được rồi: Đối với Linux or OSX:

DEBUG=express_example:* npm start

còn đối với Windows:

set DEBUG=express_example:* & npm start

Cổng mặc định của web trên local là 3000, hãy truy cập trên trình duyệt địa chỉ http://127.0.0.1:3000 (hoặc localhost:3000) .

Phát triển Nodejs sites: Thông thường, khi xây dựng trang web với nodejs, bạn sẽ phải khởi động lại ứng dụng của bạn mỗi khi có sự thay đổi (về code). May mắn thay, một dev tay to Javascript người anh là Remy Sharp đã giải quyết được vấn đề này bằng nodemon. Nodemon sẽ tự động reload ứng dụng của bạn mỗi khi có sự thayd đổi code mà không cần khởi động lại. Nếu bạn đã sử dụng Shotgun cho Ruby với Sinatra thì nó cũng tương tự như vậy. Cài đặt nodemon (thật tiện lợi vì chúng ta có npm)

npm install -g nodemon  # hoặc sudo npm install -g nodemon 

Bây giờ chúng ta có thể bắt đầu với nodemon:

DEBUG=express_example:* nodemon

Nodemon sẽ tự động tìm trong project setting của bạn để tìm các files thích hợp để start server của bạn. Nếu không được thì hãy thử :

DEBUG=express_example nodemon npm start

Sử dung nodemon không có nghĩa là trong tất cả các trường hợp bạn không phải khởi động lại server. Để rõ hơn các trường hợp cụ thể về nodemon bạn hãy đọc README

HTML với Express Express không khuôn mẫu như các ngôn ngữ bạn sử dụng. Các ngôn ngữ khuôn mẫu luôn là các đề tài tranh luận, nhưng ở đây tôi sẽ sử dụng jade (nó cũng tương tự như haml):

doctype
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/chunkfive-fontface.css')
  body
    header
      nav
        ul
          li 
            a(href="/") Home
          li 
            a(href="/about") About
          li 
            a(href="/contact") Contact
    section#wrapper
        block content
        footer 
          section.css-table
            section.four-column
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet

Lưu file ở /views/layout.jade

CSS với Express:

body
  font 62.5%/1.5  Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif
  text-align center
  background #000

#wrapper
  awidth 920px
  text-align left 
  margin-left auto 
  margin-right auto
  background #fff
  padding 20px
  border-bottom-radius(15px)

Ở đây tôi sử dụng stylus , nó cũng tương tự như sass.

Routing in Express routes/index.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res){
  res.render('index', {
    title: 'Home'
  });
});

router.get('/about', function(req, res){
  res.render('about', {
    title: 'About'
  });
});

router.get('/contact', function(req, res){
  res.render('contact', {
    title: 'Contact'
  });
});

module.exports = router;

Chức năng và hiển thị đã có chút thay đổi so với project khởi tạo ban đầu, hãy bắt tay vào phát triển thêm những tính năng mà bạn thích nhé.

Push lên heroku:

heroku apps:create 
git push heroku master

Kết: Trên đây tôi đã trình bày với các bạn một cách cơ bản để tạo ra một trang website từ node và express, và một số điều từ Nodejs ecosystem. Các điểm mạnh của Nodejs không quá nhiều khi xây dựng static websites như thế này. Các bạn nên tìm hiểu thêm thư viện của Nodejs có rất nhiều thứ hay ho :v , và tôi nghĩ chúng ta sẽ có những ứng dụng tuyệt vời được xây dựng từ Nodejs. Nhân tiện hãy trải nghiệm một chút với socket.io nhé. Cám ơn các bạn đã theo dõi bài viết, hi vọng các bạn sẽ có những trải nghiệm thú vị. Tham khảo tại đây