[Java][React] ทำเว็บด้วย Spring Boot และ React

บทความนี้อยากจะนำเสนอมากเลยครับ เพราะผมเพิ่งจะ config ระบบสำเร็จตอนตี 2 กับความพยามเอา React ที่เขียนด้วย jax และ ES2015 (ES6) มาทำงานกับ Spring Boot (Java EE Framework) ด้วยการให้มันสามารถเรียกใช้ webpack, babel และ npm ได้จากการรัน Spring Boot ผมได้หาว่าวิธีการและค้นหาหลายๆ ลิ้งและคีย์เวริด์ในการสร้างโปรเจคระหว่าง React กับ Spring Boot แบบที่ว่านั่นทำไง ปรากฏว่าเจอบทความเดียวบนอินเทอร์เน็ต (อ่านได้ที่ link) น่าตกใจที่ไม่มีใครสอนการ config เลย ซึ่งในบทความที่ผมเจอไม่ได้สอน config ไว้ สอนเขียนแต่โค้ดและผมก็ไม่ได้สนใจเรื่องโค้ดเลยกดไป github โค้ดที่เขาแจกไว้เพื่อไปแกะ pom.xml ตัวจัดการ Dependency ของ Maven ก็พอคำตอบว่าต้องใช้ plugin ของ Frontend maven plugin ผมก็ไม่รอช้าลงมือ config จนสำเร็จ ดังนั่นบทความนี้จะมาสอนวิธีการทำกัน มาเริ่มกันเลย

สำหรับบทความนี้อาจจะทำให้คนเพิ่งหัดมึนได้ให้แนะนำว่าไปหัดเขียน React และเขียน Spring ให้เป็นก่อนครับ

สร้าง Spring Boot โปรเจค

Screenshot from 2016-05-19 12-18-50

ผมใช้ IntellJ ในการสร้างก็เข้าไป File > New > Project เลือก spring initializr

 

Screenshot from 2016-05-19 12-21-39

กด Next ไปเรื่อยๆ ตั่งชื่อตามต้องการ จนมาเจอหน้าจอเลือก Dependency ให้เลือก Thymeleaf ตัวทำ HTML Template ส่วน Database ผมเลือก MongoDB ส่วนคนอื่นชอบอันไหนก็เอาตามใจชอบครับ ใครจะใช้อะไรก็เลือกไป หรือไปเพิ่มเอาที่หลังก็ได้

 

Screenshot from 2016-05-19 12-25-43

หลังจากเสร็จแล้วเราก็จะได้โครงสร้างแบบนี้ครับ จะต้องมีโฟรเดอร์ resource ติดมาด้วยนะครับ เพราะจะเอา React มารันในนั่น อีกทางเลือกในการสร้างโปรเจค คือใช้ spring initializr สร้างแบบออนไลน์แล้วก็โหลดมาลงก็ได้

 

สร้าง Controller เพื่อ Route เส้นทางเมื่อเข้าหน้า Home Page

สร้างไฟล์ที่ main/java/[yourPackageName]

ประกาศ Class ให้เป็น Controller ด้วย @Controller และทำการ Map URL ด้วย @RequestMapping จากนั่นก็ return หน้าเว็บออกมาด้วยคำว่า index

หมายเหตุ: สิ่งที่ return ออกมาจะต้องเป็นชื่อไฟล์ html นะครับ ในตัวอย่างหน้าแรกของเว็บคือ index.html ดังนั่นจะต้อง return “index” ออกมาระบบจะทำการแมพเข้ากับไฟล์ html ให้ และไฟล์นั่นต้องมีอยู่จริงครับ

 

ตั่งค่า Maven plugin

ให้ใส่ส่วนนี้เพิ่มไปใน pom.xml ครับ ซึ่งเราจะใช้ plugin ที่ชื่อว่า frontend-maven-plugin  โดยสาระสำคัญของการตั่งค่าอยู่ที่

บรรทัดที่ 12-14 ให้ระบุโฟรเดอร์ที่ไว้ทำงานลงไปซึ่งผมใช้ static ที่ระบบสร้างมาให้ แต่ข้อควรจำในโฟรเดอร์ที่ระบุลงไปนั่นต้องมีไฟล์ package.js และ webpack.config.js อยู่ด้วยไม่งั่น React จะไม่ทำงาน

บรรทัดที่ 21-24 ให้ใส่ NodeJS กับ Npm เวอร์ชั่นลงไป ซึ่งผมตั่งให้เหมือนในเครื่องผม (เพิ่งอัพเดทตัวใหม่ เป็น v6)

ส่วนอื่นที่เหลือก็อบตามผมไปได้เลยทดสอบแล้วทำงานได้ หรือใครต้องการตั่งค่าเพิ่มให้เข้าไปดูที่ Github ของ plugin ได้เลย

 

