Krabs is an enterprise-ready Express.js/Fastify middleware for serving thousands of different websites from a single Next.js instance.
Krabs is available on npm and can be installed as follows:
For Express.js (see on npm)
yarn add krabs
# or
npm install --save krabsFor Fastify (see on npm)
yarn add fastify-krabs
# or
npm insall --save fastify-krabs- Krabs forces you to use a custom server. Therefore, deployments to Vercel are not supported.
_appand_documentpages are common to every website.
You can watch a video introduction on YouTube:
Express.js example
Let's say that we want to support two different websites with just one Next.js instance, and serve them using just one Express.js server.
Write the following configuration inside a .krabs.js or .krabs.config.js file inside of the root of your project:
module.exports = {
tenants: [
{
name: 'website-1',
domains: [
{
development: /dev\.[a-z]*\.local\.website-1\.com/, // Regex supported!
staging: 'stage.website-1.com',
production: 'website-1.com',
},
],
},
{
name: 'website-2',
domains: [
{
development: 'local.website-2.com',
staging: 'stage.website-2.com',
production: /[\w|\d|-|_]+\.website-2.com/, // Regex supported!
},
],
},
],
};Create an index.js file and fill it with the following content:
const express = require('express');
const next = require('next');
const krabs = require('krabs').default;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
async function main() {
try {
await app.prepare();
const handle = app.getRequestHandler();
const server = express();
server
.get('*', (req, res) => krabs(req, res, handle, app))
.listen(3000, () => console.log('server ready'));
} catch (err) {
console.log(err.stack);
}
}
main();Inside our .krabs.js file, we configured two tenants with two different name properties: website-1 and website-2.
So now let's create two new folders inside of the Next.js' default pages/ directory:
pages/
- _app.js
- website-1
- website-2Feel free to add any page you want inside both of these folders, as they will be treated as they were the default Next.js' pages/ folder.
Let's add the following content to pages/website-1/about.js:
function About() {
return <div> About website 1 </div>;
}
export default About;and the following code to pages/website-2/about.js:
function About() {
return <div> This is website 2 </div>;
}
export default About;Map local.website-1.com and local.website-2.com in your hosts file, then boot the server by typing:
node index.jsgoing to http://dev.pizza.local.website-1.com/about and http://local.website-2.com/about, you will see the components above rendered by the same Next.js instance!
Fastify example
Let's say that we want to support two different websites with just one Next.js instance, and serve them using just one Express.js server.
Write the following configuration inside a .krabs.js or .krabs.config.js file inside of the root of your project:
module.exports = {
tenants: [
{
name: 'website-1',
domains: [
{
development: /dev\.[a-z]*\.local\.website-1\.com/, // Regex supported!
staging: 'stage.website-1.com',
production: 'website-1.com',
},
],
},
{
name: 'website-2',
domains: [
{
development: 'local.website-2.com',
staging: 'stage.website-2.com',
production: /[\w|\d|-|_]+\.website-2.com/, // Regex supported!
},
],
},
],
};Create an index.js file and fill it with the following content:
const fastify = require('fastify')({ trustProxy: true });
const next = require('next');
const krabs = require('../dist/fastify-krabs').default;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
async function main() {
try {
await app.prepare();
const handle = app.getRequestHandler();
fastify
.get('*', (request, reply) => krabs(request, reply, handle, app))
.listen(3000, () => console.log('server ready'));
} catch (err) {
console.log(err.stack);
}
}
main();Inside our .krabs.js file, we configured two tenants with two different name properties: website-1 and website-2.
So now let's create two new folders inside of the Next.js' default pages/ directory:
pages/
- _app.js
- website-1
- website-2Feel free to add any page you want inside both of these folders, as they will be treated as they were the default Next.js' pages/ folder.
Let's add the following content to pages/website-1/about.js:
function About() {
return <div> About website 1 </div>;
}
export default About;and the following code to pages/website-2/about.js:
function About() {
return <div> This is website 2 </div>;
}
export default About;Map local.website-1.com and local.website-2.com in your hosts file, then boot the server by typing:
node index.jsgoing to http://dev.pizza.local.website-1.com/about and http://local.website-2.com/about, you will see the components above rendered by the same Next.js instance!
You can find the full documentation (with real code examples) here!
Krabs is free as in freedom and licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent