https://github.com/martyan/nextbase

Minimalistic serverless boilerplate based on NextJS and Firebase 🔥
https://github.com/martyan/nextbase

authentication boilerplate firebase full-stack minimalistic nextjs react serverless

Last synced: 3 months ago
JSON representation

Minimalistic serverless boilerplate based on NextJS and Firebase 🔥

• Host: GitHub
• URL: https://github.com/martyan/nextbase
• Owner: martyan
• Archived: true
• Created: 2019-05-28T13:01:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:52:36.000Z (almost 2 years ago)
• Last Synced: 2024-04-27T04:32:21.543Z (7 months ago)
• Topics: authentication, boilerplate, firebase, full-stack, minimalistic, nextjs, react, serverless
• Language: JavaScript
• Homepage: https://nextbase-e74ee.firebaseapp.com
• Size: 4.35 MB
• Stars: 15
• Watchers: 1
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-firebase - Nextbase - 프로젝트를 빠르게 시작하기 원하는 개발자를 위한 Next.js, Redux 및 Firebase 구성의 보일러 플레이트입니다. (웹)

README

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

### 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

 1. Create a Firebase project using the [Firebase Console](https://console.firebase.google.com).

 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  with copied values):

 ```

 FIREBASE_API_KEY=

 FIREBASE_AUTH_DOMAIN=

 FIREBASE_DATABASE_URL=

 FIREBASE_PROJECT_ID=

 FIREBASE_STORAGE_BUCKET=

 FIREBASE_MESSAGING_SENDER_ID=

 FIREBASE_APP_ID=

 GOOGLE_ANALYTICS_ID=

 ```

 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](https://cloud.google.com/functions/docs/securing/managing-access-iam#allowing_unauthenticated_function_invocation)

 





## In terminal

 1. Clone or fork this repository.

 1. Install deps `npm install`.

 1. Install Firebase tools `npm install -g firebase-tools`

 1. Login to Firebase `firebase login`

 1. Add Firebase project `firebase use --add` and select your project

 1. Deploy the app `npm run deploy` to Firebase hosting

 1. `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





## 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](https://firebase.google.com/docs/auth/web/google-signin)

- [Set up Facebook sign-in method](https://firebase.google.com/docs/auth/web/facebook-login)





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

    }

  }

}

```





## More read

- [Firebase](https://firebase.google.com/docs/web/setup)

- [NextJS](https://nextjs.org/learn/basics/getting-started)

Nextbase was inspired by [this example](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting)