crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 13:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Vendure provider readme

Browse Source
This commit is contained in:
Michael Bromley 2021-03-10 21:43:51 +01:00
parent 36303dddd5
commit cec55b792e
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
framework/vendure/README.md
View File

@ -4,14 +4,22 @@ UI hooks and data fetching methods built from the ground up for e-commerce appli
## Usage ## Usage
1. First you'll need a Vendure server. You can your own local server up-and-running with just a single command: ### 1. Choose a Vendure server
For the fastest start, you can point to the live Vendure demo server which runs at https://demo.vendure.io. This lets you work with the Vendure data hooks without needing to set up a local server.
If you want to have more control over the server, then getting up an running with a local server is only slightly more work:
#### 1a. Running a local Vendure server
1. Install Vendure locally with one command:
```shell ```shell
npx @vendure/create my-app npx @vendure/create my-app
``` ```
See the [Vendure getting started guide](https://www.vendure.io/docs/getting-started/) for more info. (See the [Vendure getting started guide](https://www.vendure.io/docs/getting-started/) 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: 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:
```TypeScript ```TypeScript
// vendure-config.ts // my-app/src/vendure-config.ts
export const config: VendureConfig = { export const config: VendureConfig = {
apiOptions: { apiOptions: {
port: 3001, // <----- here port: 3001, // <----- here
@ -20,28 +28,43 @@ UI hooks and data fetching methods built from the ground up for e-commerce appli
} }
}; };
``` ```
3. Clone this repo and install its dependencies with `yarn install` or `npm install` 3. Start your local Vendure server
4. Change the paths in [tsconfig.json](../../tsconfig.json) to point to the Vendure hooks: ```shell
yarn start
```
### 2. Set up the Commerce storefront
1. Clone this repo and install its dependencies with `yarn install` or `npm install`
2. Change the paths in [tsconfig.json](../../tsconfig.json) to point to the Vendure hooks:
```diff ```diff
- "@framework/*": ["framework/bigcommerce/*"], - "@framework/*": ["framework/bigcommerce/*"],
- "@framework": ["framework/bigcommerce"] - "@framework": ["framework/bigcommerce"]
+ "@framework/*": ["framework/vendure/*"], + "@framework/*": ["framework/vendure/*"],
+ "@framework": ["framework/vendure"] + "@framework": ["framework/vendure"]
``` ```
5. Set the Vendure Shop API URL in your `.env.local` file: 3. Set the Vendure Shop API URL in your `.env.local` file:
```sh ```sh
NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3001/shop-api NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3001/shop-api
``` ```
6. Add the `localhost` domain to the `images` property next.config.js file as per the [image optimization docs](https://nextjs.org/docs/basic-features/image-optimization#domains) or if using the live demo server:
```sh
NEXT_PUBLIC_VENDURE_SHOP_API_URL=https://demo.vendure.io/shop-api
```
4. Add the server domain to the `images` property next.config.js file as per the [image optimization docs](https://nextjs.org/docs/basic-features/image-optimization#domains)
```js ```js
module.exports = { module.exports = {
// ... // ...
images: { images: {
domains: ['example.com'], domains: [
'localhost',
// or
'demo.vendure.io',
],
}, },
} }
``` ```
7. With the Vendure server running, start this project using `yarn dev` or `npm run dev`. 5. With the Vendure server running, start this project using `yarn dev` or `npm run dev`.
## Known Limitations ## Known Limitations