Example with RedwoodJS

Get started with a 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 Gatsby application:

yarn create redwood-app my-redwood-project

Installation

Open web directory before installing dependencies:

cd web

Install dependencies:

yarn add @bolio-ui/core

Setup

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

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

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

Example with Gatsby

MADE & DESIGNED WITHBY BRUNO ANDRADE