react-firebase-ssr-boilerplate

React app boilerplate with server side rendering, code and styles splitting, multilingual i18n

DEMO

Instalation

npm install react-firebase-ssr-boilerplate

Usage

Initial installation

1. Install npm dependencies in the root folder.

   Run: npm install

2. Install npm dependencies in the functions folder (needed for firebase environment).

   Run: cd functions && npm install && cd ../

3. Add your config to /firebase-config.json

4. Add alias and projectId to /.firebaserc

5. Add service account data to /server/site/middleware/service-account.json

6. If you using firestore (if not just skip this step) - uncomment imports and functions in /site/client/redux/store/index.js and use firestoreConnect where you need, for example in /site/client/pages/ChatPage/Chat/Chat.js

Run project

• After initial installation you can start the project in development mode:

  npm run site:dev

• You can build the project and run it with server side rendering:

  • To run without firebase environment: npm run site:start
  • To run with firebase environment: npm run site:build && cd functions && firebase serve

• Or you can deploy the app to the firebase hosting:

  npm run site:build && cd functions && firebase deploy

Boilerplate composition

- Multilanguage internationalisation

Based on react-intl. Translation switches on change store property state.me.locale. All translations defines in messages.js file in the root of each component.

- Code splitting

Based on react-loadable and splits code for each page in routes.

- Styles splitting

Based on mini-css-extract-plugin which splits styles for each page and media-query-splitting-plugin which splits styles by media query (mobile, tabletLandscape, tabletPortrait and desktop).

- SEO

Based on react-helmet which allows to manage SEO tags (title, meta etc)