rsnext/examples/with-firebase
julianbenegas f1944cad88
With Firebase Client-Side example (#11053)
* initialized example

* Import from "firebase/app"

to get only needed firebase modules

* credentials as env variables
Also, initialize app in a separate file. Much cleaner.

* Update examples/with-firebase-client-side/package.json

Co-Authored-By: Luis Alvarez D. <luis@zeit.co>

* fixed environment variables and added .env.example

* added dotenv

* Updated readme

* Renamed example in the readme

* Renamed example files

* Updated title

Co-authored-by: Luis Alvarez D. <luis@zeit.co>
2020-03-20 15:38:28 -05:00
..
context With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
firebase With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
pages With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
public With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
.env.example With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
.gitignore With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
next.config.js With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
now.json With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
package.json With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00
README.md With Firebase Client-Side example (#11053) 2020-03-20 15:38:28 -05:00

With Firebase

This is a simple set up for Firebase for client side applications.

The firebase app is initialized in firebase/clientApp.js, to use you just have to import it anywhere in the app

The React Context API is used to provide user state.

Deploy your own

Deploy the example using ZEIT Now:

Deploy with ZEIT Now

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-firebase with-firebase-app
# or
yarn create next-app --example with-firebase with-firebase-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase
cd with-firebase

Configuration

  1. Create a Firebase project and add a new app to it.
  2. Create a .env file and copy the contents of .env.example into it:
cp .env.example .env
  1. Set each variable on .env with your Firebase Configuration (found in "Project settings").

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with ZEIT Now (Documentation).