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

Usage no npm install needed!

<script type="module">
  import reactFirebaseSsrBoilerplate from '';



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


Npm Version Month Downloads Npm Licence


npm install react-firebase-ssr-boilerplate


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 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).


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