NextJS & NestJS GraphQL Starter
A NextJS frontend and NestJS backend GraphQL starter pack that includes GitHub & Reddit authentication.
Is something missing?
If there is a feature missing that is used in most production-grade applications, please make an issue so we can discuss adding it in.
Features
- Google authentication
- GitHub authentication
- Reddit authentication
- Subscriptions
- Update basic profile information
- Server rendering
- Translation
- Session management
- docker-compose for client & server
Technologies
- NextJS
- Bumbag
- styled-components
- Apollo Client 3.0
- GraphQL Code Generator
- Yup
- TypeScript
- NestJS
- Mongoose
- TypeGraphQL
- react-i18next
- Docker
- React Hook Form
Getting started
-
Install the required packages
cd client && yarn cd server && yarn
-
Update the .env files in the client & server
cp client/.env.example .env cp server/.env.example .env
-
Start the server & client
cd server && yarn dev cd client && yarn dev
The client requires that the server is started so it can read the schema to run codegen. To remove that functionality, remove the predev hook in
client/package.json
Deployment
The easiest way to deploy is:
- Create a DigitalOcean droplet using the Docker image
- Setup Nginx with this guide: How To Install Nginx on Ubuntu 18.04
- Clone the repository onto the droplet
- Add your .env files with your production configuration to the client and server
- Signup for MongoDB Atlas and get your connection string
- Mode the build script to make it executable:
chmod +x ./build.sh
- Run the build script ./build.sh
- Modify and copy the supplied
nginx.conf
into/var/etc/nginx/sites-available/default
- Generate the SSL certificate with this guide: How To Secure Nginx with Let's Encrypt on Ubuntu 16.04
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
NestJS GraphQL tutorials
- Build a GraphQL Server with NestJS - https://youtu.be/bQPk4S_W-pc
- Adding MongoDB to a NestJS GraphQL Server - https://youtu.be/xnyULqzQ-Rk
- Username & password authentication - https://youtu.be/PXwnT25SZro
Support
Sign up to DigitalOcean I