Cài đặt và thiết lập môi trường làm việc cơ bản cho Frontend Web Developer
Web
24
frontend
15
White

Sang Nguyễn Đắc viết ngày 26/12/2016

Mở đầu series bài viết tìm hiểu về Frontend Web mình sẽ hướng dẫn các bạn cài đặt và thiết lập môi trường làm việc hiệu quả.

Các ứng dụng cần thiết

NodeJS, NPM (https://nodejs.org/en/)
Editor (SublimeText, Notepad++, Atom …) hoặc IDE (PhpStorm, Dreamweaver…) , ở đây mình sử dụng Sublime Text.
Command Line:
iTerm – macOS.
cmder – Window.

Các package hữu ích cho Sublime Text

Đầu tiên các bạn cần cài đặt Package Control cho Sublime Text theo hướng dẫn ở đây: https://packagecontrol.io/installation.
Mình sẽ có một bài viết chi tiết hơn chia sẻ về Sublime Text, sau đây là một số package mình đang sử dụng:
– Theme Boxy: thay áo cho Sublime Text.
– SublimeCodeIntel: gợi ý code thông minh.
– Emmet: package nổi tiếng và có trên hầu hết các editor và ide hiện tại, giúp viết HTML một cách nhanh chóng, bạn có thể tìm hiểu thêm về cách sử dụng và cheatsheet của nó.
– MarkdownEditing: viết lách với Markdown
– AdvancedNewFile: tạo nhanh file và thư mục
– SideBarEnhancements: nâng cấp tính năng cho Sidebar.

Khởi tạo project

Bật command line tùy theo hệ điều hành bạn đang sử dụng, cd vào thư mục bạn sẽ code, chạy lệnh npm init. Điền các thông tin được yêu cầu, sau khi hoàn thành thì bạn sẽ được thu được kết quả như sau:
alt text

Mở Sublime Text, File -> Open tới thư mục đó, bạn sẽ thấy bên trong xuất hiện một file package.json tương tự thế này:

{
  "name": "vtuts",
  "version": "1.0.0",
  "description": "Frontend Tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "SangND",
  "license": "ISC"
}

LiteServer + BrowserSync.

LiteServer là một package trên nền nodejs, nó có tác dụng tương tự như các ứng dụng tạo localhost, hiểu một cách đơn giản nó giả lập môi trường giống như môi trường mà bạn sẽ deploy web lên cho nhiều người sử dụng, bạn có thể test code của trên nhiều device có cùng kết nối mạng với máy bật LiteServer. LiteServer tích hợp BrowserSync cho phép tự động refresh trình duyệt ngay khi bạn thay đổi code và ấn save.
Cài đặt LiteServer, bật command line, vào thư mục project ở bước trước:

npm install lite-server –save-dev

Thêm dòng sau vào trong scripts của file package.json:

“start”: “lite-server”

Kết quả thu được:

"scripts": {    
    "start": "lite-server"
}
//package.json sau khi cài đặt liteserver và chỉnh sửa
{
  "name": "vtuts",
  "version": "1.0.0",
  "description": "Frontend Tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "SangND",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.2.2"
  }
} 

Chạy thử npm start từ command line, kết quả như sau là bạn đã thành công:
alt text

Nhận được thông báo Cannot GET / là vì hiện tại project đang trống. Tạo thử một file index.html, save lại sau đó refresh trình duyệt bạn nhận được một trang trắng, thử thay đổi nội dung trong file index.html rồi save lại sẽ thấy trình duyệt tự động thay đổi theo.

alt text

Mẹo tạo nhanh HTML trong Sublime Text với Emmet, tạo file .html, sau đó tại khung soạn thảo bạn gõ “ ! Tab” (Chấm than, sau đó ấn Tab) hoặc “html:5 Tab” thì sẽ được template Html như trên.

Để ý rằng trong Command Line có đoạn:

[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.1.9:3000

Đoạn này có nghĩa là bạn có thể truy cập để test trang của bạn từ một thiết bị khác như máy tính, điện thoại, tablet nếu có cùng kết nối mạng với máy tính hiện tại của bạn bằng cách truy cập tới địa chỉ http://192.168.1.9:3000
Một số config nâng cao của BrowserSync như là thay đổi thư mục code, thêm middleware, thay đổi port (Mặc định là 3000), … mình sẽ có một bài viết khác nói chi tiết về nó. Các bạn có thể đọc thêm tại đây.

Cảm ơn bạn đã đọc bài viết này. Hẹn gặp lại ở những bài viết tiếp theo.

SangND - VTeam

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sang Nguyễn Đắc

6 bài viết.
11 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
10 2
I. Sass và Gulp là gì? 1. Sass (Link) là một CSS PreProcessor (Tương tự Less, Stylus, …). Sass được sinh ra để giúp bạn viết CSS nhanh và rõ ràn...
Sang Nguyễn Đắc viết hơn 1 năm trước
10 2
White
8 2
Angular 2 ra mắt kèm theo rất nhiều tính năng khá hữu ích Một trong số đó là sự xuất hiện của RxJS. Vậy bài này chúng ta sẽ cùng tìm hiểu căn bản v...
Sang Nguyễn Đắc viết hơn 1 năm trước
8 2
White
5 5
Mình viết bài này vì muốn giới thiệu cho các bạn cách cài đặt một môi trường cơ bản nhất để làm quen với Angular 2 dành cho các bạn mới bắt đầu hoặ...
Sang Nguyễn Đắc viết hơn 1 năm trước
5 5
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
White
12 2
Trong loạt bài Trở lại cơ bản này mình xin trình bày lại các khái niệm cơ bản về tất cả mọi thứ mình đã từng được học bằng ngôn ngữ đơn giản nhất c...
Hoàng Duy viết 2 năm trước
12 2
White
8 2
(Ảnh) "Mobile first" hay "Think mobile" là một trong những hot trend mà chúng ta thường được nghe gần đây, khi mà số lượng thiết bị di động và số ...
Trần Phong Phú viết 1 tháng trước
8 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
11 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!