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 Layer0
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.
Sign up for Layer0
Deploying requires an account on Layer0. Sign up here for free.
Install the Layer0 CLI
If you have not already done so, install the Layer0 CLI.
npm i -g @layer0/cli # yarn global add {{ PACKAGE_NAME }}/cli
System Requirements
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 Layer0 to your existing Nx repo.
Generate the Nx workspace
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.
npm i -g nx # optional but makes running nx commands easier
To create the workspace, run
npx 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 Layer0 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 Layer0 next connector expects to be in the project repo, so we will create our own custom connector with the necesssary configurations.
0 init # installs necessary packages
Reorganize project
mv routes.js apps/layer0-nx-next-app/routes.ts
mv next.config.js apps/layer0-nx-next-app
Open package.json
and change the scripts > build
to the following:
"build": "nx build layer0-nx-next-app",
Open layer0.config.js
and change the contents to the following:
module.exports = {
connector: './layer0',
routes: './apps/layer0-nx-next-app/routes.ts',
};
Open routes.ts
and change to the following:
import { Router } from '@layer0/core/router';
import { nextRoutes } from '@layer0/next';
export default new Router()
.match('/service-worker.js', ({ serviceWorker }) => {
return serviceWorker('.next/static/service-worker.js');
})
.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.
mkdir layer0
touch layer0/build.js
touch layer0/dev.js
touch layer0/nextSrcDir.js
touch layer0/prod.js
build.js
const createBuilder =
require('@layer0/next/build/createBuildEntryPoint').default;
const { join } = require('path');
const srcDir = require('./nextSrcDir');
module.exports = createBuilder({
srcDir,
distDir: join('dist', 'apps', 'layer0-nx-next-app', '.next'),
buildCommand: 'npm run build',
});
dev.js
const next = require('next');
const createDevServer = require('@layer0/core/dev/createDevServer').default;
const srcDir = require('./nextSrcDir');
const cwd = process.cwd();
module.exports = async function dev() {
process.chdir(srcDir);
global.LAYER0_NEXT_APP = next({ dev: true });
process.chdir(cwd);
return createDevServer({
label: 'Next',
command: (port) => `npx nx run layer0-nx-next-app:serve -- --port=${port}`,
ready: [/on http:\/\/localhost:3001/i],
});
};
prod.js
module.exports = require('@layer0/next/prod').default;
nextSrcDir.js
const { join } = require('path');
module.exports = join('apps', 'layer0-nx-next-app');
Development
To start the app locally running with Layer0, run
0 dev
Deploy
To deploy the app to Layer0, run
0 deploy