Separate Middleware

Along with the Vue Storefront architecture you can create separate API Middleware. To do this you can use our internal express.js instance or pass your own server connection. To connect with our internal instance you need to create a special endpoint file to handle this.

// middleware.js

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

const app = createServer({ integrations });

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

This way your server connection will be exposed on the 8181 port.

Now you can use it (port and host) within the nuxt.config. Like this.

{
  ...,
  publicRuntimeConfig: {
    middlewareUrl: process.env.API_BASE_URL || 'http://localhost:8181'
  },
}

Remember to run your server at the same time along with your web application.

node middleware.js

You can add new scripts to the package.json file as well, and run processes concurrently.

{
  "scripts": {
    "dev": "concurrently \"nuxt\" \"yarn start:middleware\"",
    "start:middleware": "node middleware.js",
  },
}

Of course, you can create your own middleware connection and pass to it your own server that will handle your API calls. This is just an example.