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
Run the command below:
npx bc-starter-template <project-directory>
When promted, choose the modules you need and then off you go.
Install boilerplate
create-react-app <YOUR_APP_NAME_IN_SMALL_CASE>
Change into the target directory created above and then
yarn add chillifront
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);
}
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);
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>
);
}
}
node-sass-chokidar
: yarn add npm-run-all node-sass-chokidar -D
package.json
and remove the start
and build
scripts. Paste the following code in its place:"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",
.env-cmdrc
in your project folder root. That is one place where you set all your environment variables. REACT_APP_
or else they won’t be loaded into the environment.yarn start
should give you a Hello World app in your browser. The following are optional steps if your project requires it.
src/modules/
folder:PersistState
404
ReduxThunk
ReduxPromiseMiddleware
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);