Meangular icon indicating copy to clipboard operation
Meangular copied to clipboard

Open-source MEAN stack solution based on Mean Stack JS and Angular-cli for Angular (2+).

Build Status

Meangular

Full-stack solution based on Mean Stack JS (readme documentation included below) and Angular-cli (now @angular/cli).

Meangular currently uses Angular 4.

Out-of-the-box features:

  • User
    • Profile
      • Photo upload
    • Authentication and Authorization
      • Optional third-party login/signup using Google Oauth2
  • Blog
    • Lazy loaded
    • Create, Edit, and Delete by author or admin
      • Deactivation guards when navigating away after form change
    • Pagination
      • Sorting
      • Limit
      • Filter by user
    • Full-text search using title
  • Admin
    • lazy loaded
  • Unit tested front-end and back-end
  • End-to-end tested
  • Linted front-end and back-end code
  • Database seeding
  • Debug support with Visual Studio Code, just switch to debug pane and choose debug type (Launch Chrome or Launch Node) and hit F5.

Demo

Try it live

Notes

Angular files found in /client/src.

To use Google Oauth2 authentication flow for login/signup, set the client id, client secret, and redirect url in the /configs/environments/*.js file(s) you will be using or set them as environment variables on GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_REDIRECT_URL before running the app. If this information is not present, the Google login/signup links will result in a 404. If login through google is not being used these links can be deleted.

# Install (Note: Using yarn install sometimes results in version mismatch which
# will make ahead-of-time compilation fail for production)
npm install

# Start in development mode and watch for changes on server and frontend
# using nodemon, angular-cli, and livereload. 
npm start

# Start browser-sync
npm run browser-sync

# Run frontend and backend unit tests, e2e tests, and linting
npm test

# Build production frontend files and run e2e tests
npm run e2e

# Run e2e dev mode (assumes frontend files built and in /client/dist)
npm run e2e:dev

# Run angular-cli
# Usage: npm run ng test -- --single-run
npm run ng

# Build frontend files in production mode and then run server in production mode
npm run start:prod

# Seed database with users and blog entries (Users and Blog entries can be added
# in /seed/data/users.js and /seed/data/blogs.js. Note: Node 7.6+ required for this feature).
npm run seed

Mean Stack JS Documentation

Why Mean Stack JS

The best developers want to be efficient and productive, quickly prototyping and experimenting, able to build successes into production-ready applications. We believe Mean Stack JS gives developers of all skill levels—whether at enterprise scale or working solo—an ideal open-source toolset for building rapid, scalable Javascript applications. We'll provide you a simple project structure that is versatile enough to quickly apply to your own development projects. Want to get started?

How to Learn Mean Stack JS

Start learning with documentation:

Start visualizing what the meanstack can do for you with our demo

Check out this YouTube channel that has content to help you:

For more control or something more basic, start here instead:

For the Api version, start here instead:

Want more content?

What is Mean Stack JS?

  • MongoDB - MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable
  • Express - Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications
  • AngularJS - based framework. -AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop
  • Node.js - Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications

Check Demo Here

Check Documentation Here

Pre-Requisites

Check Documentation Here

Check Demo Here

Getting Started

The easiest way to get started is to clone the repository:

# Get the latest snapshot
git clone https://github.com/greenpioneersolutions/meanstackjs.git

# Change directory
cd meanstackjs

# Install NPM dependencies
npm install

# Start up the server
npm start
# or
node index.js

Check Documentation Here

Check Demo Here

Check Roadmap Here

MIT © Green Pioneer