/firebase-mongodb-auth-boilerplate

Firebase-MongoDb Auth w/ Next.js Custom Server

Primary LanguageJavaScript


Nextjs Firebase Mongodb w/ Custom Server deployed on Heroku

Table of contents

Why Custom Server and Firebase w/ MongoDb

  1. You can have a look example of custom server express on Vercel repo, another example with Passport.js and Next-Express.js npm package.
  2. According to Next.js documentation
  • A custom server can not be deployed on Vercel. Next.js can be deployed to any hosting provider that supports Node.js.
  • server.js doesn't go through babel or webpack.
  • A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization( means If getServerSideProps or getInitialProps is present in a page, Next.js will switch to render the page on-demand, per-request (meaning Server-Side Rendering). If the above is not the case, Next.js will statically optimize your page automatically by prerendering the page to static HTML.)
  1. Please have a look this discussion if you want to learn what are the some gotchas like:
  • With custom server you can't remap urls that are automatic static optimization.
  1. After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.

This project is improved based on this course. It is a small boilerplate auth app combination of Firebase, Mongodb, Express.js and Nextjs.

Quick Start

Add project credentials & secrets

  • .env ---> client/.env
  • .next.config.js ---> client/next.config,js
  • serviceAccountKey.json ---> firebase/serviceAccountKey.json

.env

DATABASE= '<mongodb_uri>'
PORT= 8000

.next.config.js

module.exports = {
  env: {
    api: '<your_domain>/api',
    passwordResetRedirect: '<your_domain>/login',
    NEXT_PUBLIC_FB_API_KEY: ''
    NEXT_PUBLIC_FB_AUTH_DOMAIN: ''
    FB_PROJECT_ID: ''
    FB_STORAGE_BUCKET:''
    FB_MESSAGING_SENDER_ID: ''
    FB_APP_ID:''
    DATABASE: '<mongodb_uri>' 
    PORT: 8000,
  },
};

💥 Before pushing remote create .gitignore file inside client folder and add ☝️ those files in there.

  • Make sure you have installed Node.js and npm.
  • NOTE: In the rest of the documentation, you will come across npm being used for running commands. To use yarn in place of npm for the commands, simply substitute npm for yarn. Example, npm start as yarn start. For more help, checkout migrating from npm.

Install Dependencies

cd client

npm install

Run both Express & React from root

npm run dev

Build for production

cd client

npm run build

Check in browser on http://localhost:8000/

Deploy to Heroku

This may not be ideal approach but works

git checkout -b production

git add -f .env next.config.js serviceAccountKey.json

DON'T PUSH THE PRODUCTION BRANCH TO GITHUB

Git Flow

git commit -m 'ready to deploy'

heroku create

git push heroku production:main

Once you succesfully deploy your app,

  • Go to Firebase console add your domain. Authentication / Sign-in Method / Authorized domain
  • Update <your_domain> in next.config.js with the given domain and follow ☝️ Git Flow again

If you want to rename your app follow this link

Feature Plan

  • Tailwind css
  • More helper/util functions
  • Custom hooks

Contributing

"If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome."

Links

Licensing

"The code in this project is licensed under MIT license."