Simple application build in ReactJS and Next.js that connects to an OroCommerce backend. PoC created for the Oro Tech Talks #2
- Landing Page - Content Editors use external tool for synchronizing pages to ORO and data is available via LandingPage API for buyers.
- Barcode Scan - Grocery shops use barcode scanning app to scan products and automatically purchase them in recurring orders.
- Profile - Buyers are able to view and edit their profiles. We'll learn here how to use customer user context in API.
- PageModel API - Learn how to facilitate custom API models to build endpoints exposing all the needed information for a page.
In order to setup a connection between OroCommerce and this next.js application, we need to configure the instance first. Please follow the instructions below.
Clone the repository:
cd NEXTJS_DIR
git clone https://github.com/dnahrebecki/headless-oro
This section is about configuring your OroCommerce instance.
- Generate public & private keys: https://doc.oroinc.com/bundles/platform/OAuth2ServerBundle/#bundle-docs-platform-oauth2-server-bundle
cd OROCOMMERCE_INSTANCE_DIR/var
openssl genrsa -out oauth_private.key 2048
openssl rsa -in oauth_private.key -pubout -out oauth_public.key
chmod 644 oauth_private.key oauth_public.key
- Open OroCommerce, go to System -> Storefront oAuth2 Applications
- Create Storefront oAuth2 Application, Password Grant Type
- Copy client id & client secret
- Copy the whole content of
oro/
directory to thesrc/
directory of your OroCommerce project - Clear cache (
bin/console cache:clear --env=prod
)
cd NEXTJS_DIR
npm install
npm run dev
- Open
config/configuration.json
and provide your own config:- BASE_API_URL - url of your OroCommerce instance
- CLIENT_ID & CLIENT_SECRET - data from OroCommerce Storefront oAuth2 Application
If you have questions, contact me at: