Next.js serverless PWA template with just Firebase and React Hooks
source link: https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Next.js serverless PWA with Firebase
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 asserverless functions on Vercel/Zeit Now.
- The new Firebase database, Cloud Firestore , as database.
- 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
, not yet included). - Easy to style the visual theme using CSS (e.g. using Design Profile Generator ).
-
sitemap.xml
androbots.txt
support. - Google Analytics and
google-site-verification
support (seeconfig/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:
Demo
See nextjs-pwa-firebase-boilerplate running on Vercel/Zeit Now here .
How to use
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).
Deploying serverless (on Vercel/Zeit Now)
Configure database:
vercel env add NEXT_PUBLIC_FIREBASE_API_KEY
Run in development mode with:
yarn vercel
Deploy to Now with:
yarn deploy
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}.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)
public/manifest.json public/app.css PageHead.js
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK