Moai created by Mr. Bozo from thenounproject.com.
Giants Boilerplate
If I have seen further than others, it is by standing upon the shoulders of giants. - Issac Newton
- About Giants: https://medium.com/@harrison0723/giants-boilerplate-86f9f03ab4e2
- Live demo: https://giants-app.firebaseapp.com/
Features
- No server code: Giants uses Google’s Cloud Firestore for backend.
- No redux code: Giants integrates with redux-firestore and redux-form.
- No build config: Giants is based on Facebook’s create-react-app.
- No grunt work: Giants has auth, loading, error state all covered.
- Minimum UI code: Giants uses Alibaba’s Ant Design for React.
- Scalable: Giants implements code-splitting by react-loadable.
- Maintainable: Giants has a shallow, component-like file structure.
Shut up, show me the app
Clone the repository
git clone https://github.com/harrison0723/giants-boilerplate
Install dependencies
yarn install
Build development
yarn start
Build test
yarn test
Customization
Backend
- Go to your Firebase console and create an app
- Enable authentication (Email) and Firestore database
- Replace Firebase config in
src/firebase.js
Styles
- Always give your container component a className
- Properly scope your styles with
.containerClassName .yourClassName - Override Ant Design components with
.yourClassName.antdClassName
Forms
Use the render() function in /common/tools to pass Ant Design fields into redux-form
Architecture
Giants boilerplate sorts files by feature rather than by type. Every new feature employs a folder in /src with a local architecture as follows:
/feature
|--/components
|--actions.js
|--feature.css
|--feature.js
|--feature.spec.js
Note: the /components folder stores all presentational components for the feature.
Deploy
Build production
yarn build
Deploy to Firebase Hosting
- Install Firebase CLI
yarn install -g firebase-tools
- Login to your Firebase account
firebase login
- Deploy
firebase deploy
Note: Use /build path instead of the default /public path when asked in step 3.