example storefront
v5.2.1
MailChimp Open Commerce adalah platform perdagangan API-first, headless yang dibangun menggunakan Node.js, React, dan GraphQL. Ini bermain baik dengan NPM, Docker dan Kubernetes.
Contoh toko ini adalah untuk berfungsi sebagai referensi tentang cara menerapkan etalase berbasis web menggunakan API GraphQL Commerce Reaksi. Anda dapat membayar proyek ini sebagai titik lompat atau membuat pengalaman khusus Anda sendiri menggunakan teknologi sisi klien pilihan Anda. Meskipun kami yakin toko toko kami cukup berfitur lengkap untuk digunakan dalam produksi, mungkin tidak ada fitur yang dibutuhkan toko Anda saat ini.
MailChimp Open Commerce hadir dengan serangkaian kemampuan perdagangan inti yang kuat di luar kotak. Dan karena apa pun di basis kode kami dapat diperpanjang, ditimpa, atau diinstal sebagai paket, Anda juga dapat menyesuaikan apa pun di platform kami.
Contoh toko ini dibangun dengan klien Next.js, React, GraphQL, dan Apollo
Ikuti Panduan Mulai Cepat untuk menginstal dan menjalankan semua layanan yang diperlukan untuk menjalankan etalase:
| Direktori: Layanan | Url |
|---|---|
reaction : GraphQL API | LocalHost: 3000/GraphQL |
reaction-admin : Admin Reaksi | Localhost: 4080 |
reaction : MongoDB | Localhost: 27017 |
example-storefront : etalase | Localhost: 4000 |
Catatan : Storefront memiliki pengalihan sehingga jika Anda membuka http: // localhost: 4000/graphql, Anda akan diarahkan ke taman bermain graphql.
Saat menjalankan etalase dan reaksi untuk pertama kalinya, Anda perlu mengonfigurasi pemrosesan pembayaran strip dan opsi pengiriman untuk menguji aliran checkout pesanan lengkap. Setelah mendaftar untuk kunci API Stripe, ikuti langkah -langkah ini:
STRIPE_PUBLIC_API_KEY ) ke .env .http://localhost:4080 . Masuk sebagai pengguna admin.Baca dokumen untuk menyiapkan segmen atau pelacak analitik khusus
Platform reaksi menjalankan etalase dengan Docker, jadi Anda harus menggunakan perintah Docker untuk melihat log, menjalankan perintah di dalam wadah dan banyak lagi. Untuk menjalankan perintah khusus untuk etalase, pastikan untuk mengubah direktori menjadi direktori example-storefront dalam repositori reaction-platform :
cd example-storefrontBuat tautan simbolik untuk menggunakan gambar Deverer Development:
ln -s docker-compose.dev.yml docker-compose.override.yml
Jika berjalan untuk variabel pertama atau lingkungan di .env.example telah mengubah menjalankan perintah di bawah ini untuk memperbarui variabel lingkungan.
./bin/setup
Mulai etalase dengan mengeksekusi:
docker-compose up -d && docker-compose logs -f Ubah INTERNAL_GRAPHQL_URL di .env ke URL API produksi. URL harus berakhir di /graphql , seperti: https://my-website.com/graphql . Simpan file .env dan restart aplikasi dengan:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Jalankan perintah apa pun di dalam wadah Docker dan kemudian lepaskan wadah. Gunakan ini untuk menjalankan operasi perkakas apa pun. Ingat direktori proyek Anda akan dipasang dan hal -hal biasanya hanya akan berhasil. Lihat bagian Benang di bawah ini untuk contoh lebih lanjut.
Jalankan tes secara lokal
docker-compose run --rm web yarn testJalankan tes secara lokal tanpa cache (ini bisa membantu jika perubahan tidak muncul)
docker-compose run --rm web yarn test --no-cacheUntuk menjalankan tes keamanan Snyk (ini akan menjalankan tes dengan cara yang sama seperti CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Untuk menjalankan eslint
docker-compose run --rm web eslint srcAnda dapat menggunakan Google Chrome DevTools untuk men -debug kode yang berjalan di server aplikasi Node.js saat berjalan di dalam 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 . Temukan proses di bawah target jarak jauh dan klik Periksa .Benang & NPM harus berjalan di dalam wadah Docker. Kami telah mengambil langkah -langkah untuk memastikan bahwa node_modules ditempatkan ke lokasi yang dapat di -cache. Jika Anda menjalankan benang secara lokal, node_modules ditulis langsung ke direktori proyek dan diutamakan dari yang dari Docker Build. Tambah benang
docker-compose run --rm web yarn add --dev [package]
Instalasi benang
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Terkadang kita perlu menguji contoh komponen komponen komponen etalase dalam konteks etalase. Sayangnya, tidak ada wasy yang mudah untuk melakukan ini di dalam wadah Docker kami, jadi kami perlu menjalankan storefront di luar Docker.
cd ke repo reaction-component-library lokal Anda.cd ke folder package repo ini, dan jalankan yarn install diikuti oleh yarn buildcd ke folder dist baru yang baru saja dibangun dan jalankan yarn link untuk memungkinkan perpustakaan diinstal ke etalase. Ini akan menautkan @reactioncommerce/componentsexample-storefront , ganti untuk sementara file .yarnrc Anda menjadi hal lain (yaitu .yarnrc-temp )yarn install dan kemudian perintah yarn link "@reactioncommerce/components" untuk mengatur versi lokal sebagai override dari versi NPM yang diterbitkan.env Anda, ubah INTERNAL_GRAPHQL_URL menjadi sama dengan http://localhost:3000/graphql , sama seperti EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add masing -masing paket dalam package/dist komponen. (Folder ini tetap gitgnored.)CTRL+Cyarn unlink "@reactioncommerce/components" di folder repo etalasecd ke folder package/dist dari repo reaction-component-library . Jalankan perintah yarn unlink untuk membuka tautan versi lokal dari pustaka komponen.yarnrc Anda.env Anda Berhenti, dan pertahankan wadah:
docker-compose stopBerhenti, dan lepaskan wadah:
docker-compose downBerhenti, dan lepaskan wadah, volume dan gambar yang dibangun:
docker-compose down -v --rmi local Terkadang sangat membantu selama pengembangan untuk membuat produksi pembuatan aplikasi dan menjalankannya secara lokal.
Jalankan perintah ini untuk membangun gambar Docker dengan build produksi aplikasi di dalamnya:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Di mana xxx menunjukkan versi tag yang ingin Anda gunakan, yaitu 3.1.0
Kemudian, untuk memulai aplikasi di mesin Anda, pastikan wadah API reaksi sudah berjalan dan masuk:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X Catatan: Anda dapat mengganti nomor sebelum usus besar dalam 4000:4000 dengan port localhost yang berbeda yang ingin Anda jalankan.
Catatan: Ini bukan cara untuk menjalankan aplikasi dalam penyebaran produksi aktual. Ini hanya untuk menjalankan pembangunan produksi secara lokal untuk tujuan pengembangan, demo atau percobaan.
Untuk menghentikan wadah Docker setelah memulainya dengan perintah di atas, gunakan:
docker stop reaction-storefrontTemukan bug, kesalahan ketik, atau sesuatu yang tidak didokumentasikan dengan baik? Kami ingin Anda membuka masalah yang memberi tahu kami apa yang dapat kami tingkatkan! Proyek ini menggunakan rilis semantik, silakan gunakan format pesan komit mereka ..
Ingin meminta fitur? Gunakan Repositori Permintaan Fitur Reaksi kami untuk mengajukan permintaan.
Kami menyukai permintaan tarikan Anda! Periksa Good First Issue dan Help Wanted untuk ditangani.
Permintaan tarik harus lulus semua tes otomatis, gaya, dan pemeriksaan keamanan.
Kode Anda harus lulus semua tes penerimaan dan tes unit. Berlari
docker-compose run --rm web yarn test untuk menjalankan suite tes secara lokal. Jika Anda menambahkan fungsionalitas ke reaksi, Anda harus menambahkan tes untuk fungsionalitas yang ditambahkan. Anda dapat menjalankan tes secara lokal tanpa cache jika perlu dengan melewati bendera --no-cache . Ini bisa membantu jika perubahan tidak muncul.
docker-compose run --rm web yarn test --no-cacheUntuk memperbarui snapshot yang gagal (jika Anda telah membuat perubahan pada komponen)
docker-compose run --rm web yarn test -uKami mensyaratkan bahwa semua kode berkontribusi terhadap reaksi mengikuti aturan ESLINT reaksi. Anda bisa berlari
docker-compose run --rm web eslint src
Untuk menjalankan Eslint terhadap kode Anda secara lokal.
Kami menggunakan pengembang Certificate of Origin (DCO) sebagai pengganti perjanjian lisensi kontributor untuk semua kontribusi untuk proyek sumber terbuka perdagangan reaksi. Kami meminta agar kontributor menyetujui ketentuan DCO dan menunjukkan bahwa perjanjian dengan menandatangani semua komit yang dibuat untuk proyek perdagangan reaksi dengan menambahkan baris dengan nama dan alamat email Anda ke setiap pesan komitmen git berkontribusi:
Signed-off-by: Jane Doe <[email protected]>
Anda dapat menandatangani komitmen Anda secara otomatis dengan git dengan menggunakan git commit -s jika Anda memiliki user.name Anda. Nama dan user.email Ditetapkan sebagai bagian dari konfigurasi git Anda.
Kami meminta Anda menggunakan nama asli Anda (tolong tidak ada kontribusi atau nama samaran anonim). Dengan menandatangani komit Anda, Anda menyatakan bahwa Anda berhak memiliki hak untuk mengirimkannya di bawah lisensi open source yang digunakan oleh proyek perdagangan reaksi tertentu. Anda harus menggunakan nama asli Anda (tidak ada nama samaran atau kontribusi anonim diizinkan.)
Kami menggunakan aplikasi Probot DCO Github untuk memeriksa tanda tangan DCO dari setiap komit.
Jika Anda lupa menandatangani komitmen Anda, bot DCO akan mengingatkan Anda dan memberi Anda instruksi terperinci untuk bagaimana mengubah komitmen Anda untuk menambahkan tanda tangan.
Perdagangan Reaksi Hak Cipta 2019
Berlisensi di bawah lisensi Apache, versi 2.0 ("lisensi"); Anda tidak boleh menggunakan file ini kecuali sesuai dengan lisensi. Anda dapat memperoleh salinan lisensi di
http://www.apache.org/licenses/LICENSE-2.0
Kecuali diharuskan oleh hukum yang berlaku atau disepakati secara tertulis, perangkat lunak yang didistribusikan di bawah lisensi didistribusikan berdasarkan "sebagaimana adanya", tanpa jaminan atau ketentuan dalam bentuk apa pun, baik tersurat maupun tersirat. Lihat lisensi untuk bahasa spesifik yang mengatur izin dan batasan di bawah lisensi.
