Nx

Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations. It has a powerful core and a rich plugin ecosystem.

Nx and Edgio

Because every Nx project can be different, there are a couple ways to implement it.

Implement the connector at the root level of the Nx repo and specify in the connector which projects to configure.
Implement within the specific project folder inside your Nx repo. Specify commands at the root level Nx repo for interacting.

To learn more about what goes into making a connector, view this connector guide.

Example App

Here we use Next.js for the example Nx project.

Try the Nx Example Site

View the Code

System Requirements

Install Node.js 14.19.0

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.

With npm:

1npm i -g @layer0/cli

With yarn:

Bash
1yarn global add @layer0/cli

Start a Nx project from scratch

The following steps take you through set-up of a new Nx workspace. The same process can be used to add Edgio to your existing Nx repo.

To create the starter workspace, we will us Nx to generate the workspace. For this example, we will use the Next.js preset, but you can easily adapt this to any framework. Visit the Nx docs for more information on the available presets.

Optionally, install nx globally.

Bash
1npm i -g nx # optional but makes running nx commands easier

To create the workspace, run

Bash
1npx create-nx-workspace --preset=next

There will be a series of questions. When the one to choose the Application name comes, enter layer0-nx-next-app. The other answers can be of your choosing.

Add Edgio to the application

Because Nx wants dependencies installed at root level, we will init the project at root level to install the necesssary packages, but setup configurations to read into the next app we generated. The Edgio next connector expects to be in the project repo, so we will create our own custom connector with the necesssary configurations.

Bash
10 init # installs necessary packages

Reorganize project

Bash
1mv routes.js apps/layer0-nx-next-app/routes.ts
2mv next.config.js apps/layer0-nx-next-app

Open package.json and change the scripts > build to the following:

JSON
1"build": "nx build layer0-nx-next-app",

Open layer0.config.js and change the contents to the following:

JavaScript
1module.exports = {
2  connector: './layer0',
3  routes: './apps/layer0-nx-next-app/routes.ts',
4};

Open routes.ts and change to the following:

JavaScript
1import { Router } from '@layer0/core/router';
2import { nextRoutes } from '@layer0/next';
3
4export default new Router()
5  // Prevent search engine bot(s) from indexing
6  // Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
7  .noIndexPermalink()
8  .match('/service-worker.js', ({ serviceWorker }) => {
9    return serviceWorker('.next/static/service-worker.js');
10  })
11  .use(nextRoutes); // automatically adds routes for all files under /pages

We need to add a custom connector now. You can either copy the whole folder from the example, or create each file below as instructed.

1mkdir layer0
2touch layer0/build.js
3touch layer0/dev.js
4touch layer0/nextSrcDir.js
5touch layer0/prod.js

build.js

JavaScript
1const createBuilder =
2  require('@layer0/next/build/createBuildEntryPoint').default;
3const { join } = require('path');
4const srcDir = require('./nextSrcDir');
5
6module.exports = createBuilder({
7  srcDir,
8  distDir: join('dist', 'apps', 'layer0-nx-next-app', '.next'),
9  buildCommand: 'npm run build',
10});

dev.js

JavaScript
1const next = require('next');
2const createDevServer = require('@layer0/core/dev/createDevServer').default;
3const srcDir = require('./nextSrcDir');
4const cwd = process.cwd();
5
6module.exports = async function dev() {
7  process.chdir(srcDir);
8  global.LAYER0_NEXT_APP = next({ dev: true });
9  process.chdir(cwd);
10
11  return createDevServer({
12    label: 'Next',
13    command: (port) => `npx nx run layer0-nx-next-app:serve -- --port=${port}`,
14    ready: [/on http:\/\/localhost:3001/i],
15  });
16};

prod.js

JavaScript
1module.exports = require('@layer0/next/prod').default;

nextSrcDir.js

JavaScript
1const { join } = require('path');
2module.exports = join('apps', 'layer0-nx-next-app');

Development

Test your app with the App Platform on your local machine by running the following command in your project’s root directory:

10 dev

Deploy

Deploy your app to the App Platform by running the following command in your project’s root directory:

10 deploy