Skip to content

πŸš€ A fast, feature-rich, and privacy preserving serverless web app template using the MERN stack with Ant Design, GraphQL, JSX in Markdown, and Next.js

License

Notifications You must be signed in to change notification settings

timothymiller/full-stack-2019

Repository files navigation

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

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

πŸ” Tech Stack

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

πŸ’Ž Features

Perfect Lighthouse score|52x37

πŸš€ 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

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