Remove required runtime dependencies (#293)

* Remove lodash/get dependency

* Remove qs dependency

* Add axios and node-fetch to dev dependencies and peer dependencies

Also loads axios dynamically based on runtime environment

* Explicitly build Spree SDK for Cypress

* Install optional peerDependencies when running e2e tests

* Include axios and node-fetch as devDependencies

* Use npm pack instead of npm link to reference SDK in tests

* Replace DeleteBeforeEmit with DeleteBeforeRun

* Prepare an intermiediate Docker image with packed Spree SDK for tests

* Build local images before attempting to pull

* Update path to browser SDK script in tests

* Remove docker-compose-cypress images pull

* Separate test-runtime from other test Docker services

* Include browser axios before running tests

* Skip running Spree worker for tests

* Adjust docker-host configuration

* Replace wait-for-it with a more robust implementation

Author: tniezg

.dockerignore

@@ -0,0 +1,4 @@
+**/node_modules
+dist
+types
+*.tgz

Dockerfile.test-runtime

@@ -0,0 +1,17 @@
+FROM node:14.15.4
+
+WORKDIR /sdk
+
+COPY . /sdk
+
+RUN npm install
+RUN npm run build
+RUN npm pack
+
+FROM alpine
+
+WORKDIR /sdk
+
+COPY --from=0 /sdk/spree-storefront-api-v2-sdk-*.tgz /sdk/storefront-api-v2-sdk.tgz
+
+COPY ./wait-for-it.sh /sdk/

README.md

@@ -98,6 +98,14 @@ Install the NPM package:
 npm install @spree/storefront-api-v2-sdk --save
 ```
 
+Install a HTTP client - axios or node-fetch. For example:
+
+```
+npm install axios
+```
+
+<aside><p>For details about HTTP clients, read the <a href="#switching-the-fetcher">Switching the fetcher</a> section.</p></aside>
+
 Create a client:
 
 ```js
@@ -195,21 +203,60 @@ Identifies a user for a single operation. For example, to reset their account's
 
 ## Switching the fetcher
 
-By default, the Spree SDK uses [Axios][8] to communicate with Spree. Another built-in option is [fetch][9]. It can be set as follows:
+Spree SDK does not come bundled with a HTTP client. A HTTP client may have to be installed before using the library. Out of the box, Spree SDK supports using [Axios][8] and [fetch][9] to communicate with Spree.
+
+**Option A - RECOMMENDED: Spree SDK in NodeJS using Axios**
+
+To use Spree SDK with Axios in NodeJS, install Axios using NPM:
+
+```
+npm install axios
+```
+
+Spree SDK will automatically detect that Axios is available and use it to make requests to Spree.
+
+**Option B - Spree SDK in the browser using Axios**
+
+To use Spree SDK with Axios in the browser, include axios as a `<script>` tag before using the SDK:
+
+```html
+<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
+<script src="https://unpkg.com/@spree/[email protected]/dist/client/index.js"></script>
+```
+
+Again, Spree SDK will automatically detect that Axios is available and use it to make requests to Spree.
+
+**Option C - Spree SDK in NodeJS using fetch**
+
+Another supported HTTP client is [fetch][9]. It can be setup in NodeJS as follows:
+
+```
+npm install node-fetch
+```
+
+To have Spree SDK use fetch instead of Axios, set `fetcherType` to `'fetch'` when creating the Spree SDK Client:
+
+```js
+makeClient({ fetcherType: 'fetch', host: ... })
+```
+
+**Option D - Spree SDK in the browser using fetch**
+
+Modern web browsers include fetch natively. To use Spree SDK with native fetch, it's enough to set `fetcherType` to `'fetch'` when creating the Spree SDK Client:
 
 ```js
-createClient({ fetcherType: 'fetch', host: ... })
+makeClient({ fetcherType: 'fetch', host: ... })
 ```
 
-The `'fetch'` option will look for global `fetch` and `Request` values and fallback to `node-fetch` during runtime.
+**Option E - ADVANCED: Supply a custom HTTP client.**
 
-A custom fetcher can be used like so:
+To have full control over requests and responses, a custom fetcher can be used like so:
 
 ```js
-createClient({ fetcherType: 'custom', createFetcher: ... })
+makeClient({ fetcherType: 'custom', createFetcher: ... })
 ```
 
-To create a custom fetcher which uses a fetch-compatible interface, use the `createCustomizedFetchFetcher` function.
+<aside><p>To create a custom fetcher which uses a fetch-compatible interface, use the `createCustomizedFetchFetcher` function.</p></aside>
 
 ## Endpoints
 

docker-compose-cypress.yml

@@ -2,24 +2,14 @@ version: '3.7'
 
 services:
   express:
-    image: node:14.15.4
-    volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/docker/express/node_modules
-    entrypoint: ['/app/docker/express/express-docker-entrypoint.sh']
+    build:
+      context: .
+      dockerfile: ./docker/express/Dockerfile.express
   cypress:
-    image: cypress/included:8.3.0
-    volumes:
-      - .:/sdk
-      - /sdk/node_modules
-      - /sdk/tests/node_modules
-    entrypoint: ['/sdk/tests/cypress-docker-entrypoint.sh']
+    build:
+      context: .
+      dockerfile: ./tests/Dockerfile.cypress
   docker-host:
     image: qoomon/docker-host:3.0.3
     cap_add: ['NET_ADMIN', 'NET_RAW']
-    deploy:
-      resources:
-        limits:
-          memory: 8M
     restart: on-failure

docker-compose-spree.yml

@@ -34,22 +34,6 @@ services:
       SECRET_KEY_BASE: skb
       ALLOWED_ORIGIN_HOSTS: '*'
       RACK_CORS_DEBUG: 'true'
-  worker:
-    depends_on:
-      - 'postgres'
-      - 'redis'
-    image: sparksolutions/spree-commerce:latest
-    command: bundle exec sidekiq -C config/sidekiq.yml
-    volumes:
-      - 'spree:/app/'
-      - 'bundle_cache:/bundle'
-    environment:
-      REDIS_URL: redis://redis:6379/0
-      DB_HOST: postgres
-      DB_PORT: 5432
-      DISABLE_SPRING: 1
-      BROWSER: /dev/null
-      SECRET_KEY_BASE: skb
 
 volumes:
   spree:

docker-compose-test-runtime.yml

@@ -0,0 +1,8 @@
+version: '3.7'
+
+services:
+  test-runtime:
+    image: spree/test-runtime
+    build:
+      context: .
+      dockerfile: ./Dockerfile.test-runtime

docker/express/Dockerfile.express

@@ -0,0 +1,13 @@
+FROM spree/test-runtime
+
+FROM node:14.15.4
+
+COPY --from=0 /sdk /sdk
+
+WORKDIR /app
+
+COPY ./docker/express /app
+
+RUN npm install
+
+ENTRYPOINT ./express-docker-entrypoint.sh

docker/express/express-docker-entrypoint.sh

@@ -2,17 +2,6 @@
 
 set -e
 
-cd /app
+/sdk/wait-for-it.sh http://docker-host:3000/api/v2/storefront/products?per_page=1 -t 300
 
-npm install
-npm run build
-npm link
-
-cd /app/docker/express
-
-npm install
-npm link @spree/storefront-api-v2-sdk
-
-/app/wait-for-it.sh -s docker-host:3000
-
-node ./index.js
+node /app/index.js

docker/express/index.js

@@ -8,6 +8,10 @@ const { makeClient, result } = sdk
 
 app.use(bodyParser.json())
 
+app.get('/ping', (_request, response) => {
+  response.send('up')
+})
+
 app.all('/', async (request, response, next) => {
   try {
     console.log('The Express server received a new request. Arguments: ', request.body)