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>
)