Edgio
Edgio Console

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

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/cli@latest

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 “@layer0/nuxt/module” to buildModules:
JavaScript
1// nuxt.config.js
2

3module.exports = {
4  ...
5  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
6  ...
7}
Options:
  • layer0SourceMaps: 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 0 init:
Bash
10 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 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 {0 commands

Run Swell app locally on Edgio

Run the Swell app with the command:
Bash
10 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 Edgio cloud using serverless-offline.

Deploying

Deploy the build to Edgio by running the 0 deploy command:
Bash
10 deploy
Refer to the Deploying 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:
Diff
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 confing and modules directories in the production build, update your layer0.config.js as follows:
Diff
1'use strict'
2

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

6module.exports = {
7  backends: {},
8  includeNodeModules: true,
9  connector: '@layer0/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 layer0 init.
2// You should commit this file to source control.
3

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

7module.exports = new Router()
8  // Prevent search engine bot(s) from indexing
9  // Read more on: https://docs.layer0.co/applications/cookbook#blocking-search-engine-crawlers
10  .noIndexPermalink()
11  .match('/service-worker.js', ({ serviceWorker }) => {
12    serviceWorker('.nuxt/dist/client/service-worker.js')
13  })
14  .get('/products/:product', ({ serveStatic, cache, renderWithApp }) => {
15    cache({
16      edge: {
17        maxAgeSeconds: 60,
18        staleWhileRevalidateSeconds: 1,
19      },
20      browser: false,
21    })
22    serveStatic('dist/products/:product/index.html', {
23      onNotFound: () => renderWithApp(),
24    })
25  })
26  .use(nuxtRoutes)
  1. Deploy!
Bash
10 deploy