example storefront
v5.2.1
MailChimp Open Commerce เป็นแพลตฟอร์มการค้าที่ไม่มีส่วนร่วมครั้งแรกที่สร้างขึ้นโดยใช้ Node.js, React และ GraphQL มันเล่นได้ดีกับ NPM, Docker และ Kubernetes
ตัวอย่างหน้าร้านนี้จะทำหน้าที่เป็นข้อมูลอ้างอิงเกี่ยวกับวิธีการใช้งานหน้าร้านบนเว็บโดยใช้ปฏิกิริยาการค้า GraphQL API คุณสามารถแยกโครงการนี้เป็นจุดกระโดดหรือสร้างประสบการณ์ที่กำหนดเองของคุณเองโดยใช้เทคโนโลยีฝั่งไคลเอ็นต์ที่คุณต้องการ ในขณะที่เราเชื่อว่าหน้าร้านตัวอย่างของเรามีคุณสมบัติครบถ้วนเพียงพอที่จะใช้ในการผลิต แต่มันอาจขาดคุณสมบัติที่ร้านของคุณต้องการในเวลานี้
MailChimp Open Commerce มาพร้อมกับชุดความสามารถในการค้าหลักที่แข็งแกร่งออกมาจากกล่อง และเนื่องจากสิ่งใดใน Codebase ของเราสามารถขยายได้เขียนทับหรือติดตั้งเป็นแพ็คเกจคุณอาจปรับแต่งอะไรก็ได้บนแพลตฟอร์มของเรา
ตัวอย่างหน้าร้านนี้สร้างขึ้นด้วย next.js, React, GraphQl และ Apollo Client
ทำตามคู่มือเริ่มต้นอย่างรวดเร็วเพื่อติดตั้งและเรียกใช้บริการทั้งหมดที่จำเป็นในการเรียกใช้หน้าร้าน:
| ไดเรกทอรี: บริการ | url |
|---|---|
reaction : graphql api | localhost: 3000/graphql |
reaction-admin : ผู้ดูแลปฏิกิริยา | Localhost: 4080 |
reaction : MongoDB | Localhost: 27017 |
example-storefront : หน้าร้าน | Localhost: 4000 |
หมายเหตุ : หน้าร้านมีการเปลี่ยนเส้นทางเพื่อที่ว่าหากคุณเปิด http: // localhost: 4000/graphql คุณจะถูกเปลี่ยนเส้นทางไปยังสนามเด็กเล่น GraphQL
เมื่อเรียกใช้หน้าร้านและปฏิกิริยาเป็นครั้งแรกคุณจะต้องกำหนดค่าการประมวลผลการชำระเงินของแถบและตัวเลือกการจัดส่งเพื่อทดสอบโฟลว์เช็คเอาต์คำสั่งซื้อที่สมบูรณ์ หลังจากลงทะเบียนสำหรับคีย์ Stripe API ให้ทำตามขั้นตอนเหล่านี้:
STRIPE_PUBLIC_API_KEY ) ไปที่ .envhttp://localhost:4080 เข้าสู่ระบบในฐานะผู้ดูแลระบบอ่านเอกสารสำหรับการตั้งค่าเซ็กเมนต์หรือตัวติดตามการวิเคราะห์ที่กำหนดเอง
แพลตฟอร์มปฏิกิริยาเรียกใช้หน้าร้านด้วย Docker ดังนั้นคุณจะต้องใช้คำสั่ง Docker เพื่อดูบันทึกการเรียกใช้คำสั่งภายในคอนเทนเนอร์และอื่น ๆ ในการเรียกใช้คำสั่งโดยเฉพาะสำหรับหน้าร้านตรวจสอบให้แน่ใจว่าได้เปลี่ยนไดเรกทอรีเป็นไดเรกทอรี example-storefront ภายในที่เก็บแพลตฟอร์ม reaction-platform :
cd example-storefrontสร้างลิงค์สัญลักษณ์เพื่อใช้ภาพการพัฒนา Docker:
ln -s docker-compose.dev.yml docker-compose.override.yml
หากรันเป็นครั้งแรกหรือตัวแปรสภาพแวดล้อมใน .env.example มีการเปลี่ยนแปลงเรียกใช้คำสั่งด้านล่างเพื่ออัปเดตตัวแปรสภาพแวดล้อม
./bin/setup
เริ่มต้นหน้าร้านโดยดำเนินการ:
docker-compose up -d && docker-compose logs -f เปลี่ยน INTERNAL_GRAPHQL_URL ใน .env เป็น URL การผลิต API URL ควรสิ้นสุดใน /graphql เช่น: https://my-website.com/graphql บันทึกไฟล์ .env และรีสตาร์ทแอปพลิเคชันด้วย:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]เรียกใช้คำสั่งใด ๆ ภายในคอนเทนเนอร์ Docker จากนั้นลบคอนเทนเนอร์ ใช้สิ่งนี้เพื่อเรียกใช้การดำเนินการเครื่องมือใด ๆ จำไว้ว่าไดเรกทอรีโครงการของคุณจะติดตั้งและสิ่งต่าง ๆ มักจะใช้งานได้ ดูส่วนเส้นด้ายด้านล่างสำหรับตัวอย่างเพิ่มเติม
เรียกใช้การทดสอบในพื้นที่
docker-compose run --rm web yarn testเรียกใช้การทดสอบในเครื่องโดยไม่มีแคช (จะมีประโยชน์หากการเปลี่ยนแปลงไม่ปรากฏขึ้น)
docker-compose run --rm web yarn test --no-cacheในการเรียกใช้การทดสอบความปลอดภัยของ Snyk (จะเรียกใช้การทดสอบในลักษณะเดียวกับ CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "เพื่อเรียกใช้ ESLINT
docker-compose run --rm web eslint srcคุณสามารถใช้ Google Chrome Devtools เพื่อแก้ไขข้อบกพร่องของรหัสที่ทำงานในแอปพลิเคชัน Node.js ในขณะที่กำลังทำงานอยู่ใน Docker
docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.jschrome://inspect ค้นหากระบวนการภายใต้ เป้าหมายระยะไกล และคลิก ตรวจสอบเส้นด้าย & NPM ควรทำงานภายในคอนเทนเนอร์ Docker เราได้ดำเนินการตามขั้นตอนเพื่อให้แน่ใจว่า node_modules ถูกวางไว้ในตำแหน่งที่แคชได้ หากคุณเรียกใช้เส้นด้ายในพื้นที่ Node_Modules จะถูกเขียนโดยตรงไปยังไดเรกทอรีโครงการและมีความสำคัญกว่านั้นจากการสร้างท่าเทียบเรือ เพิ่มเส้นด้าย
docker-compose run --rm web yarn add --dev [package]
การติดตั้งเส้นด้าย
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
บางครั้งเราจำเป็นต้องทดสอบส่วนประกอบส่วนประกอบส่วนประกอบส่วนประกอบหน้าร้านในบริบทของหน้าร้าน น่าเสียดายที่ไม่มีอะไรง่ายที่จะทำสิ่งนี้ภายในคอนเทนเนอร์ Docker ของเราดังนั้นเราจึงต้องเรียกใช้ storefront ด้านนอกของ Docker
cd ไปยัง reaction-component-library repo ของคุณcd ลงในโฟลเดอร์ package ของ repo นี้และเรียกใช้ yarn install คำสั่งตามด้วย yarn buildcd เข้าสู่โฟลเดอร์ dist ใหม่มันเพิ่งสร้างและเรียกใช้ yarn link เพื่อให้ห้องสมุดติดตั้งเข้าสู่หน้าร้าน สิ่งนี้จะเชื่อมโยง @reactioncommerce/componentsexample-storefront เปลี่ยนชื่อไฟล์ .yarnrc ของคุณเป็นการชั่วคราว (เช่น .yarnrc-temp )yarn install จากนั้น yarn link "@reactioncommerce/components" เพื่อตั้งค่าเวอร์ชันท้องถิ่นเป็นการแทนที่ของเวอร์ชัน NPM ที่เผยแพร่.env ของคุณเปลี่ยน INTERNAL_GRAPHQL_URL เป็น http://localhost:3000/graphql เช่นเดียวกับ EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add ชั่วคราวแต่ละแพ็คเกจเหล่านั้นใน package/dist (โฟลเดอร์นี้มี gitignored อยู่แล้ว)CTRL+Cyarn unlink "@reactioncommerce/components" ในโฟลเดอร์ repo repo repocd ไปยังโฟลเดอร์ package/dist ของ reaction-component-library repo เรียกใช้คำสั่ง yarn unlink เพื่อยกเลิกการเชื่อมโยงเวอร์ชันท้องถิ่นของไลบรารีส่วนประกอบ.yarnrc ของคุณ.env ของคุณ หยุดและเก็บรักษาคอนเทนเนอร์:
docker-compose stopหยุดและลบคอนเทนเนอร์:
docker-compose downหยุดและลบคอนเทนเนอร์ปริมาณและภาพที่สร้างขึ้น:
docker-compose down -v --rmi local บางครั้งมันก็มีประโยชน์ในระหว่างการพัฒนาเพื่อสร้างการผลิตแอพและดำเนินการในพื้นที่
เรียกใช้คำสั่งนี้เพื่อสร้างอิมเมจนักเทียบท่าด้วยการสร้างการผลิตของแอพในนั้น:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . โดยที่ XXX ระบุเวอร์ชันแท็กที่คุณต้องการใช้เช่น 3.1.0
จากนั้นในการเริ่มต้นแอพในเครื่องของคุณตรวจสอบให้แน่ใจว่าคอนเทนเนอร์ API ของปฏิกิริยากำลังทำงานอยู่แล้วและป้อน:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X หมายเหตุ: คุณสามารถแทนที่หมายเลขก่อนที่ลำไส้ใหญ่ใน 4000:4000 ด้วยพอร์ต localhost อื่นที่คุณต้องการให้แอปพลิเคชันทำงานที่
หมายเหตุ: นี่ไม่ใช่วิธีเรียกใช้แอพในการปรับใช้การผลิตจริง นี่เป็นเพียงการดำเนินการสร้างการผลิตในพื้นที่เพื่อการพัฒนาการสาธิตหรือการทดลองใช้
หากต้องการหยุดคอนเทนเนอร์ Docker หลังจากเริ่มต้นด้วยคำสั่งด้านบนให้ใช้:
docker stop reaction-storefrontค้นหาข้อผิดพลาดการพิมพ์ผิดหรือสิ่งที่ไม่ได้บันทึกไว้อย่างดี? เราอยากให้คุณเปิดปัญหาบอกเราว่าเราสามารถปรับปรุงอะไรได้บ้าง! โครงการนี้ใช้การเปิดตัวแบบความหมายโปรดใช้รูปแบบข้อความการกระทำของพวกเขา ..
ต้องการขอคุณสมบัติหรือไม่? ใช้การร้องขอคุณสมบัติปฏิกิริยาของเราที่เก็บข้อมูลเพื่อยื่นคำขอ
เรารักคำขอดึงของคุณ! ตรวจสอบ Good First Issue ของเราและ Help Wanted แท็กสำหรับปัญหาที่ดีในการแก้ไขปัญหา
คำขอดึงควรผ่านการทดสอบสไตล์และการตรวจสอบความปลอดภัยอัตโนมัติทั้งหมด
รหัสของคุณควรผ่านการทดสอบการยอมรับและการทดสอบหน่วยทั้งหมด วิ่ง
docker-compose run --rm web yarn test เพื่อเรียกใช้ชุดทดสอบในพื้นที่ หากคุณกำลังเพิ่มฟังก์ชั่นลงในปฏิกิริยาคุณควรเพิ่มการทดสอบสำหรับฟังก์ชั่นที่เพิ่มขึ้น คุณสามารถเรียกใช้การทดสอบในเครื่องโดยไม่ต้องแคชหากจำเป็นโดยผ่าน --no-cache Flag สิ่งนี้จะมีประโยชน์หากการเปลี่ยนแปลงไม่ปรากฏขึ้น
docker-compose run --rm web yarn test --no-cacheหากต้องการอัปเดตภาพรวมที่ล้มเหลว (หากคุณทำการเปลี่ยนแปลงส่วนประกอบ)
docker-compose run --rm web yarn test -uเราต้องการให้รหัสทั้งหมดมีส่วนร่วมในการตอบสนองตามกฎ ESLINT ของ Reaction คุณสามารถเรียกใช้
docker-compose run --rm web eslint src
เพื่อเรียกใช้ ESLINT กับรหัสของคุณในพื้นที่
เราใช้ใบรับรองผู้พัฒนาแหล่งกำเนิด (DCO) แทนข้อตกลงใบอนุญาตผู้มีส่วนร่วมสำหรับการมีส่วนร่วมทั้งหมดในโครงการโอเพนซอร์สปฏิกิริยาการค้า เราขอให้ผู้มีส่วนร่วมยอมรับข้อกำหนดของ DCO และระบุข้อตกลงนั้นโดยการลงนามในการกระทำทั้งหมดที่ทำกับโครงการการค้าปฏิกิริยาโดยการเพิ่มบรรทัดที่มีชื่อและที่อยู่อีเมลของคุณไปยังข้อความ GIT ทุกรายการที่มีส่วนร่วม:
Signed-off-by: Jane Doe <[email protected]>
คุณสามารถลงนามในการกระทำของคุณโดยอัตโนมัติด้วย GIT โดยใช้ git commit -s หากคุณมี user.name และ user.email ตั้งค่าเป็นส่วนหนึ่งของการกำหนดค่า GIT ของคุณ
เราขอให้คุณใช้ชื่อจริงของคุณ (โปรดไม่มีการมีส่วนร่วมที่ไม่ระบุชื่อหรือนามแฝง) โดยการลงนามในการกระทำของคุณคุณกำลังรับรองว่าคุณมีสิทธิ์มีสิทธิ์ที่จะส่งภายใต้ใบอนุญาตโอเพ่นซอร์สที่ใช้โดยโครงการการค้าปฏิกิริยาโดยเฉพาะ คุณต้องใช้ชื่อจริงของคุณ (ไม่อนุญาตให้มีการมีส่วนร่วมหรือไม่ระบุชื่อ))
เราใช้แอพ Probot DCO GitHub เพื่อตรวจสอบการลงนาม DCO ของการกระทำทุกครั้ง
หากคุณลืมเซ็นสัญญา DCO Bot จะเตือนคุณและให้คำแนะนำโดยละเอียดเกี่ยวกับวิธีการแก้ไขการกระทำเพื่อเพิ่มลายเซ็น
ลิขสิทธิ์ 2019 ปฏิกิริยาการค้า
ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 ("ใบอนุญาต"); คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตที่
http://www.apache.org/licenses/LICENSE-2.0
เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต
