Dựa trên hướng dẫn của trang này, mình muốn note lại một số thứ để sau này sử dụng
Bước 1: Tạo một repo trên github của bạn nhé !
Bước 2: Bạn git clone về ở local nhé !
Bước 3: Các bạn cd vào thư mục với tên project bạn đã tạo nhé !
Bước 4: Các bạn vào trang chủ của Heroku, tạo một account free để sử dụng nhé, sau đó vào CLI gõ lệnh heroku login -i để đăng nhập
Bước 5: Ta sẽ tạo một project trên heroku nhé với câu lệnh heroku create <yournameproject>
Bước 6: Sau khi tạo xong rồi, ta bắt đầu build web của chúng ta nhé, trước hết ta sử dụng lệnh npm init -y để cái packets
Sau khi cài xong, ta sẽ thấy một file json để ta config, tiếp tục ta cài Express với câu lệnh npm install express --save nhé !
Tiếp theo, ta sẽ tạo file app.js để tiến hành build project của chúng ta, đối với window chúng ta có thể sử dụng câu lệnh: type nul > app.js hoặc đối với Linux, các bạn có thể dùng touch app.js nhé !
Tiếp theo, ta sẽ tiến hành code một số cái cơ bản nhất trong file app.js nhé !
// create an express app
const express = require("express")
const app = express()
// use the express-static middle ware
app.use(express.static("public"))
// define the first route
app.get("/",function(req,res){
res.send("<h1>Hello World!")
})
// start the server listening for requests
app.listen(process.env.PORT || 3000, ()=> console.log("Server is runnning..."))
Bước 10. Tiếp theo, ta sẽ chạy app trên local với câu lệnh node app.js và sau đó truy cập : localhost:3000 bạn sẽ thấy kết quả hiện ra:
Bước 11: Chúng ta sẽ tiến hành thêm npm start bằng cách config lại file json ban đầu một chút nhé ! :
Ps: Các bạn thêm dòng lệnh "start":"node app.js" vào script, và có thể test lại trên CLI bằng câu lệnh npm start
Bước 12: Để app này chạy trên được Heroku, chúng ta phải thêm file Procfile, file này sẽ có chứng năng giúp cho server nhận diện được script cần để build, cụ thể các bạn dùng lệnh như sau: type nul > Procfile
Và ta tiếp tục chèn các dòng lệnh : web: node app.js vào file Procfile này !
Bước 13: Tiếp theo, để trang web thêm sinh động, ta có thể thêm các file HTML, CSS và JS vào app trên bằng cách tạo ra thư mục public, và tạo ra thêm các file HTML, CSS và JS vào trong nó
Tiếp theo, ta sẽ code trang trí web trong này nhé !
- index.html
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
<p>How many paragraphs do you want to generate?</p>
<input type="number" id="quantity" min="1" max="20" value="1">
<button id="generate">Generate</button>
<button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
- styples.css
h1 {
font-family: 'Alegreya' ;
}
body {
font-family: 'Source Sans Pro' ;
width: 50%;
margin-left: 25%;
text-align: justify;
line-height: 1.7;
font-size: 18px;
}
input {
font-size: 18px;
text-align: center;
}
button {
font-size: 18px;
color: #fff;
}
#generate {
background-color: #09f;
}
#copy {
background-color: #0c6;
}
- script.js
$("#generate").click(function(){
var lorem = $("#lorem");
lorem.html("");
var quantity = $("#quantity")[0].valueAsNumber;
var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
for(var i = 0; i < quantity; i++){
lorem.append("<p>"+data[i]+"</p>");
}
})
$("#copy").click(function() {
var range = document.createRange();
range.selectNode($("#lorem")[0]);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
)
Sau đó, các bạn chạy lại và thấy được kết quả như thế này:
Bước 15: Chúng ta sẽ tiến hành deploy trên heroku nhé !
Chúng ta thực hiện các lệnh sau:
git add .
git commit -m "your comment"
và sau đó là:
git push heroku main
Bước 16: Các bạn có thể sử dụng câu lệnh heroku logs --tail để xem lịch sử log trên server của heroku nhé !
- Nếu bạn thấy
starting to crashed: Tức là ta chưa thành công nhé :v
-
Thì sau một hồi edit, một điều chú ý khi ta ghi ở file
Procfileđó là:web: node app.js -
Và sau khi fix xong, ta có thể dùng lệnh
heroku openđể chạy thử, và kết quả thật bất ngờ đó là:
và để kiểm tra lần nữa cho chắc chắn, ta có thể sử dụng lệnh heroku logs --tail để xem sự thành công khi build 1 trang lên heroku nhé !:
OKIE, ta thấy starting to up, tức là lúc này ta đã hoàn tất !!