# [Spree Commerce][1] Provider

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_ID` and `NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_ID` rely on IDs generated by Spree and need to be changed from the defaults. Go to the Spree admin panel and create Categories and Brands taxonomies if they don't exist and copy their IDs 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