MERN + Ant Design + GraphQL + Next.js Production Template

Deploying web apps to production is hard. This GPLv3-licensed open source template contains sensible defaults for web apps implementing MongoDB, Express, React, & Node.js, otherwise known as the MERN stack.

This template improves upon a pure MERN stack by including nice-to-have technologies, such as Ant Design, GraphQL, TypeScript, LESS, and JSX in Markdown. I include example components demonstrating how the frontend & backend interact, following best practices in a serverless enviornment.

I use this template as a starting point for all my web apps. If this template helps you, please consider leaving me an endorsement on LinkedIn.

🔧 How to setup

git clone https://github.com/timothymiller/mern-ant-design-graphql-next-template.git
cd mern-ant-design-graphql-next-template
yarn
yarn dev

⚠️ Requirements

• yarn
• now-cli
• MongoDB Atlas Account

🍔 Tech Stack

• MongoDB, MySQL, or PostgreSQL
• Express
• React
• Node

💎 Features

• Ant Design
  • Crisp, Fresh Component Library
• GraphQL
  • Modern query language
  • RESTLess example
    • Query data with GraphQL (client and/or server side)
• RESTful example
  • Receiving form data via POST request
  • Inserting into MongoDB
• Serverless database options
  • MongoDB (MongoDB Atlas) ✅ (used in examples)
  • MySQL (AWS Aurora)
  • PostgreSQL (AWS Aurora) ⚠️
    • Example GraphQL datasource for PostgreSQL database
  • Optional GraphQL query caching AWS Elastic Cache (Redis)
• No vendor lock-in
  • Runs on open source software
  • Serverless Node.js
    • AWS Lambda
    • Zeit Now
    • Firebase Functions
    • Heroku
  • Static images are optimized at build time before delivery to CDN. (No Cloudinary necessary)
• TypeScript (.ts, .tsx)
• Less (.less)
• JSX in Markdown (.md, .mdx)
  • Great for news articles or blogging content
• Next.js
  • Automatic Express routing for Node.js scripts placed in /pages/api/
  • Automatic SSR or Static Rendering depending on call to getInitialProps
  • Optimized images
    • Serve images in next-gen formats - Convert JPEG/PNG to WebP on the fly
    • Properly size images - Resize images on the fly
    • Efficiently encode images for CDN deployment
    • Progressive image loading
    • Optimizations for GIF & SVG files
  • Easily add AMP support
  • Webpack Bundle Analyzer
  • And much more...
• Google Lighthouse audit Perfect 100 score in all categories
  • Performance
  • Accessibility
  • Best Practices
  • SEO
  • Progressive Web App (PWA)

🚀 Deploy to Production

Defaults

• Node API scaling is handled automatically when targeting serverless deployment to Now by ZEIT.

• Resources inside of /static/ are deployed to the in-house CDN managed via Now by ZEIT.

now login
now -e MONGODB_URI="<replace_with_your_mongodb_uri>" --prod

🚧 Roadmap

• Locally scoped CSS modules (Ant Design requires globally scoped styles)
• Remove unused CSS with next-purgecss once Ant Design is supported
• Typography.js integration

🔬 Tutorials

How to setup MongoDB

Create an account on MongoDB Atlas and create a free tier managed database.

Copy the connection string for accessing the database.

Replace username & password with your database credentials.

Create a file called '.env' (no single quotes) in the root directory with the following text

MONGODB_URI=your_mongodb_uri_here

Replace your_mongodb_uri_here with the uri provided for the database you created from MongoDB Atlas.

Sensitive credentials must be stored with adequate security in a production enviornment. For this, I use Now Secrets. Add an environment variable called MONGODB_URI to your web app for accessing your MongoDB instance by executing the following command:

now secrets add MONGODB_URI your_mongodb_uri_here

Now handles loading enviornment variables into your runtime config behind the scenes. To allow Now to manage your secrets in development mode, use

now dev

instead of

yarn dev

• Checkout /api/add-email-subscriber & /components/EmailListForm for examples on interacting with MongoDB in a serverless MERN stack.

Read more

How to setup GraphQL

Under apollo/datasources/MyAPI.js

this.baseURL = 'https://template.timknowsbest.com/api/';

must be changed to

this.baseURL = 'http://localhost:3000/api/';

to debug using your local API server for GraphQL queries.

Read more

License

This Template is licensed under the GNU General Public License, version 3 (GPLv3) and is distributed free of charge.

Author

Timothy Miller

• GitHub: https://github.com/timothymiller 💡

• Website: https://timknowsbest.com 💻

• Donation: https://timknowsbest.com/donate 💸