Awesome

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

<a href="https://nextbase-e74ee.firebaseapp.com/">Demo</a>

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

<br /><br />

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

<br /><br />

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

<br /><br />

Firebase set-up

1. Create a Firebase project using the Firebase Console.
2. Add web app to project (don't set up hosting).
3. Copy Firebase config keys
4. Create .env file in the root dir with following content (replacing <your-key> 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>

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

<br /><br />

In terminal

1. Clone or fork this repository.
2. Install deps npm install.
3. Install Firebase tools npm install -g firebase-tools
4. Login to Firebase firebase login
5. Add Firebase project firebase use --add and select your project
6. Deploy the app npm run deploy to Firebase hosting
7. 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

<br /><br />

Social platform sign-in providers

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

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

• Set up Google sign-in method
• Set up Facebook sign-in method

<br /><br />

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/.*');
    }
  }
}

<br /><br />

More read

• Firebase
• NextJS

Nextbase was inspired by this example