| Home | Category | Product |
|---|---|---|
 |
 |
 |
| Home Page | Category Page | Product Page |
Note: Please bear in mind that this project is in an early development phase!
Url Storefront is a lean, configurable and extendable (Angular-based) JavaScript Headless E-Commerce Storefront application.
It is designed with extendability in mind. Therefor the support for a 3rd Party Data Providers (such as Spree, ...) is built in allowing pluggability to any Ecommerce platform (provided that its offering its Data through the Consumer based APIs).
url-storefront supports core storefront features such as:
- Home page
- Categories
- Product details
- Cart page
- Adding to cart
Search(to be implemented)Checkout(to be implemented)Order history(to be implemented)
In the near future, the support for more 3rd Party Adapters will be added into the project.
Currently url-storefront uses a built-in Spree Adapter library providing data from the 3rd Party Data Provider -> Spree Commerce using thier open-source REST APIs by wrapping their Spree Storefront JS/TS SDK internally.
More info could be found in Spree SDK library's Readme.
Prerequisite: Install application dependencies by running yarn (or npm install).
To run both Front-End and Back-End with one command you could execute:
npm run serve-url-storefront-allfor starting both the Back-End as well as Front-End app within one terminal.
Alternatively you could run the applications separately by executing the following commands:
npm run serve:url-storefront-apifor starting the Back-End appnpm run serve:url-storefrontfor starting the Front-End app
Running the applications with docker-compose is possible with:
npm run serve:docker-compose:devfor starting both the Back-End as well as Front-End app with development profile of docker-compose. After that open http://localhost:8001 for interacting with the Storefront.
This project is using Nx tools (find out more about using the tool within the project here).
The application represents a mono-repo consiting of 2 main applications:
- api - Back-End application (used for development purposes). Its main purpose is providing an Endpoint serving as a Proxy to an online Spree Demo Application (allowing usage of online demo application locally by bypassing the Cors issues).
- url-storefront - Front-End Angular Headless Storefront application.
And couple of (npm publishable) libraries:
- @url/pages/home -
Homelibrary encapsulating home features/components - @url/pages/category -
Categorylibrary encapsulating category features/components - @url/pages/product -
Productlibrary encapsulating product features/components - @url/pages/cart -
Cartlibrary encapsulating cart features/components - @url/sdk/spree - library warpper arround 3rd party Spree Commerce API. It encapsulates spree-storefront-api-v2-js-sdk making it conformable to
url-storefrontinternal pluggable specification (internal SDK Service api/interface). - @url/sdk/storefront - this is main application SDK library (ng modulel). It exposes the main SDK Service SdkService intended to be used within the application (this is a proxy service around StorefrontSdkService which is an actual internal url-storefront BackEnd service implementation, retrieving all the data from internal url-storefront BackEnd).
- You can provide your own 3rd party storefront service, like it is done in @url/sdk/spree library in SpreeStorefontSdkService. To do that all you need to do is expose new
3rdPartySdkServicewhcih conforms to internal SDK Service api/interface and then configure theurl-storefrontapplication easily to use that3rdPartySdkService(instead of default one) by overriding base SDK Servcie providerproviders: [{ provide: StorefrontSdkService, useClass: SpreeStorefrontSdkService }](check main app.module.ts for an example)
- You can provide your own 3rd party storefront service, like it is done in @url/sdk/spree library in SpreeStorefontSdkService. To do that all you need to do is expose new
- @url/shared/types - this is where all internal application types/model definitions are defined
- @url/shared/ui/cms
- @url/shared/ui/storefront
Following image shows the Application's dependency-graph:
For seeing the entire applications architecture and depnendecy graph run npm run dep-graph command and navigate to http://127.0.0.1:4211.
This project is in early development phase. Any feedback, ideas, requests and contributions are welcome.
If deciding to contribute, please read the Contribution's page to learn how to help others, report an issue or do the code contribution.
There is an extensive list of things to be done in the project, some of which are categorized and listed as a starting reference on Todo page.
url-storefront is provied as is with no official lines of support.
For any specific questions or help please reach out to creator.
- Design (html/css) based on katherinekato's Product CodePen solution.
Copyright (c) 2021 Uros Lates. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file.