A template with pre-configured routing for React projects created with the Brightlayer UI CLI.

Usage no npm install needed!

<script type="module">
  import brightlayerUiCraTemplateRouting from 'https://cdn.skypack.dev/@brightlayer-ui/cra-template-routing';


Routing Template (JavaScript)

npm (scoped)

This is an official Brightlayer UI template for use with the Create React App CLI. It is also used internally by the Brightlayer UI CLI.

This template includes the installation and initial setup of routing using React Router. It includes several placeholder routes/screens and a Drawer navigator from the Brightlayer UI React Component Library.


This template can be used with Create React App:

npx create-react-app myapp --template @brightlayer-ui/routing

or using the Brightlayer UI CLI:

npx -p @brightlayer-ui/cli blui new react --name=myapp --language=js --template=routing

Project Structure

Projects created using this template will start out with the following file structure:

└── /src
    |── index.jsx                           // the root file that renders the application (Theme Provider, Router, & CSS Baseline styles)
    |── App.jsx                             // sets up the DrawerLayout component
    |── /components                           
    │   └── Logo.jsx                        // BLUI spinning logo graphic
    |── /contexts                           
    │   └── drawerContextProvider.jsx       // creates a Context to allow pages to open/close the navigation drawer
    |── /pages                              // sample application pages
    └── /router
        |── drawer.jsx                      // the contents of the navigation drawer
        |── main.jsx                        // React Router route configuration
        └── routes.jsx                      // route definitions for use in the Router