Configuring Vue Storefront

The Elastic Path Commerce Cloud integration for Vue Storefront is configured with three files. We explain each of them in detail below, showing all possible configuration options.

Nuxt configuration

In the nuxt.config.js file, you can configure properties affecting the frontend portion of your application, such as localization and search options visible to the user and send to the server.

If you want to know more, check out Nuxt configuration file reference (opens new window).

Server Middleware configuration

In the middleware.config.js file, you can configure the tax data, SDK, and integration extensions. It includes secret keys, and custom API endpoints.

You can read more about this on the Server Middleware (opens new window) page.

Prerequisite

To configure this file, you need API Secrets. We explained how to create them with proper permissions on the Project Setup page.

TIP

We are also strongly encourage you to use Dotenv (opens new window) library to easily manage your environmental keys.

Configuration reference

Key ( * required )	Type	Description
client_id *	String	Responsible for defining the Elastic Path Motlin SDK client id.
client_secret *	String	Responsible for defining the Elastic Path Motlin SDK client secret.
secure_cookies *	Boolean	This key is enabling or disabling the flags HttpOnly, Secure, and SameSite for cookies. Those flags require HTTPS connection to working. We are suggesting to set value for that key as true for production environments.
forgotten_password_token_expiration *	String	Define time of token expiration, when user will request for password reset.
tax_data *	Object	Define the taxes for each country / region with different variations.

Configuration example

require('dotenv').config();

module.exports = {
  integrations: {
    epcc: {
      location: '@vsf-enterprise/epcc-api/server',
      configuration: {
        client_id: process.env.EPCC_CLIENT_ID,
        client_secret: process.env.EPCC_CLIENT_SECRET,
        secure_cookies: process.env.NODE_ENV === 'production',
        forgotten_password_token_expiration: '10m',
        tax_data: {
          en: {
            default: {
              rate: 0.2
            },
            reduced: {
              rate: 0.3
            }
          },
          pl: {
            default: {
              rate: 0.23
            },
            medical: {
              rate: 0.08
            }
          }
        }
      }
    }
  }
};

API Server configuration

Elastic Path integration relies on a separation between Vue Storefront express-based API and Nuxt. Separation is done to increase the performance of the application. In the project root directory, you can find a middleware.js file, which is an entry point for our API. More information can be found in section Separating Server Middleware from Nuxt.js (opens new window) and Server Middleware URL (opens new window).

API Server Example

const { createServer } = require('@vue-storefront/middleware');
const { integrations } = require('./middleware.config');
const cors = require('cors');

const CORS_MIDDLEWARE_NAME = 'corsMiddleware';

(async () => {
  const app = await createServer({ integrations });

  const corsMiddleware = app._router.stack.find(
    (s) => s.name === CORS_MIDDLEWARE_NAME
  );

  corsMiddleware.handle = cors({
    origin: ['http://localhost:3000'],
    credentials: true
  });

  app.listen(8181, () => {
    console.log('Middleware started');
  });
})();