Change the default Spree port to 4000 and update README in sync with Spree Starter changes

This commit is contained in:
tniezg 2021-08-24 15:29:44 +02:00
parent 57c176d9d7
commit c3bd932d69
2 changed files with 17 additions and 37 deletions

View File

@ -3,12 +3,12 @@
COMMERCE_PROVIDER=spree COMMERCE_PROVIDER=spree
{# - public (available in the web browser) #} {# - public (available in the web browser) #}
NEXT_PUBLIC_SPREE_API_HOST=http://localhost:3000 NEXT_PUBLIC_SPREE_API_HOST=http://localhost:4000
NEXT_PUBLIC_SPREE_DEFAULT_LOCALE=en-us NEXT_PUBLIC_SPREE_DEFAULT_LOCALE=en-us
NEXT_PUBLIC_SPREE_CART_COOKIE_NAME=spree_cart_token NEXT_PUBLIC_SPREE_CART_COOKIE_NAME=spree_cart_token
{# -- cookie expire in days #} {# -- cookie expire in days #}
NEXT_PUBLIC_SPREE_CART_COOKIE_EXPIRE=7 NEXT_PUBLIC_SPREE_CART_COOKIE_EXPIRE=7
NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:3000 NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_ID=1 NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_ID=1
NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_ID=27 NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_ID=27

View File

@ -1,4 +1,4 @@
# [Spree Commerce][1] Framework # [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. 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.
@ -6,48 +6,28 @@ A preview integration of Spree Commerce within NextJS Commerce. It supports brow
Start by following the [instructions for setting up NextJS Commerce][2]. Start by following the [instructions for setting up NextJS Commerce][2].
Next, setup Spree. The easiest way to run Spree locally is to follow the installation tutorial available at [the Spree Starter GitHub repository][3]. 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`.
You have to adjust Spree Starter to allow `localhost` and [CORS][4] requests. Run `docker-compose run web bundle add rack-cors` and: `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.
```ruby ---
# In config/application.rb add a configuration for CORS:
module SpreeStarter Setup Spree next. The easiest way to run Spree locally is to follow the installation tutorial available at [the Spree Starter GitHub repository][3].
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': 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' config.hosts << 'localhost'
``` ```
By default, Spree Starter and NextJS Commerce both run on port `3000`. Avoid collisions by running NextJS Commerce on port `4000`: Finally, run `yarn dev` :tada:
```json
// 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` :tada:
[1]: https://spreecommerce.org/ [1]: https://spreecommerce.org/
[2]: https://github.com/vercel/commerce [2]: https://github.com/vercel/commerce