Giter VIP home page Giter VIP logo

nextjs-pwa-firebase-boilerplate's Introduction

Next.js serverless PWA with Firebase and React Hooks

nextjs-pwa-firebase-boilerplate demo on phone

Note: this is my v4 boilerplate for React web apps. See also nextjs-pwa-graphql-sql-boilerplate, nextjs-sql-rest-api-boilerplate and nextjs-express-mongoose-crudify-boilerplate.

Why is this awesome?

This is a great template for a any project where you want React (with Hooks) (with server-side rendering, powered by Next.js) as frontend and Firebase as backend. Lightning fast, all JavaScript.

  • Great starting point for a PWA (Progressive Web App).
  • Can be deployed as serverless functions on Vercel/Zeit Now.
  • The new Firebase database, Cloud Firestore, as database.
  • Login/Signup with Firebase Authentication.
  • React Hooks for business logic.
  • Free-form database model. No GraphQL or REST API, just add React Hooks and modify [page].getServerSideProps (for server-side rendering, SSR) when changing/adding database tables.
  • PWA features such as manifest.json and offline support (next-offline).
  • Easy to style the visual theme using CSS (e.g. using Design Profile Generator).
  • sitemap.xml and robots.txt support.
  • Google Analytics and google-site-verification support (see config/config.js).
  • Flexible configuration with config/config.js and .env.local file.
  • Code linting and formatting with StandardJS (yarn lint/yarn fix).
  • Unit testing with Jasmine (yarn unit, not yet included).
  • Great page speed, see Lighthouse score:

Lighthouse score

Demo

See nextjs-pwa-firebase-boilerplate running on Vercel/Zeit Now here.

nextjs-pwa-firebase-boilerplate demo on phone

Deploying

Setup and deploy your own project using this template with Vercel. All you'll need is your Firebase Public API Key.

Deploy with Vercel

How to use

Note: If you set up your project using the Deploy button above, you only need to clone your own repo instead of this repository.

Clone this repository:

git clone https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate.git [MY_APP]

Remove the .git folder since you want to create a new repository

rm -rf .git

Install dependencies:

cd [MY_APP]
yarn  # or npm install

Set up the database:

Configure the .env.local file.

Start it by doing the following:

yarn dev  # or 'yarn vercel' to run with Vercel/Zeit Now serverless

In production:

yarn build
yarn start

If you navigate to http://localhost:3004/ you will see a web page with a list of articles (or an empty list if you haven’t added one).

Modifying the app to your needs

Change app name

Do search/replace for “nextjs-pwa-firebase-boilerplate” to something else.

Change name in public/manifest.json

Renaming “Article” to something else

The database item is called “Article”, but you probably want something else in your app.

Rename the files:

mv hooks/articles.js hooks/{newName}s.js

mkdir -p components/{newName}s
mv components/articles/ArticleList.js components/{newName}s/{NewName}List.js
mv components/articles/ArticleListItem.js components/{newName}s/{NewName}ListItem.js
mv components/articles/ArticleDetails.js components/{newName}s/{NewName}Details.js
rm -r components/articles

mkdir pages/{newName}s
mv "pages/articles/[article].js" "pages/{newName}s/[{newName}].js"
rm -r pages/articles

Then, do search/replace inside the files for different casing: article, Article, ARTICLE.

Change port number

Do search/replace for “3004” to something else.

How to remove/replace database

Delete lib/firebase.js and modify hooks/articles.js.

Change visual theme (CSS)

  1. Change colors in public/manifest.json
  2. Change CSS in public/app.css
  3. Change font(s) in PageHead.js

Login/Signup with Firebase Authentication

You need to enable Email/Password authentication in https://console.firebase.google.com/u/0/project/MYAPP/authentication/providers

TODO: add SSR support: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.