2021-01-25 21:24:26 +01:00
..
2021-01-25 21:05:04 +01:00
2021-01-25 21:24:26 +01:00
2021-01-25 21:24:26 +01:00
2021-01-25 21:05:03 +01:00
2021-01-25 21:05:04 +01:00
2021-01-25 21:05:03 +01:00
2021-01-25 21:05:03 +01:00
2021-01-25 21:05:03 +01:00
2021-01-25 21:05:04 +01:00
2021-01-25 21:24:12 +01:00
2021-01-25 21:24:26 +01:00

Vendure Storefront Data Hooks

UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use Vendure as a headless e-commerce platform.

Usage

As this is still under development, no npm package is yet provided. Here's how you can try it out:

  1. First you'll need a Vendure server. You can your own local server up-and-running with just a single command:
    npx @vendure/create my-app
    
    See the Vendure getting started guide for more info.
  2. Once you have Vendure set up, change the default port to something other than 3000, to avoid conflict with your Next.js Commerce dev server:
    // vendure-config.ts
    export const config: VendureConfig = {
        apiOptions: {
            port: 3001,  // <----- here
            adminApiPath: 'admin-api',
            // ...
        }
    };
    
  3. Clone this repo and install its dependencies with yarn install or npm install
  4. Change the paths in tsconfig.json to point to the Vendure hooks:
    "paths": {
      "@lib/*": ["lib/*"],
      "@assets/*": ["assets/*"],
      "@config/*": ["config/*"],
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@commerce/*": ["framework/commerce/*"],
      "@commerce": ["framework/commerce"],
    -  "@framework/*": ["framework/bigcommerce/*"],
    -  "@framework": ["framework/bigcommerce"]
    +  "@framework/*": ["framework/vendure/*"],
    +  "@framework": ["framework/vendure"]
    }
    
  5. Set the Vendure Shop API URL in your .env.local file:
    NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3001/shop-api
    
  6. With the Vendure server running, start this project using yarn dev or npm run dev.

Known Limitations

  1. Vendure does not ship with built-in wishlist functionality.
  2. Nor does it come with any kind of blog/page-building feature. Both of these can be created as Vendure plugins, however.
  3. The entire Vendure customer flow is carried out via its GraphQL API. This means that there is no external, pre-existing checkout flow. The checkout flow must be created as part of the Next.js app.
  4. By default, the sign-up flow in Vendure uses email verification. This means that using the existing "sign up" flow from this project will not grant a new user the ability to authenticate, since the new account must first be verified. Again, the necessary parts to support this flow can be created as part of the Next.js app.
  5. The mapping of products & variants may not totally match up with what the storefront expects. As the storefront matures and improves this mapping can be refined.