Overview:
The MERN Boilerplate is a full stack boilerplate that includes React, Redux, Express, Mongoose, and Passport. It aims to streamline the development process by providing a pre-configured setup for building apps with these technologies. With features like user models with 1:N relation, CRUD REST API operations, authentication with local email/password, Facebook and Google OAuth, and JWT protected APIs, the MERN Boilerplate offers a comprehensive solution for developing web applications. It also includes features like database seed, image upload, layout components, and protected routes. The MERN Boilerplate is easy to install and comes with instructions for both development and production deployment.
Features:
- Server: User and Message models with 1:N relation.
- CRUD API: Full CRUD REST API operations for both Message and User models.
- Passport authentication: Supports local email/password, Facebook, and Google OAuth strategies, and JWT protected APIs.
- NodeJS server: Unified with React client using Babel for new JS syntax.
- async/await syntax: Used across the whole app for improved code readability.
- Joi server-side validation: Validates user input for improved data integrity.
- Image upload: Supports image upload using Multer.
- React client: Includes functional components and Hooks.
- Redux state management: Uses Thunk for async actions.
- CSS agnostic: Allows for easy customization of the CSS framework.
- Protected routes: Supports different views for unauthenticated, authenticated, and admin users.
- Edit/Delete forms: Integrated with Formik and Yup validation.
- Admin privileges: Allows admins to edit and delete users and their messages.
- Layout component: Provides a consistent layout throughout the app.
- Loading states: Includes a Loader component to display loading states.
- Single config file: Uses a single config file within the /constants folder.
Installation:
To set up the MERN Boilerplate for development, follow these steps:
- Clone the repo.
- Rename
.env.example
to.env
and fill in the necessary information, such as database connection strings, Google and Facebook tokens, JWT secret, and client and server production URLs. - Generate certificates by going to the
/server/security
folder and running the provided command. - Install the dependencies.
- Run the server, which will be available at
https://localhost:5000
. - Install the client dependencies.
- Run the dev server, and the app will load at
https://localhost:3000
.
For production deployment, refer to the Deployment on Heroku section for detailed instructions.
Summary:
The MERN Boilerplate is a powerful solution for developers who want to quickly jumpstart their full stack MERN projects. With its preconfigured setup and extensive list of features, including authentication, CRUD operations, image upload, and protected routes, developers can save time and effort in the initial stages of development. The MERN Boilerplate also provides clear installation instructions for both development and production deployment, making it accessible to developers of all levels of experience. Overall, the MERN Boilerplate is a versatile tool that can greatly simplify the development process for MERN stack applications.