:policeman: Notice: Due to long cold-start times of Firebase functions I switched to deploy NextJS apps on Vercel. Therefore this repo is not about to be maintained anymore.

July 23, 2021 · View on GitHub

Demo

Boilerplate for React developers who wants to quick start a project in NextJS and Firebase

Build and deploy this boilerplate and start developing your project without need to build the whole infrastructure from scratch

Great for front-end developers, shipped with authentication and basic profile management out of the box

Features

Server Side Rendering and code splitting out of the box
Authentication - email/password, social sign-in providers, basic profile management
To-do list example

Stack

Firebase - Build apps fast, without managing infrastructure (database, storage, hosting, server)
NextJS - A minimalistic framework for universal server-rendered React applications
Redux - A predictable state container for JavaScript

Keeping it minimal so you can choose your tech stack

Thanks to Firebase and NextJS you can scale up as your product grows

Firebase set-up

Create a Firebase project using the Firebase Console.
Add web app to project (don't set up hosting).
Copy Firebase config keys
Create .env file in the root dir with following content (replacing with copied values):

FIREBASE_API_KEY=<your-key>
FIREBASE_AUTH_DOMAIN=<your-key>
FIREBASE_DATABASE_URL=<your-key>
FIREBASE_PROJECT_ID=<your-key>
FIREBASE_STORAGE_BUCKET=<your-key>
FIREBASE_MESSAGING_SENDER_ID=<your-key>
FIREBASE_APP_ID=<your-key>
GOOGLE_ANALYTICS_ID=<your-key>

Create Firebase database in test mode
Create Firebase storage
In auth section set up email/password sign-in method (for more methods see below)
Allow unauthenticated function invocation

In terminal

Clone or fork this repository.
Install deps npm install.
Install Firebase tools npm install -g firebase-tools
Login to Firebase firebase login
Add Firebase project firebase use --add and select your project
Deploy the app npm run deploy to Firebase hosting
npm run dev to run locally on http://localhost:3000 (Firebase functions must be deployed)

You're all set - now you can focus on actual coding of your project

You can add support for social platform sign-in providers easily.

Set it in Firebase Console -> Authentication -> Sign-in method

Security rules

Guard your data with rules that define who has access to it and how it is structured

Database (Firestore)

https://firebase.google.com/docs/firestore/security/get-started

Storage

https://firebase.google.com/docs/storage/security/start

Use rules below to allow only images up to 3 MB

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }

    match /images/{imageId} {
      // Only allow uploads of any image file that's less than 3MB
      allow write: if request.resource.size < 3 * 1024 * 1024
                   && request.resource.contentType.matches('image/.*');
    }
  }
}