Last updated: September 22nd, 2019

MERN Stack for Production + Ant Design + GraphQL + Next.js + JSX in Markdown

If you're like me, you started your React journey using create-react-app. This works fine for a local development environment, but making the transition to a production web app has many drawbacks, such as no default way to handle SSR or code splitting.

Everyone wants their website to rank highly in Google Search. This means creating an engaging web app experience for your users. Modern web apps are expected to have a minimum feature set such as a persistent data store, pretty text formatting, responsive components, optimized images, CDN integration, progressive web app support, and SEO where applicable.

Implementing this functionality from scratch using create-react-app is extremely time consuming! That is why I have open sourced my web dev stack template which contains sensible defaults for web apps implementing MongoDB, Express, React, & Node.js, otherwise known as the MERN stack.

🍔 Tech Stack

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

This web app template achieves a perfect score in the Google Lighthouse Audit.

I also took the liberty of improving 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 environment.

Although this template uses MongoDB, adding support for a managed PostgreSQL such as AWS Aurora is as trivial as rewriting the database logic inside the REST API endpoints. This is recommended as at the time of writing, MongoDB storage prices are significantly higher than PostgreSQL.

This template includes examples on how to securely insert into a database using REST endpoints as well as querying data from a serverless GraphQL endpoint. I included these two options because RESTLess adoption for GraphQL is not at a critical mass. Forward looking web developers will consider implementing their website APIs using GraphQL.

This template uses the LESS architecture: RESTLess, serverless, .LESS (CSS preprocessor). With very little work this template could be extended to add a headless CMS, such as Ghost.

In this example, I deploy to Zeit Now, but serverless architecture allows your website to be abstracted to a collection of Javascript based Lambda endpoints than can be ran on any Lambda provider, such as AWS.

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.

⚠️ Requirements

• yarn
• now-cli
• MongoDB Atlas Account

🔧 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

At this point, the project will run and display our website at localhost:3000, but the MongoDB + REST API Demo Component will fail to add your email address to the MongoDB database. To fix this, we need to give the project access to our MongoDB database. To do this, we use environment variables.

🗝 Configuring environment variables

Following best security practices, we reference sensitive credentials such as API keys or URIs as environment variables so they stay local during development & in a secure environment in production. In debug mode, we place our credentials inside of a .env file in the root of the project using the following form:

MONGODB_URI=<your_mongo_db_uri_here>

In production, we are going to use Now Secret.

If this is your first time using now-cli, you will first have to login before having access to Now Secret.

now login

Add sensitive credentials to your production environment as follows:

now secrets add mongodb_uri variable_value

Now Secret automatically converts variable names to all lower case, so regardless of if I used VARIABLE_NAME or Variable_Name, they would both map to variable_name Now Secrets are only available server side to prevent clients from gaining access to your sensitive credentials. The template is already configured via now.json to look for a variable called mongodb_uri on Now Secrets.

🚀 Deploy to Production

now --prod

🎉 Congratulations! Your website is now deployed!

🚧 Roadmap

There were a number of features I wanted to integrate but faced roadblocks due to Ant Design's handling of LESS/CSS styles.

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