🎉 Introducing Edgio v6 which supports Node.js v16. Learn how to upgrade. 🎉
Edgio
Edgio

Swell

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

What is Swell?

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.

Example

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

Try the Swell with Nuxt.js Site Example
View the Code

System Requirements

Sign up for Edgio

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

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.

Bash
1npm i -g @edgio/cli

Create a new Swell app

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

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

Connecting to Swell

Authentication with Swell

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 variables to .env

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

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

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

Bash
1yarn run dev

Configuring your Swell app for Edgio

Modify nuxt.config.js

In the existing nuxt.config.js configuration, add “@edgio/nuxt/module” to buildModules:

JavaScript
1// nuxt.config.js
2

3module.exports = {
4  ...
5  buildModules: [['@edgio/nuxt/module', { edgioSourceMaps: true }]],
6  ...
7}

Options:

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

We noticed some performance issues related to sourcemaps being loaded in our Serverless infrastructure, which may result in 539 project timeout errors. In case you encounter such errors, please try again with sourcemaps disabled. This document will be updated once the problem is fully resolved.

Initialize your project

In the root directory of your project run edgio init:

Bash
1edgio init

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

  • The @edgio/core package
  • The @edgio/nuxt package
  • The @edgio/vue package
  • edgio.config.js - Contains various configuration options for Edgio.
  • 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 {edgio commands

Run Swell app locally on Edgio

Run the Swell app with the command:

Bash
1edgio build && edgio run --production

Load the site: http://127.0.0.1:3000

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

Deploying

Deploy the build to Edgio by running the edgio deploy command:

Bash
1edgio deploy

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

Bonus: Generate pages on demand

  1. To preserve packages that are imported in the modules directories required in the generating pages on the server, update package.json as follows:
JSON
1"dependencies": {
2  "@nuxtjs/sitemap": "2.4.0",
3  "@nuxt/core": "2.15.7",
4  "lodash": "4.17.21",
5  "mitt": "2.1.0",
6  "consola": "2.15.3",
7  "build-url": "6.0.1",
8  "deepmerge": "4.2.2",
9  "swell-js": "3.10.0",
10  "p-map": "5.2.0"
11}
  1. To include the config and modules directories in the production build, update your edgio.config.js as follows:
JavaScript
1'use strict';
2

3// This file was automatically added by edgio deploy.
4// You should commit this file to source control.
5

6module.exports = {
7  backends: {},
8  includeNodeModules: true,
9  connector: '@edgio/nuxt',
10  includeFiles: {
11    config: true,
12    modules: true,
13    'static/lang/**/*': true,
14  },
15};
  1. Update the routes.js as following to enable ISG with your Swell app:
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3

4const {Router} = require('@edgio/core/router');
5const {nuxtRoutes} = require('@edgio/nuxt');
6

7module.exports = new Router()
8  .match('/service-worker.js', ({serviceWorker}) => {
9    serviceWorker('.nuxt/dist/client/service-worker.js');
10  })
11  .get('/products/:product', ({serveStatic, cache, renderWithApp}) => {
12    cache({
13      edge: {
14        maxAgeSeconds: 60,
15        staleWhileRevalidateSeconds: 1,
16      },
17      browser: false,
18    });
19    serveStatic('dist/products/:product/index.html', {
20      onNotFound: () => renderWithApp(),
21    });
22  })
23  .use(nuxtRoutes);
  1. Deploy!
Bash
1edgio deploy