Installation

Create React App

If you are starting from zero the first step is to initialise a project with CRA:

npm install -g create-react-app

create-react-app my-app
cd my-app/

Install rmw-shell

After the initialization of our app we need to install rmw-shell. Because it is a shell for full functional application it has quite a lot of peer dependencies. The installation should be done with this command:

npm i --save rmw-shell firebase firebaseui fireform firekit firekit-provider intl intl-locales-supported material-ui material-ui-filter material-ui-image material-ui-responsive-drawer material-ui-responsive-menu material-ui-selectable-menu-list material-ui-superselectfield prop-types react react-container-dimensions react-custom-scrollbars react-dom react-helmet react-image-cropper react-intl react-list react-loadable react-materialui-notifications react-redux react-router react-router-dom redux redux-form redux-form-material-ui redux-logger redux-persist redux-responsive redux-thunk 

Setup App component

We now have to change the index.js file to use rmw-shell. We just import our App component and also use the registerServiceWorker from rmw-shell. This is how the new index.js file should look like:

import App from 'rmw-shell/lib/App'
import React from 'react'
import ReactDOM from 'react-dom'
import registerServiceWorker from 'rmw-shell/lib/registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

registerServiceWorker()

Adopt the html file

Because we are using material-ui and firebaseui we need to add some stylesheeds to the html file in the public folder. For that we just add the following to the head of index.html:

    <link async type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
    <link async href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Start your application

We can now start our application with npm start. Because we did not add any configs to the App component of rmw-shell the project will fallback to the default settings that use the React Most Wanted Firebase project. The project will also have only the main components and navigation menu. In the next parts we will show how to customize your application.