This guide shows you how to deploy a Swell application on Layer0. Clone the repo layer0-swell to get the entire setup.

Swell is a customizable headless ecommerce platform that supports unique business models and customer experiences for global B2C and B2B merchants. Swell's API-first backend and modern development tools provide a future-proof platform for innovative businesses from small coffee roasters to international enterprises.

A Swell powered ecommerce backend and a Nuxt.js app for the framework.

Deploying requires an account on Layer0. Sign up here for free.

If you have not already done so, install the Layer0 CLI

npm i -g @layer0/cli # yarn global add @layer0/cli

If you don't already have a Swell app, create one by running the following:

# Clone the app
git clone https://github.com/swellstores/origin-theme
# Install dependencies
yarn install

This account enables access to your store ID and API key which are necessary for API access. To access API keys, follow these steps, beginning on the left sidebar of the admin dashboard.

  • Navigate to "Admin".
  • Navigate to "Settings".
  • Click on "API".
  • At the top of the page, copy the Store ID.
  • Under one of the secret keys, click on the eye icon to make the key visible.
  • Copy the secret key.

Add your Swell store ID, public key and url to .env:

SWELL_STORE_ID=your_store_id
SWELL_PUBLIC_KEY=GET_YOUR_PK_FROM_THE_ADMIN_DASHBOARD
SWELL_STORE_URL=https://your_store_id.swell.store

You can now verify that your app works by running it locally with:

yarn run dev

In the existing nuxt.config.js configuration, add "@layer0/nuxt/module" to buildModules:

// nuxt.config.js

module.exports = {
  ...
  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
  ...
}

Options:

  • layer0SourceMaps: true|false: when true, the serverless build includes sourcemap files which make debugging easier when tailing the server logs in the Layer0 Developer Console. It also increases the serverless bundle size, which may push your deployments over the 50MB (compressed) limit.

In the root directory of your project run 0 init:

0 init

The 0 init command will automatically add all the required dependencies and files to your project. These include:

  • The @layer0/core package
  • The @layer0/nuxt package
  • The @layer0/vue package
  • layer0.config.js - Contains various configuration options for Layer0.
  • routes.js - A default routes file that sends all requests to nuxt.js. You can update this file to add caching or proxy some URLs to a different origin as described later in this guide.
  • sw/service-worker.js - A service worker that provides static asset and API prefetching.

This command will also update your package.json with the following changes:

  • Moves all packages in dependencies to devDependencies except those listed in the modules property of nuxt.config.js.
  • Adds @nuxt/core to dependencies
  • Adds several scripts to run the available {0 commands

Run the Swell app with the command:

0 build && 0 run --production

Load the site: http://127.0.0.1:3000

Setting --production runs your app exactly as it will be uploaded to the Layer0 cloud using serverless-offline.

Deploy the build to Layer0 by running the 0 deploy command:

0 deploy

Refer to the Deploying guide for more information on the deploy command and its options.

  1. To preserve packages that are imported in the modules directories required in the generating pages on the server, update package.json as follows:
"dependencies": {
  "@nuxtjs/sitemap": "2.4.0",
  "@nuxt/core": "2.15.7"
+ "lodash": "4.17.21",
+ "mitt": "2.1.0",
+ "consola": "2.15.3",
+ "build-url": "6.0.1",
+ "deepmerge": "4.2.2",
+ "swell-js": "3.10.0",
+ "p-map": "5.2.0"
}
  1. To include the confing and modules directories in the production build, update your layer0.config.js as follows:
'use strict'

// This file was automatically added by layer0 deploy.
// You should commit this file to source control.

module.exports = {
  backends: {},
  includeNodeModules: true,
  connector: '@layer0/nuxt',
+ includeFiles: {
+   config: true,
+   modules: true,
+   'static/lang/**/*': true,
+ },
}
  1. Update the routes.js as following to enable ISG with your Swell app:
// This file was added by layer0 init.
// You should commit this file to source control.

const { Router } = require('@layer0/core/router')
const { nuxtRoutes } = require('@layer0/nuxt')

module.exports = new Router()
  .match('/service-worker.js', ({ serviceWorker }) => {
    serviceWorker('.nuxt/dist/client/service-worker.js')
  })
  .get('/products/:product', ({ serveStatic, cache, renderWithApp }) => {
    cache({
      edge: {
        maxAgeSeconds: 60,
        staleWhileRevalidateSeconds: 1,
      },
      browser: false,
    })
    serveStatic('dist/products/:product/index.html', {
      onNotFound: () => renderWithApp(),
    })
  })
  .use(nuxtRoutes)
  1. Deploy!
0 deploy
Edit this guide on GitHub