CuriOS CLI

The CuriOs SDK comes with a CLI tool to quickly bootstrap application

Install

Install curios globally

npm install -g curios

Create an application

curios create-app

This will walk you through everything you need to do to create an application for We the Curious

Template application

The CLI will build you a basic app. There are a few important aspects to the app which are highlighted below:

WTCProvider

This library depends on an external theme. Served either from the assets server or as a theme object. This must be passed to the WTCProvider component as below. In this instance the theme is retrieved from the hosted asset server at https://assets.wethecurious.io/1/themes/latest. If the theme is not retrieved correctly the screen will display the text "Start theme server". In the template application the following example is from the root index.js file.

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { App } from './App'
import { WTCProvider } from '@wethecurious/wtc-ui-library'
import { asyncTheme } from './hoc/asyncTheme'
import { ThemeProvider } from 'styled-components'
import { store } from './reducers/store/reduce'
import './global.css'

interface Props {
  theme: any
}

const Container = (props: Props) => (
  <WTCProvider theme={props.theme}>
    <ThemeProvider theme={props.theme}>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </ThemeProvider>
  </WTCProvider>
)

const ThemedContainer = asyncTheme(Container, 'https://assets.wethecurious.io/1/themes/latest')

ReactDOM.render(
  <ThemedContainer />,
  document.getElementById('app')
)

The Provider component is used to provide the redux store to the react component tree. The BrowserRouter component is user for react-router-dom.

Router

This application is set up with react-router-dom to handle urls and in browser routing. Each page component can be setup in the AppScreens component as per the example below.

import * as React from 'react'
import { Switch, Route } from 'react-router-dom'
import { Home } from './screens/Home'
import { Hello } from './screens/Hello'

enum Path {
  Home = '/',
  Hello = '/hello'
}

// Put routes to each screen in the AppScreens component below
export const AppScreens: React.SFC = () => (
  <Switch>
    <Route exact={true} path={Path.Home} component={Home} />
    <Route exact={true} path={Path.Hello} component={Hello} />
  </Switch>
)