Example with RedwoodJS

Get started with an example

To begin, the most straightforward approach is to utilize one of the provided templates. These templates come pre-configured with the necessary settings, such as CssBaseline and other fundamental components.

If you're new to GitHub and need guidance on initiating a project using a template, you can access comprehensive instructions on how to get started on this example.

Generate new application

Follow Redwood getting started guide to create new Redwood application:

yarn create redwood-app my-redwood-project

Redwood needs Node 20. Switch with nvm use 20 before creating the project, and run corepack enable if yarn is not found.

Installation

Open web directory before installing dependencies:

cd web

Install dependencies:

pnpmnpmyarnbun

pnpm add @bolio-ui/core

Setup

Add styles imports, BolioUIProvider and CssBaseline to web/src/App.tsx:

import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
import '@bolio-ui/core/styles.css'

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'

import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <BolioUIProvider>
        <RedwoodApolloProvider>
          <CssBaseline />
          <Routes />
        </RedwoodApolloProvider>
      </BolioUIProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)

export default App

Ready to go! Start the development server:

yarn rw dev