close

Filter

Close X
loading table of contents...

Frontend Developer Manual / Version 2010

Table Of Contents

5.4 Using an Example Brick

As described in Section 4.3, “Bricks Structure” example bricks are not intended to be used directly as they are subject to change without a clear upgrade path. Instead of that we advise creating a copy of the example brick you want to use. We will refer to this approach with the term eject as basically you will eject the brick from our delivered packages. This section describes how to achieve this manually or by using our command line tool.

Manual Approach

All example bricks are located in the bricks folder of the Frontend Workspace and are prefixed with example-.

  1. Find the brick you want to copy.

  2. Create a copy of the whole brick folder except for node_modules and put it into bricks again. You can name the folder freely but we advise naming it after the brick removing the example-.

  3. Open the package.json of your copy.

  4. Change the entry name to a different unique name that does not start with @coremedia-examples/. This is the actual name of your brick and it does not need to equal the folder name it is contained in.

  5. Check the entry dependencies. If the brick depends on other example bricks, you need to check the next section.

  6. Finally, use yarn install to install the newly created bricks. Please check Section 5.3, “Using Bricks” to use the newly ejected brick in your theme.

Advanced Steps for Example Brick Dependencies

If the example brick you are trying to eject has dependencies to other example bricks, you need to perform the following steps for each of them:

  1. Eject the example brick dependency as described above.

  2. Perform a full text search on the dependent brick and search for the old name of the dependency. Depending on the file type (JavaScript, SCSS, FreeMarker Template) you will need to adjust the corresponding usages to use your ejected brick again.

Command Line Tool Approach

There is also a command line tool that will cover most of the manual steps. Just run the following command from the root of the Frontend Workspace: 

yarn install
yarn eject

The interactive CLI will lead you through the different steps by asking which example bricks to be ejected. It can eject multiple bricks at once and offers to also eject example brick dependencies if required. In case you already have ejected the dependencies of an example brick (in a previous usage or manually, for instance) you can also pick which of your bricks represents the ejected example brick.

Caution

Caution

The tool will rewrite the package.json including the dependencies entry but it will not rewrite any imports or usages in JavaScript, SCSS or FreeMarker Templates. You will need to do this manually by performing a full-text search in all files. This step however is only required by very few example bricks.

Search Results

Table Of Contents