[101] Part 2 Deploy React Component to Nexus

ต่อจาก Part ที่แล้ว [101]Setup Sonatype Nexus Repository สำหรับ Nodejs Module(Local registry) หลักจากที่ได้สร้าง nexus server

React Component

ทำไมถึงต้องสร้าง Component

• เพื่อให้สามารถ Re-used source code ได้อย่างมีประสิทธิภาพ ลด Duplicate Code ในหลายๆ Projects

1)เริ่มต้นสร้าง Component ในที่นี้ขอสร้างเป็น react library

npx create-react-library <component package>

ผลลัพท์หลังจากรัน

2)สร้างไฟล์ .npmrc

• registry ใช้สำหรับระบุ npm registry ในนี้ที่ระบุเป็น “http://127.0.0.1:8081/repository/npm-group”
• _auth เป็น bear token ที่ใช้ Authentication กับ nexus server วิธีการสร้าง ในนำ user:password ของ nexus ไป encrypt ด้วย base64

ตัวอย่างไฟล์ .npmrc

โครงสร้างของโฟลเดอร์ใน Project

3)เพิ่ม publishConfig ในไฟล์ package.json

“publishConfig”: {
     “registry”: “http://127.0.0.1:8081/repository/npm-private/"
}

4) เพิ่ม custom script ภายใต้ Tag script สำหรับใช้ publish package ไปยัง nexus

“publish-my-org”: “npm publish — registry http://127.0.0.1:8081/repository/npm-private/"

ตัวอย่างไฟล์ package.json

5) Deploy package ไปยัง nexus

npm run publish-my-org

Output หลังจากการรัน

ตัวอย่าง Projects https://github.com/ohmrefresh/demo-react-components/tree/master/components/demo-component

และแล้วในสุดเราก็ได้ Package ที่อยู่ใน Nexus Server Part ถัดไปจะมาต่อด้วยการนำ Component ไปใช้งานจริง

[101] Part 3 How to use React Component from nexus to our projects

[101] Part 4 Auto Document on React Component

[101] Part 5 Jenkins pipeline for deploy react component