Chia sẻ mã nguồn website hỏi đáp xây dựng từ MEAN Stack

Chia sẻ mã nguồn website hỏi đáp xây dựng từ MEAN Stack

Website hỏi đáp này mình xây dựng từ MEAN Stack (MongoDB, ExpressJS, AngularJS, NodeJS) do mình từ build từ đầu nên source code đọc rất dễ hiểu và nó phù hợp với bạn nào muốn tìm hiểu về AngularJS hay NodeJs. Mình làm từ lúc mới bắt đầu nghiên cứu nên nó rất dễ dàng để tiếp cận theo hướng từ cơ bản tới nâng cao.

>> AngularJS - Filter trong AngularJS – Hướng dẫn filter AngularJS

>> AngularJS – Tài liệu học AngularJS căn bản Tiếng Việt AngularJS

>> AngularJS khá mạnh mẽ trong việc validate form đăng ký

Một số giao diện:

Ứng dụng sẽ có các chức năng cơ bản của 1 website hỏi đáp như đăng ký/đăng nhập (hỗ trợ đăng nhập qua facebook, google), đăng câu hỏi, trả lời, vote, follow câu hỏi. Ngoài ra còn hỗ trợ gửi thông báo thời gian thực (realtime) và chat giữa các thành viên thông qua việc sử dụng SocketIO. Một số tính năng khác bạn có thể tìm hiểu qua demo azquestion.com. Mình cài đặt trên VPS của DigitalOcean và chắc do cấu hình sai nên SocketIO không hoạt động, dẫn đến 1 số chức năng không hoạt động.

Nếu bạn là người đam mê hoặc muốn tìm hiểu về MEAN Stack, hãy cài đặt mã nguồn này để tham khảo. Lúc đầu nghiên cứu về nó, mình đã mất khá nhiều thời gian để định hình cách hoạt động và cách phân chia thư mục. Đã phải học từ rất nhiều tuts của nước ngoài. Vì vậy mình share mã nguồn này, hi vọng sẽ giúp các bạn nào mới nghiên cứu có thể tiếp cận 1 cách nhanh hơn.

Bạn tải mã nguồn tại đây: https://github.com/sangnguyenplus/azquestion

Để chạy ứng dụng máy tính bạn cần cài đặt NodeJs. Sau khi cài đặt xong NodeJs, bạn cd vào thư mục chứa source code và chạy lệnh để cài đặt bower, chúng ta sẽ dùng bower để tải các thư viện cần thiết về.

npm install -g bowe

Tiếp theo chúng ta sẽ tiến hành tải các gói thư viện của NodeJs thông qua Npm bằng lệnh:

 
npm install

Lưu ý: Lệnh cài đặt này sẽ bao gồm bower install, tuy nhiên một số trường hợp có thể lỗi, bạn kiểm tra thư mục public/libs xem đã có các thư viện js, css chưa sau khi chạy lệnh này, nếu chưa có hãy chạy tiếp lệnh “bower install” nhé.

Tiếp theo, hãy cài đặt MongoDB nếu bạn chưa cài. Nếu chưa biết cách cài đặt, hãy xem Manual của Mongo nhé.

Sau khi cài đặt xong MongoDB, hãy cd vào thư mục db trong ứng dụng và chạy lệnh:

 
mongorestore

để import database cho ứng dụng.

Chạy “node server” để chạy ứng dụng và truy cập vào http://localhost:3000 xem kết quả nhé.

Mặc định website sẽ chạy trên cổng 3000, nếu bạn sửa cổng này thì hãy lưu ý tới file config/auth.js, bạn cần sửa lại port ở config này cho phù hợp.

Nếu bạn muốn cài đặt source lên VPS hay server nào đó hỗ trợ NodeJs thì các bước làm tương tự. Cần cài đặt thêm foreverjs để ứng dụng chạy liên tục. Cài đặt thêm Nginx để loại bỏ cổng 3000 khỏi đường dẫn chính. Bạn có thể sử dụng đoạn config này cho Nginx:

 
server {

    listen 80;

    server_name azquestion.com;

    location / {

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header Host $http_post;

        proxy_set_header X-NginX-Proxy true;


        proxy_pass http://128.199.130.111:3000;

        proxy_redirect off;


        # Socket.IO Support

        #proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection "upgrade";

    }

}

Hi vọng sẽ giúp đỡ được các bạn đang nghiên cứu về cái này, nếu có lỗi trong cài đặt hoặc nội dung source, hãy để lại bình luận bên dưới nhé.

Tags: 
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Facebook đứng đầu các website có lượng truy cập nhiều nhất năm 2011

Facebook đứng đầu các website có lượng truy cập nhiều nhất năm 2011

Phần đánh giá được lấy từ Google Ad Planner, dịch vụ theo dõi thầm lặng các website trên internet.

Adding a New Drupal Block Position

Thêm 1 vị trí Drupal Block với ShallowGrunge.Module

One of our students wanted to put a block position inside the red header bar. If you haven't done so already, download and install ShallowGrunge: http://drupal.org/project/shallowgrunge

Hướng dẫn nâng cấp Drupal 6 lên Drupal 7 hay Drupal 8

Hướng dẫn nâng cấp Drupal 6 lên Drupal 7 hay Drupal 8

Drupal 8 is not backward compatible, I think that's a good thing: you don't want to drag legacy stuff behind you. That's a big bucket on your boat.

Công ty diệt chuột T&C

 

Diet con trung