61f56f997c
2.2 KiB
Firebase Example
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
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-firebase with-firebase-app
yarn create next-app --example with-firebase with-firebase-app
pnpm create next-app --example with-firebase with-firebase-app
Configuration
- Create a Firebase project and add a new app to it.
- Create a
.env.localfile and copy the contents of.env.local.exampleinto it:
cp .env.local.example .env.local
-
Set each variable on
.env.localwith your Firebase Configuration (found in "Project settings"). -
If you want to check the SSR page, get your account credentials from the Firebase console at Project settings > Service accounts, where you can click on Generate new private key and download the credentials as a json file. Then set
FIREBASE_CLIENT_EMAILandFIREBASE_PRIVATE_KEYin.env.local
Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
Deploy Your Local Project
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.