Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Overview

MERN-GQL-START

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

Getting Started

  • Add a .env file to server directory to run locally. Use server/.env.example as a template.

  • npm start script: Production startup. Only runs backend server.

  • npm run develop script: Uses concurrently to run the back-end with nodemon and launches the create-react-app development server for front-end development. concurrently runs these within the same terminal. Logging is tagged with [server] or [client].

  • npm run client script: Launches the create-react-app development server for the client only. Will not start back-end.

  • npm run server script: Starts the back-end server with nodemon for easy development without launching the client.

  • The npm install script: Installs all dependencies for root as wells as client and server.

  • The npm run build script: Runs create-react-app build script to create client bundles and assets.

Deploying to Heroku

  • Requires a MongoDB server. MongoDB Atlas is a fairly easy choice for this requirement. Create an Atlas account and setup a database.

  • Add the following values to the Heroku config for the app:

    • SECRET - used for signing and verifying tokens
    • MONGODB_URI - used for connecting to MongoDB service
  • Push your code to GitHub

  • Connect your Heroku app with GitHub or push code directly to Heroku. (See Deploying Node.js Apps on Heroku)

Apollo Server

This project uses apollo-server-express v 3.x which means GraphQL Playground (deprecated) is not included. Instead, Apollo Server 3 uses Apollo Studio as a development tool for building your api. If you would like to use GraphQL Playground, refer to this guide to enable the tool.

Create React App

The client for this project is built with the create-react-app tool chain. The README file generated by create-react-app has been preserved. See client/README.md for details about the tools.

You might also like...
An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend.

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript. In addition, the web application can be built as Docker image using a multi stage built supported Dockerfile.

Learning to create environment for full stack serverless development using React and API (FARM)

page_type languages products description urlFragment sample javascript typescript azure functions Apps that can be used with as a starting point for s

NestJS boilerplate. Auth, TypeORM, Postgres, Docker. React, Webpack, Monorepo

NestJS boilerplate. Auth, TypeORM, Postgres, Docker. React, Webpack, Monorepo

Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Kontenbase: create backend API, auth, and storage in less than 1 minute without coding
Kontenbase: create backend API, auth, and storage in less than 1 minute without coding

No Code Backend API, Fast and Easy! Kontenbase allows you to easily create backe

MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance

MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance. JWT Authentication – Hook Up with ASP.NET Core 3.1

This is a fully functional google search engine book it was created with Restful API and i refactored it to the GraphQL built with Apollo server with the use of the MERN stack with react front end MongoDB database, Node.js, Express and API A FULLSTACK Web Application built using MERN Stack (MongoDB, Express, React, Nodejs)
A FULLSTACK Web Application built using MERN Stack (MongoDB, Express, React, Nodejs)

Socialize This is a FULLSTACK MERN Website. This Website uses Reactjs on the Fro

Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

🤘 MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

Owner
John Desrosiers
Web Developer/Instructor: JavaScript/Node/React
John Desrosiers
Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Scott Jason 7 Sep 21, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Victor Lira 33 Nov 20, 2022
null 19 Nov 13, 2022
Create-t3-app - Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack

create-t3-app Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack Usage npm npx create-t3-app@lat

T3 Open Source 12.5k Jan 2, 2023
Buzzer Full Stack Development Assessment uses React and NodeJS to mimic social media functions

Buzzer-Full-Stack-Development-Assessment This project is a coding challange prov

null 2 Jan 16, 2022
This a full MERN stack ecommerce website for tool rentals.

Alamo Tools Table of Contents Description Installation Contributing Technologies Questions Description This a full stack ecommerce website for tool re

Benicio Lopez 3 Jul 2, 2022
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 208 Jan 8, 2023
A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

Palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly on new projects. Commands: npm ins

Palo IT Singapore 10 Oct 31, 2022
MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps

MERN Stack Boilerplate MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript. Create New MERN App

MERN Stack Boilerplate 1 Nov 8, 2021
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

ahmed 8 Dec 1, 2022