เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

บทความนี้ไม่มีอะไรมากครับ ผมแค่อยากมาเขียนไว้กันลืมเฉยๆ เป็นขั้นตอนการเริ่มโปรเจ็คจากการสร้างแอ็พเริ่มต้นจาก create-react-app แล้ว deploy ขึ้นไปบนโฮสฟรีอย่าง Heroku เพื่อทดสอบว่ามันเวิร์ครึเปล่าเท่านั้นเองจริงๆ

ก่อนอื่นที่เราต้องมีในเครื่องเลยก็คือ Node js ครับ โหลดจากหน้าเว็บหลักแล้วติดตั้งให้เรียบร้อย ที่เราใช้บ่อยก็คือคำสั่ง npm โน่นนี่นั่นนั่นแหละ ลงเสร็จแล้วก็ลองเช็คดูครับว่ามันเวิร์คมั้ยด้วยคำสั่งด้านล่างนี้ด้วย Command Prompt หรือ Terminal ใน VS Code ที่ผมชอบใช้ประจำก็ได้

ืnpm --version

ก็ถ้าได้ตัวเลขเวอร์ชั่นมาก็คือใช้ได้นั่นแหละ จากนั้นเราก็ต้องมีตัวที่ใช้สร้าง React Project ที่ชื่อว่า create-react-app ซึ่งเราติดตั้งด้วยการรันคำสั่ง

ืnpm install -g create-react-app

เราก็จะได้ตัวที่ใช้สร้างโปรเจ็คสำหรับ React มาใช้งานแล้ว ซึ่งการสร้างโปรเจ็คก็คือการรันคำสั่งง่ายๆด้วยเจ้า create-react-app นี่แล้วตามด้วยชื่อโปรเจ็คของเราแบบด้านล่างนี้

create-react-app myReactProject

แล้วก็ cd เข้าไปใน folder ที่มันสร้างโปรเจ็คมาให้เราแล้วลองรันดูด้วยคำสั่ง

ืnpm start

ซึ่งมันก็จะได้หน้าแอ็พเริ่มต้นของ React นั่นแหละ ไม่มีอะไรพิเศษ ใน Vue Js ก็เช่นกัน

ในส่วนของการตั้งค่า Server เบื้องต้น

สร้างไฟล์ชื่อ server.js ขึ้นมาใน folder ของโปรเจ็คแล้วก็ใส่โค้ดด้านล่างนี้เข้าไป

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

จากโค้ดด้านบน เราจำเป็นต้องใช้ express, express-favicon กับ path เพราะงั้นเราต้องใส่มันเข้าไปในโปรเจ็คด้วยคำสั่ง

npm add express express-favicon path

แล้วเราก็มาแก้ไฟล์ package.json ตามภาพด้านล่าง

จากนั้นเราก็รันคำสั่ง build ด้วยคำสั่ง

ืืnpm run build

เพื่อ build โค้ดสำหรับ production เป็นอันจบขั้นตอนฝั่งแอ็พของเราแล้ว จากนั้นก็จะเป็นการอัพโหลดโค้ดขึ้นไปแล้ว deploy ไปที่ Heroku แล้วครับ

ขั้นตอนการ Deploy ขึ้น Heroku

ก็ไปสมัครและสร้าง app ในระบบให้เรียบร้อย จากนั้นก็กลับมาที่เครื่องตัวเอง จัดการส่งโค้ดขึ้นไปบน Heroku กัน

ก่อนอื่นก็ติดตั้ง Heroku CLI กันก่อนด้วยการโหลดมาลงได้เลย

จากนั้นก็พิมพ์ heroku login ใน Terminal แล้วมันก็จะเปิดหน้าเว็บให้ login เข้าไปให้เรียบร้อย

จากนั้นก็ พิมพ์คำสั่ง

git init
heroku git:remote -a myreactproject 

ลบไฟล์ yarn.lock ในโปรเจ็คทิ้งไปก่อน ไม่งั้นมันจะ push ขึ้นไปไม่ได้ ติด error

จากนั้นก็รันคำสั่งตามนี้เลย

git add .
git commit -am "make it better"
git push heroku master

มันก็จะ push code ขึ้นไปแล้ว deploy ให้เราเสร็จสรรพ สะดวกจริงๆ

Leave a comment

Your email address will not be published. Required fields are marked *