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.

Next, setup Spree. 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 localhost and CORS requests. Run docker-compose run web bundle add rack-cors and:

# In config/application.rb add a configuration for CORS:

module SpreeStarter
  class Application < Rails::Application
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: :any
      end
    end
  end
end

# In config/environments/development.rb add 'localhost':

config.hosts << 'localhost'

By default, Spree Starter and NextJS Commerce both run on port 3000. Avoid collisions by running NextJS Commerce on port 4000:

// In package.json, modify two scripts:
{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev -p 4000",
    "start": "next start -p 4000",
    ...
  }
  ...
}

Third, supply NextJS Commerce with custom environment variables required by the Spree Framework. Create a .env.local file in the root of NJC with contents 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. Go to the Spree admin panel and create Categories and Brands taxonomies if they don't exist and copy their IDs into .env.local. The values of the other environment variables can be copied from framework/spree/.env.template as is.

Lastly, run yarn dev 🎉