Backpack components

Backpack includes a set of plain react components and set of components for use in storyblok. The quickest way to bootstrap a project with it is by using Create Backpack App.

Prerequisites

• Access to the EF Global github org (email gcdev@ef.com with your github username and we'll add you).
• Node.js (18.X.X) (opens in a new tab)
• yarn@1.22.19 (opens in a new tab) (preferred, you can also use npm)
• Set up the GH_PACKAGES_TOKEN environment variable as shown in this screencast (https://vimeo.com/777376209 (opens in a new tab)).

Quick setup

Our create-backpack-app tool makes it easy to bootstrap a backpack project with plain react and Typescript (ReactJS Backpack Boilerplate), NextJS and Typescript (NextJS Backpack Boilerplate), or our full-blown Storyblok site builder (Storyblok NextJS Backpack Boilerplate).

Let's start with the simplest, the ReactJS Backpack Boilerplate, which is basically a more modern create-react-app, using Vite for blazing fast™ compilation.

To start, open a new terminal window, and run:

You'll be prompted to name your project:

Give it a project name, and select the template

You'll be prompted to run auto configuration:

Press enter, and the project will install.

Now change directory into your project folder:

To check it all works, run

Vite will spin up a dev server at http://localhost:5173 (opens in a new tab). Open it and you should see a simple page with a title.

Set up fonts

Now you will need to set the correct EF font stack for your project. To do this with scss and with the latin type set:

The $assetsPath variable here needs to be overridden to point to your node_modules version of backpack due to the way scss resolves paths.

Font stacks are loaded based on the website's lang attribute, so you will also need to update that for the market to use the relevant font. This can be done at any level you want the font to load in i.e:

Will load the latin set. The full list of markets we use is here (you will need access to the ILC Technology org): https://github.com/ILC-Technology/ef-env-utils/blob/master/markets.ts (opens in a new tab)

Use components

You are ready to add components. You can use as many or few as you need; read through the component docs for full info on installation and usage.

Setup in existing projects

Once you have a token for downloading packages from the @ef-global/ scope on Github, you can

Set up global styles

Next you need to add our global css to your root app or layout file (App.tsx/jsx/js maybe)

This gets you the default styles, variables and layout utilities you can use across your project.

Set up fonts

Now you will need to set the correct EF font stack for your project. To do this with scss and with the latin type set:

The $assetsPath variable here needs to be overridden to point to your node_modules version of backpack due to the way scss resolves paths.

Font stacks are loaded based on the website's lang attribute, so you will also need to update that for the market to use the relevant font. This can be done at any level you want the font to load in:

The full list of markets we use is here (you will need access to the ILC Technology org): https://github.com/ILC-Technology/ef-env-utils/blob/master/markets.ts (opens in a new tab)

Use components

You are ready to add components. You can use as many or few as you need; read through the component docs for full info on installation and usage.