mirror of
https://github.com/vercel/commerce.git
synced 2025-07-15 00:41:21 +00:00
41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
# [Spree Commerce][1] Provider
|
|
|
|
![Screenshots of Spree Commerce and NextJS Commerce][5]
|
|
|
|
A preview integration of Spree Commerce within NextJS Commerce. It supports browsing and searching Spree products and adding products to the cart as a guest user.
|
|
|
|
## Installation
|
|
|
|
Start by following the [instructions for setting up NextJS Commerce][2].
|
|
|
|
Afterwards, configure NextJS Commerce to use the Spree Provider. Create a `.env.local` file in the root of the project. Its contents must be based on `framework/spree/.env.template`.
|
|
|
|
`NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_PERMALINK` and `NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_PERMALINK` rely on taxonomies' permalinks in Spree. Go to the Spree admin panel and create Categories and Brands taxonomies if they don't exist and copy their permalinks into `.env.local` in NextJS Commerce. The values of the other environment variables can be copied from `framework/spree/.env.template` as is.
|
|
|
|
---
|
|
|
|
Setup Spree next. The easiest way to run Spree locally is to follow the installation tutorial available at [the Spree Starter GitHub repository][3].
|
|
|
|
You have to adjust Spree Starter to allow local [CORS][4] requests and have Spree run on port `4000` instead of the default port (NextJS Commerce and Spree both use port `3000` by default). To do this, add two environment variables inside `.env` in the Spree Starter project:
|
|
|
|
```shell
|
|
DOCKER_HOST_WEB_PORT=4000
|
|
ALLOWED_ORIGIN_HOSTS=*
|
|
```
|
|
|
|
Also, add the following line inside `config/environments/development.rb` to allow HTTP requests to Spree from NextJS:
|
|
|
|
```
|
|
config.hosts << 'localhost'
|
|
```
|
|
|
|
---
|
|
|
|
Finally, run `yarn dev` :tada:
|
|
|
|
[1]: https://spreecommerce.org/
|
|
[2]: https://github.com/vercel/commerce
|
|
[3]: https://github.com/spree/spree_starter
|
|
[4]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
|
[5]: ./README-assets/screenshots.png
|