REF is a React-Express-Firebase project template (aka boilerplate) for building scalable, maintainable and performant web applications.

This boilerplate is perfect for beginner 👶 , intermediate 👨 , and advanced developers 👷 looking to quick-start a project that will yield a perfect Google Lighthouse score!

Features

🔑 React - The key to scalability. Build self-documented code and create maintainable large applications.

☁️ Serverless Architecture - Combination of Firebase services (Firestore, Storage and Cloud Functions) backed by Google.

🧹 Automatic Linting - Focus on writing new features without worrying about formatting or code quality. Your code will be formatted and linted according to industry standard.

📦 Packaged - Bundle and transpile your code with ease, and have it ready to ship to any environment.

🔍 SEO - 100% SEO supported (document head tags management) for search engines that support indexing of JavaScript content.

Tech Stack

• React - 🛠 - - JavaScript library for building user interfaces.
• Node.js - 🛠️ - - A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express - 🛠️ - - A minimal and flexible Node.js web application framework.
• Firebase - 🛠️ - A mobile and web application development platform.
  • Cloud Functions
  • Firestore
  • Storage
  • Hosting
• Webpack - 🛠️ - - A static module bundler for modern JavaScript applications.
• Babel - 🛠️ - - A JavaScript compiler
• Prettier - 🛠️ - - An opinionated code formatter.
• Cypress - 🛠️ - - A JavaScript End to End Testing Framework

Directory Layout

├── build/                        # Compiled output
├── node_modules/                 # 3rd-party libraries and utilities
├── public/                       # Static files such as favicon.ico, robots.txt etc.
├── cypress/                      # Cypress e2e tests
├── server/                       # Server code (aka firebase functions)
│   ├── .eslintignore               # ESLint ignored directories and files
│   ├── .eslintrc.json              # ESLint configuration
│   ├── .snyk                       # Snyk configuration
│   ├── index.js                    # Server code entry point
├── src/                          # Application source code
│   ├── assets/                     # Application assets (css, images, fonts, etc.)
│   ├── components/                 # React Components
│   ├── utils/                      # Additional utilities
│   ├── index.js                    # Client code entry point
│   ├── package.json                # The list of project dependencies + NPM scripts
├── .babelrc                      # Babel configuration
├── .browserslistrc               # Targeted browsers
├── cypress.json                  # E2E testing configuration
├── .eslintignore                 # ESLint ignored directories and files
├── .eslintrc.json                # ESLint configuration
├── .firebaserc                   # Project aliases
├── .prettierignore               # Prettier ignored directories and files
├── .prettierrc                   # Prettier configuration
├── .travis.yml                   # TravisCI configuration
├── firebase.json                 # Firebase configuration
├── firestore.indexes.json        # Manage Firestore indexes
├── firestore.rules               # Firebase database security rules
├── postcss.config.js             # Postcss configuration
├── storage.rules                 # Firebase storage security rules
├── webpack.common.js             # Webpack configuration used in both dev & prod
├── webpack.dev.js                # Webpack configuration used ONLY in dev
├── webpack.prod.js               # Webpack configuration used ONLY in prod
└── package.json                  # The list of project dependencies + NPM scripts

Getting Started

Installation

$ git clone https://github.com/gurveerdhindsa/ref.git MyApp
$ cd MyApp
$ npm install                      # Installs client dependencies
$ cd server
$ npm install                      # Installs sever dependencies

Firebase setup

First, create a project

Then, update your local environment:

$ cd MyApp
$ touch .env                       # Create a local environment file in the root directory

# Paste your firebase project configuration in the .env file as such:
API_KEY: "XXXXXXXX"
AUTH_DOMAIN: "XXXXXXXX.firebaseapp.com"
DATABASE_URL: "https://XXXXXXXX.firebaseio.com"
PROJECT_ID: "XXXXXXXX"
STORAGE_BUCKET: "XXXXXXXX.appspot.com"
MESSAGING_SENDER_ID: "XXXXXXXX"
APP_ID: "XXXXXXXX"
MEASUREMENT_ID: "XXXXXXXX"

Scripts

$ npm start                       # Runs client code with live-reload
$ npm run build                   # Compile a production build
$ npm run lint                    # Prettify and lint project files
$ npm run server                  # Runs server code with live-reload
$ npm run deploy-client           # Compile a production build & deploy client code to Firebase
$ npm run deploy-server           # Deploy server code to Firebase
$ npm run test:cypress            # Execute e2e tests

Feel free to fork this repo and create a workflow to your own liking!