สร้างไฟล์ index.html

ให้สร้างไฟล์ index.html ไว้ใน resources/templates

ปกติเราจะเขียนแท็กแบบ <meta> แบบนี้ได้แต่สำหรับ Thymeleaf ของ Spring ไม่อนุญาติให้ทำแบบนั่น ไม่งั่นจะรันไม่ได้ ถ้าอันไหนเป็นแท๊กเดียวให้ปิดแบบนี้ <meta /> รวมถึงแท๊กอื่นๆ ด้วยครับเดียวโปรเจคพังจะหาว่าผมสอนผิดนะ 555

 

ตั่งค่า webpack.config.js และ package.json

แบบที่บอกไปตอนตั่งค่า maven ให้เอาไฟล์สองอันนี้ไว้ในไดเรกทอรี่ที่เราใส่ไปใน pom.xml ให้ตรงกัน ดังนั่นให้สร้างไฟล์ webpack.config.js และ package.json ไว้ที่ /resources/static

ใน  package.json สาระสำคัญอยู่บรรทัดที่ 10 คือ “watch”: “webpack -p” หรือบางคนใช้  “watch”: “webpack –watch” เพราะเวลารันโปรเจค ตัวระบบจะมาอ่านคำสั่งบรรทัดนี้ สำหรับบรรทัดอื่นผมทำไว้ตอนที่ทำงานเฉยๆ ใครไม่ใช้ก็ลบออกหรือแก้ได้ตามใจชอบ  สำหรับสองไฟล์นี้ก็อบไปใช้ได้เลยและไปแก้ตามแต่ชอบ

 

สร้างไฟล์ index.js

สร้างไว้ใน /resources/static โดย path ต้องตรงกับ webpack.config.js ในส่วนของ entry

 

พร้อมแล้วรันโปรเจคกันเลย

เปิด terminal ขึ้นมาแล้วก็ cd เข้าไปในโปรเจคจากนั่นพิมพ์ ” ./mvnw spring-boot:run” ระบบจะทำการรันโปรแกรมให้เราพร้อมทั่งรัน webpack, npm install, nodeJS ให้พร้อม แต่ต้องรอสักพักให้มันโหลดไลบารี่จนเสร็จแล้วก็เข้าไปที่ http://localhost:8080 แต่ช้าก่อน ในโค้ดผมเขียนด้วย JavaScript ES6 และ jsx เดียวจะผิดจุดประสงค์ของบทความนี้เพราะเราจะช่วยให้คนที่เขียน ES6 และ jsx สามารถรันโปรแกรมได้ และให้ webpack, bable ทำงานพร้อมกับ Spring Boot ถ้าสั่งรันตอนนี้ระบบจะทำงานได้แต่หน้าเว็บจะไม่แสดงผล เพราะยังไม่ได้ตั่งค่า babel ให้ compile JavaScript เป็น syntax ปกติ ดั่งนั่นสร้างไฟล์ชื่อ .babelrc ไว้ที่ /resources/static เหมือนเดิมและเพิ่มโค้ดนี้ไป

เท่านี้ระบบก็จะ compile JavaScript ให้เราได้แล้วจากนั่นรันเลยยยยยย ./mvnw spring-boot:run 

Tadaaaaaaaaaaaaaaaaaaaaaaaaaaa!!

Screenshot from 2016-05-19 13-29-18

เป็นไงครับแค่นี้เราก็เอา webpack, nodejs, React มาทำงานคู่กับ Java ได้แล้ว และยังใช้ gulp, bower ได้อีกนะ ลองเข้าไปอ่านใน Github ของ plugin ที่ผมแปะไว้ดูได้ครับ สำหรับโค้ดของบทความนี้ผมอัพให้อยู่บน Github (link) แล้วครับ

สรุปสังเกตว่าผมจะเอาโฟรเดอร์และไฟล์ต่างๆ ไว้ใน static ซึ่งมันสะดวกดีครับ สำหรับคนอื่นชอบยังไงก็แก้ได้ครับตามใจชอบ ที่นี้เราก็ไปทำ @RestController ของ Spring Boot ได้เลยโดยให้ React เรียกผ่านในระบบได้ปกติ

แนะนำให้เขียนด้วย RestController นะครับ ไม่ใช้ Controller แบบที่ผมสอนไปในข้างบนเพราะ เราจะทำ Single Page Application ดั่งนั่น URL ทั่งหลายรวมถึงการโหลดไฟล์ต่างๆ ให้ React จัดการทำ Route (link) ให้แทนนะครับ เพราะเราจะมีแค่ไฟล์ index.html ตัวเดียวที่เหลือ React จะทำ Virtual DOM ให้ ลองไปอ่านแนวคิดของ React ได้ที่ผมเขียนไว้ link

Facebook Comments