Frontend Developer Manual / Version 2307
Table Of Contents
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 CoreMedia advises to create a copy of the example brick
you want to use. This approach will be referred to 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-.
Find the brick you want to copy.
Create a copy of the whole brick folder except for
node_modulesand put it intobricksagain. You can name the folder freely, but CoreMedia advises to name it after the brick removing theexample-.Open the
package.jsonof your copy.Change the entry
nameto 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.Check the entry
dependencies. If the brick depends on other example bricks, you need to check the next section.Finally, use
pnpm installto 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:
Eject the example brick dependency as described above.
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:
pnpm install pnpm 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
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.
