rsnext/examples/with-firebase
leung018 66597be8a7
Add .yarn/install-state.gz to .gitignore (#56637)
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.

### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.

If this change is agreed upon,  it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
2023-10-18 16:34:48 +00:00
..
context feat: update firebase in with-firebase (#29581) 2022-02-06 18:01:16 +00:00
fetchData with-firebase example for SSR (#16070) 2020-11-24 19:57:23 +00:00
firebase feat: update firebase in with-firebase (#29581) 2022-02-06 18:01:16 +00:00
pages Run next/link codemod for Next.js 13 on examples (#41913) 2022-10-30 21:00:45 +01:00
public Rename ZEIT to Vercel (#12075) 2020-04-21 11:47:12 +02:00
.env.local.example with-firebase example for SSR (#16070) 2020-11-24 19:57:23 +00:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
package.json Update Examples to use React 18 (#42027) 2022-10-28 17:43:20 +00:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
vercel.json Update instances of Now to Vercel where applicable (#13760) 2020-06-04 14:57:17 +00:00

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

Deploy the example using Vercel:

Deploy with Vercel

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

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

  2. 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_EMAIL and FIREBASE_PRIVATE_KEY in .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.