Frontent Overview

The Rebel front end repos are currently separated into four different repositories.

The rebel-web-components and rebel-web-ui both build into installable npm packages. @rebeldotcom/components and @rebeldotcom/ui, respectively.

@rebeldotcom/components

rebel-web-components

A set of generic, reusable ui components to use as building blocks for more complex components and features.

This package is also where the Theme and styling for all of Rebel's modern React components comes from. This repo and package are public and free to use in any project.

By wrapping your application with the <ThemeProvider> and using the <GlobalStyle /> component, the application's elements will inherit the theme's styles used by styled-system.

Theming options include:
By passing in either the redesignTheme.ts or a custom theme file, we have control over the design tokens (space, fonts, etc...) used throughout the application.

This package is installed into all Rebel front end applications.

@rebeldotcom/ui

rebel-web-ui

A set of features and compound components containing Rebel-specific business logic and configurations.

Most Rebel components belong in this repo and package in order to be shared across both site platforms (rebelweb and rebel-web-cms).

For example, the Header and Footer as well as authentication flow are used across both old (rebelweb) and new (rebel-web-cms) pages.

This package is also installed into all Rebel front end applications.

Dependency Notes

@rebeldotcom/components is installed into this repo as a peer dependency.

This means, while we make use of those UI elements, but don't include the code from @rebeldotcom/components when bundling @rebeldotcom/ui.

Being a peer dependency, @rebeldotcom/components must be installed alongside @rebeldotcom/ui within the application in question.

More on this in the deployment section.

rebel-web-src

rebel-web-src

rebel-web-src is the repo containing most of Rebel's legacy React code.

Being an interim step in the modernization of the Rebel front end, individual js bundles are created via Webpack, each for a specific aspx page in the rebelweb solution.

As features are migrated to the @rebeldotcom/ui package, this repo should be cleaned up and reduced in size.

The current list of features included in this repo includes:

The latest and main container is the Rebel container which includes the Order page. This is also where the main navigation header and footer are added to the aspx pages.

rebel-web-cms

rebel-web-cms

The Rebel Web CMS is now the main front end platform for new features as well as all marketing pages and content.

Built with GatsbyJS, this solution statically generates the vast majority of it's content and leverages S3 and CloudFront for distribution. The marketing pages rely mostly on predefined "panel" components and JSON files. We also have support for mdx files as page sources as well as default-exported React components (.js files).