Skip to main content

Installation

Brick Next has been designed from the start for gradual adoption. You can use as little or as much Brick Next as you need. Whether you want to get a taste of Brick Next, add some low-code capabilities to an HTML page, or start a complex Brick Next powered app, this section will help you get started.

Try Brick Next​

You don’t need to install anything to play with Brick Next. Try editing this example!

You can edit it directly or Fork a project on StackBlitz.

Try Brick Next locally​

To try Brick Next locally on your computer:

  1. Install Node.js
  2. Open the starter project on StackBlitz, on the Project panel, press the download button to download an archive of the files locally
  3. Unzip the archive, then open a terminal and cd to the directory you unzipped
  4. Install the dependencies with npm install
  5. Run npm start to start a local server and follow the prompts to view the code running in a browser

Start a new Brick Next project​

To start a new Brick Next project, you can follow the steps above but download this project.

This enables full features of Brick Next, such as multi-apps and routing.

Add Brick Next to an existing project​

If you want to add some low-code capabilities to your existing project, you don’t have to rewrite it in Brick Next. Add Brick Next to your existing stack, and render storyboards which are made out of bricks.

# First install the main packages
npm install --save @next-core/runtime @next-core/webpack

# Then install the brick packages you want to use
npm install --save @next-bricks/shoelace
npm install --save @next-bricks/basic @next-bricks/icons
webpack.config.js
const { RuntimePlugin } = require('@next-core/webpack');

module.exports = {
  // ...
  plugins: [
    new RuntimePlugin({
      brickPackages: [
        '@next-bricks/icons',
        '@next-bricks/basic',
        '@next-bricks/shoelace',
      ],
    }),
  ]
};
index.js
import('./bootstrap.js');
bootstrap.js
import { unstable_createRoot } from '@next-core/runtime';

const container = document.querySelector('#app');
const root = unstable_createRoot(container);

root.render(storyboard, {
  context,
});