ChilliSource.Front.Modules

Getting Started

This is a starter pack to get started on BlueChilli web app projects. Here you’ll find the guides to implement your designs. It utilises React 16, Redux and React Router 4

Quick Install

  1. Run the command below: npx bc-starter-template <project-directory>

  2. When promted, choose the modules you need and then off you go.

Manual Install

  1. Install boilerplate
    create-react-app <YOUR_APP_NAME_IN_SMALL_CASE>

  2. Change into the target directory created above and then
    yarn add chillifront

  3. Create Redux Store

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { combineReducers } from 'redux';

// Optional Middleware
const middleware = [];

export default function configureStore(
	initialState,
	modReducers = {},
	modMiddleware = [],
	modStoreEnhancers = []
) {
	const composedEnhancers = composeWithDevTools(
		applyMiddleware(...modMiddleware.concat(middleware)),
		...modStoreEnhancers
	);

	const rootReducer = combineReducers(modReducers);
	return createStore(rootReducer, initialState, composedEnhancers);
}
  1. Update App.js with the following:
import chillifront from 'chillifront';
import configureStore from './redux/configureStore';
import Entry from './App/Entry';
export default chillifront(
	[
		/* Mods go here */
	],
	configureStore
)(Entry);
  1. Create Entry Point.
    Make sure you are in your project directory. Create a file in the App folder called Entry.jsx. Add following code to it:
import React, { Fragment } from 'react';
import { Switch } from 'react-router';

export default class extends React.Component {
	render() {
		return (
			<Fragment>
				<nav>Winning</nav>
				<Switch>{this.props.routes}</Switch>
			</Fragment>
		);
	}
}
  1. Setup Styles
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
  1. Environment Variables
    There will be a file called .env-cmdrc in your project folder root. That is one place where you set all your environment variables.

    NOTE : Remember to prefix your variables with REACT_APP_ or else they won’t be loaded into the environment.


At this point, running yarn start should give you a Hello World app in your browser. The following are optional steps if your project requires it.



  1. Importing Modules Since this project, at least at this stage, is meant for internal use within BC. Therefore, if you haven’t already, clone the repo ChilliSource.Front.Modules.

    You should copy over the following modules to the new app’s src/modules/ folder:

Then, modify your App.js:

  import chillifront from "chillifront";
  import configureStore from "./redux/configureStore";
  import Entry from "./App/Entry";
+ import PersistState from "./modules/PersistState/index";
+ import NotFoundPage from "./modules/404/index";
+ import ReduxThunk from "./modules/ReduxThunk/index";
+ import ReduxPromiseMiddleware from "./modules/ReduxPromiseMiddleware/index";

  export default chillifront(
    [
+     new PersistState(),
+     new NotFoundPage(),
+     new ReduxThunk(),
+     new ReduxPromiseMiddleware()
    ],
    configureStore
  )(Entry);

Contents