หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Frontend.Ro Codebase และหลักสูตร Open-Source

Frontend.RO เป็นโครงการ เปิดใช้งานโอเพนซอร์ซ และ ชุมชน เพื่อสอนการพัฒนาส่วนหน้า อ่านเพิ่มเติมเกี่ยวกับเว็บไซต์และโปรดแบ่งปันข่าว ^^^


ติดตั้งและเรียกใช้

  1. ติดตั้งการพึ่งพาทั้งหมดโดยใช้ yarn ในโฟลเดอร์รูท
  2. สร้างไฟล์ .env ในรูทและกรอกเนื้อหาต่อไปนี้ 
 ; Environment based config
NODE_CONFIG_ENV =local-client

; Custom config dirs
NODE_CONFIG_DIR =server/config

; Used only when developing locally
NODE_ENV =development
  1. เรียกใช้ yarn dev:client สิ่งนี้จะทำงานเฉพาะส่วนหน้าในเครื่องและเชื่อมต่อคุณกับเซิร์ฟเวอร์การพัฒนา
  2. หากคุณต้องการทำงานฝั่งเซิร์ฟเวอร์คุณจะต้องเรียกใช้เซิร์ฟเวอร์และ MongoDB บนเครื่องในเครื่องของคุณเช่นกัน เพื่อให้สิ่งนี้เกิดขึ้นคุณจะต้องเพิ่มตัวแปรต่อไปนี้ภายใน .env : 
 ; Environment based config
NODE_CONFIG_ENV =local-both

; Custom config dirs
NODE_CONFIG_DIR =server/config

; AUTH
TOKEN_SECRET =

; DB
DB_CONNECT =

; AWS
AWS_BUCKET =

; EMAIL
EMAIL_TOKEN =

; GITHUB
GITHUB_CLIENT_ID =
GITHUB_CLIENT_SECRET =

; Used only when developing locally
NODE_ENV =development

จากนั้นจัดเตรียมฐานข้อมูล (ดูขั้นตอนต่อไป) และเรียกใช้เซิร์ฟเวอร์ท้องถิ่นโดยใช้ yarn dev ติดต่อกับเราสำหรับรายละเอียดเพิ่มเติมที่ [email protected]

การจัดเตรียม (WIP)

หากคุณต้องการเรียกใช้แอพอย่างเต็มที่บนเครื่องในพื้นที่ของคุณคุณจะต้องจัดทำฐานข้อมูล MongoDB ด้วยตัวคุณเอง

ดูโฟลเดอร์ server/_provisioning มันยังคงทำงานอยู่ แต่คุณจะพบสคริปต์บางส่วนซึ่งจะทำให้ง่ายต่อการแทรกข้อมูลเป็นกลุ่มสำหรับสภาพแวดล้อมในท้องถิ่นของคุณ

การถ่ายโอนข้อมูลฐานข้อมูลการกู้คืนและการสำรองข้อมูล

เพื่อลดค่าใช้จ่ายที่เรากำลังทำการถ่ายโอนข้อมูลด้วยตนเองและการสำรองข้อมูลฐานข้อมูล MongoDB ของเรา

Dump & Restore

เราใช้เครื่องมือฐานข้อมูล MongoDB โดยเฉพาะ Mongodump และ Mongorestore

เรามีสคริปต์ 2 npm 

 yarn mongodump
yarn mongorestore

ที่เราใช้สำหรับการถ่ายโอนข้อมูล/กู้คืน เรา "ขอ" ลงในไฟล์ .env เดียวกันเพื่อรับสตริง DB_CONNECT และ MONGODB_DUMP_DIR

ทั้งคู่คิดว่าเครื่องมือ MongoDB ได้รับการติดตั้งแล้ว ดูคำแนะนำที่นี่ขึ้นอยู่กับระบบปฏิบัติการของคุณ

การสำรอง

สำหรับการสำรองข้อมูลเราจัดเก็บการทิ้งใน AWS S3 โดยใช้ AWS CLI V2

เรามีสคริปต์ NPM ที่อ่านจาก .env และเรียก คำสั่ง CLI เฉพาะ 

 yarn upload-mongodump-s3

สิ่งนี้ไม่ทำงานเว้นแต่คุณจะได้รับการรับรองความถูกต้องใน AWS CLI ด้วยรหัสการเข้าถึงคู่ / คีย์การเข้าถึงความลับที่ได้รับอนุญาตเขียนไปยังถัง S3 ของเรา

บรรณาธิการโมนาโก

NextJS ไม่เข้ากันกับวิธีเริ่มต้นของการโหลด Monaco-editor (ผ่าน WebPack และ monaco-editor-webpack-plugin ) มันล้มเหลวเมื่อโมนาโกพยายามโหลด CSS จาก node_modules: https://nextjs.org/docs/messages/css-npm

โซลูชันทั้งหมดนี้หมายถึงการเพิ่มรหัสที่กำหนดเองมากในการกำหนดค่า WebPack ของเราซึ่งเรากังวลว่ามันอาจจะหยุดในอนาคตหรือโต้ตอบกับแพ็คเกจอื่น ๆ

ดังนั้นวิธีการแก้ปัญหาที่เราไปคือโหลด monaco-editor จาก CDN (CloudFront) ด้วยแท็ก <script> เรารู้สึกว่าวิธีการ "โรงเรียนเก่า" นี้มีแนวโน้มที่จะเกิดข้อผิดพลาดน้อยกว่าการปรับเปลี่ยนที่กำหนดเองไปยัง WebPack Config และเพื่อลดการทำงานด้วยตนเองให้น้อยที่สุดเราได้สร้างการกระทำของ monacoEditorCDN.yml GitHub ซึ่งจะอัปโหลดไฟล์ในทุกการกด (หากไม่ได้อยู่ที่นั่น)

ใบอนุญาต

โครงการนี้มีการแบ่งสองประการระหว่างซอร์สโค้ดของส่วนประกอบ UI ที่ใช้และเนื้อหาหลักสูตร

ซอร์สโค้ดของส่วนประกอบ UI ได้รับอนุญาตภายใต้ MIT

หลักสูตรเป็นของผู้มีส่วนร่วมของเราและได้รับใบอนุญาตภายใต้การระบุแหล่งที่มา-Sharearke 4.0 International คุณมีอิสระที่จะใช้มันหากคุณกำลังสอนหัวข้อเหล่านี้ตราบใดที่คุณให้การระบุแหล่งที่มาให้กับนักเขียน/เจ้าของ

ผู้มีส่วนร่วม

โครงการนี้จะเป็นไปไม่ได้หากไม่มีผู้สนับสนุนที่ยอดเยี่ยมของเรา ขอบคุณ>: D <


Alexandru Păvăloi
ไดอาน่าโทมา
Cătălin Popușoi
Marian Morosac

Cristian Gațu
เซบาสเตียน Latkolic
Nicolae Matieș
Daniel Huțanu

Swarup Kumar Das
Ira Melnic
Narcis Lazar
Sergiu Szatmari

หากคุณต้องการ ให้ความช่วยเหลือ ช่วยติดต่อเราและสร้างสิ่งนี้ด้วยกัน!

Twitter | Facebook

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด