รับเขียนโปรแกรม: พฤศจิกายน 2019

Heroku เป็นบริการ Cloud ( มีทั้งบริการแบบฟรี และเสียเงิน ) ที่รองรับ NodeJS Application ที่ได้รับความนิยม ในบทความนี้ จะแสดงขั้นตอนการ สร้างหน้าเว็บ อย่างง่าย ด้วย Node JS , Exprss JS และ Upload ไปไว้ที่ Heroku ทีละขั้นตอนดังนี้

รับเขียนโปรแกรม NodeJS

รับเขียนโปรแกรม Javascript

Download Source Code https://github.com/nuntawa/sample_node_js_app

สร้าง Folder งานด้วยคำสั่ง mkdir sample_node_js_app
( ในที่นี้ใช้ชื่อ Folder ว่า sample_node_js_app ) เมื่อสร้าง folder แล้วให้เข้าไปที่ folder sample_node_js_app ด้วยคำสั่ง cd sample_node_js_app จากนั้นพิมพ์ npm init เพื่อสร้าง node module และ ไฟล์ package.json

ดูความเรียบร้อยของไฟล์ package.json แล้วกด Enter

install express js ด้วยคำสั่ง npm install express --save แล้วกด enter

เปิด Visual Studio แล้วเลือก sample_node_js_app

เปิดไฟล์ package.json แก้ scripts โดยใส่ start:"node index.js" เพื่อให้สามารถใช้คำสั่ง npm start ในการเริ่มรันได้

สร้างไฟล์ index.js ซึ่งเป็นไฟล์เริ่มต้น

พิมพ์คำสั่ง

var express=require("express");
var app=express();
var port=process.env.PORT || 3000;
var path = require("path");

app.use(express.static('public'));

app.get("/",(req,res)=>{

res.sendFile(path.join(__dirname+'/public/index.html'));

});

app.listen(port);

เพื่อให้ เมื่อเรียกหน้าเว็บแล้ว นำไฟล์ index.html ใน folder public ขึ้นมาแสดง
( คำสั่ง app.use(express.static('public')); คือการกำหนดให้ nodejs รู้จัก folder public )

แต่เรายังไม่มีไฟล์ index.html ใน folder public ให้สร้าง folder public ขึ้นมาก่อน

สร้าง folder css ใน folder public สำหรับไฟล์ css

สร้าง folder js สำหรับใส่ไฟล์ javascript

ในที่นี้เราจะใช้ bootstrap สำหรับตกแต่งหน้าเว็บซึ่งต้อง Download ไฟล์ javascript และ css ของ bootstrap มาไว้ก่อน โดยเริ่มจาก jquery
ให้เปิด Browserไปที่ https://code.jquery.com/jquery-3.4.1.min.js แล้ว คลิกขวา Save AS

โดยเลือกให้บันทึกใน folder js ที่ได้สร้างไว้

ต่อมา Download popper.min.js โดยเปิด
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
ใน browser แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม

Download bootstrap.min.js โดยเปิด Browser แล้วไปที่

https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js

แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม

Download bootstrap.min.css โดยเปิด Browser แล้วไปที่
https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css
แล้วคลิกขวา save as ไปไว้ที่ folder css ที่สร้างไว้ใน folder public

สร้างไฟล์ index.html ที่ folder public เพื่อให้ node js นำไฟล์มาแสดง

ใส่ code html

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-3.4.1.slim.min.js" ></script>
    <script src="/js/popper.min.js" ></script>
    <script src="/js/bootstrap.min.js" ></script>

    <title>Hello, world!</title>
</head>
<body>
      <div class="container">
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                      <h1 class="display-4">Sample Node js </h1>
                      <p class="lead">This is sample Node js </p>
                    </div>
                  </div>
      </div>

    </body>
</html>
ในไฟล์ index.html