Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JithinAntony4/nextjs-pwa-boilerplate
🔥 NextJS Boilerplate with hybrid static & server rendering, TypeScript support, route pre-fetching, PWA support, FCM integration, SendGrid integration, Twilio integration, and Google SignIn
https://github.com/JithinAntony4/nextjs-pwa-boilerplate
boilerplate fcm-push-notification firebase firestore google-auth google-sign-in hacktoberfest hacktoberfest2022 nextjs pwa pwa-app pwa-boilerplate react sendgrid twilio typescript
Last synced: about 1 month ago
JSON representation
🔥 NextJS Boilerplate with hybrid static & server rendering, TypeScript support, route pre-fetching, PWA support, FCM integration, SendGrid integration, Twilio integration, and Google SignIn
- Host: GitHub
- URL: https://github.com/JithinAntony4/nextjs-pwa-boilerplate
- Owner: JithinAntony4
- License: mit
- Created: 2021-05-10T11:09:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-01T06:45:47.000Z (about 2 years ago)
- Last Synced: 2024-09-18T10:02:22.529Z (3 months ago)
- Topics: boilerplate, fcm-push-notification, firebase, firestore, google-auth, google-sign-in, hacktoberfest, hacktoberfest2022, nextjs, pwa, pwa-app, pwa-boilerplate, react, sendgrid, twilio, typescript
- Language: TypeScript
- Homepage: https://nextjs-pwa-boilerplate.vercel.app/
- Size: 582 KB
- Stars: 21
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Start your NextJS PWA project in seconds.
## Features
* Material UI
* Firebase Cloud Messaging (with Push Notification)
* Typescript Support
* PWA Support
* Authentication (Google Sign-In)
* Cloud Firestore
* Twilio
* SendGrid
## Prerequisites
* [Firebase](https://firebase.google.com/)
* OAuth client ID (from [Google Cloud Platform](https://console.cloud.google.com/))
* [Sendgrid](https://sendgrid.com/) (Optional, if you aren't use)
* [Twilio](https://twilio.com/) (Optional, if you aren't use)
## Installation
To install **NextJS-PWA-Boilerplate**, follow these steps:
Download Repo:
``` shell script
git clone https://github.com/JithinAntony4/nextjs-pwa-boilerplate your-project-name
```
Install Dependencies:
``` shell script
npm install
# or
yarn install
```
Add Firebase to your web app:
`Goto Firebase Console -> Project Settings -> General -> your apps`, Click **Add App**
and download the config which will used in this project.
And update `public/firebase-messaging-sw.js` with these credentials.
Download Firebase Admin SDK Config:
`Goto Firebase Console -> Project Settings -> Service accounts -> Firebase Admin SDK`
Click **Generate new private key**, then copy that values and paste into `.env`
Create & Configure `.env`:
``` dotenv
NODE_ENV=[production||development]
TOKEN_SECRET=your_secret_key (which will used for encryt sessions)
SENDGRID_API_KEY=your_sendgrid_api_key
FROM_MAIL=from_email_from_sendgrid
TWILIO_FROM=phone_no
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
AUTH_COOKIE_TOKEN_NAME=cookie_name
AUTH_COOKIE_TOKEN_AGE=28800(in mileseconds)
# use the values from firebase-config.json
PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
PUBLIC_FIREBASE_PROJECT_ID=your-project
PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=0123456789
PUBLIC_FIREBASE_APP_ID=0123456789
PUBLIC_FIREBASE_MESUREMENT_ID=0123456789
PRIVATE_FIREBASE_TYPE=place_your_value
FIREBASE_PRIVATE_KEY_ID=place_your_value
FIREBASE_PRIVATE_KEY=place_your_value
PRIVATE_FIREBASE_CLIENT_EMAIL=place_your_value
PRIVATE_FIREBASE_CLIENT_ID=place_your_value
PRIVATE_FIREBASE_AUTH_URI=place_your_value
PRIVATE_FIREBASE_TOKEN_URI=place_your_value
PRIVATE_FIREBASE_AUTH_PROVIDER_x509_CERT_URL=place_your_value
PRIVATE_FIREBASE_CLIENT_x509_CERT_URL=place_your_value
GOOGLE_AUTH_CLIENT_ID=your_google_auth_client_id (from GCP Console)
```
## Usage
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
## Contributing to NextJS-PWA-Boilerplate
To contribute to NextJS-PWA-Boilerplate, follow these steps:
1. Fork this repository.
2. Create a branch: `git checkout -b `.
3. Make your changes and commit them: `git commit -m ''`
4. Push to the original branch: `git push origin /`
5. Create the pull request.
Alternatively see the GitHub documentation on [creating a pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
## Contributors
Thanks to the following people who have contributed to this project:
* [@JithinAntony4](https://github.com/JithinAntony4) 💻 📖 🎨
## Credits
* [create-next-app](https://www.npmjs.com/package/create-next-app)
* [next-pwa](https://www.npmjs.com/package/next-pwa)
* [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons)
* [@material-ui/core](https://www.npmjs.com/package/@material-ui/core)
* [@material-ui/lab](https://www.npmjs.com/package/@material-ui/lab)
* [firebase](https://www.npmjs.com/package/firebase)
* [firebase-admin](https://www.npmjs.com/package/firebase-admin)
* [localforage](https://www.npmjs.com/package/localforage)
* [passport](https://www.npmjs.com/package/passport)
* [twilio](https://www.npmjs.com/package/twilio)
* [nodemailer](https://www.npmjs.com/package/nodemailer)
* [@hapi/iron](https://www.npmjs.com/package/@hapi/iron)
* [next-connect](https://www.npmjs.com/package/next-connect)
* [swr](https://www.npmjs.com/package/swr)
* [react-google-login](https://www.npmjs.com/package/react-google-login)
## License
This project is licensed under the MIT license, Copyright (c) 2021 [Jithin Antony](https://jithin.co/). For more information see LICENSE.md.