1.7 KiB

Spree Commerce 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.

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.

You have to adjust Spree Starter to allow local CORS 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:

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 🎉