All Projects → aturingmachine → Mevn Stack

aturingmachine / Mevn Stack

Licence: mit
A Quickstart for building an Express API with a VueJS Admin Portal

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Mevn Stack

Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+608.43%)
Mutual labels:  mongodb, express, expressjs, full-stack, boilerplate
Mern Stack Authentication
Secure MERN Stack CRUD Web Application using Passport.js Authentication
Stars: ✭ 60 (-66.29%)
Mutual labels:  mongo, mongodb, express, expressjs
Mean Stack Angular6 Crud Example
MEAN Stack Angular 6 CRUD Web Application
Stars: ✭ 69 (-61.24%)
Mutual labels:  mongo, mongodb, express, expressjs
Mean Angular4 Chat App
MEAN stack with Angular 4 Chat App
Stars: ✭ 41 (-76.97%)
Mutual labels:  mongo, mongodb, express, expressjs
Mern
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
Stars: ✭ 175 (-1.69%)
Mutual labels:  mongodb, express, expressjs, boilerplate
Node Production
Take Your Node.js Project to The Production Environment (VPS/Dedicated Server).
Stars: ✭ 35 (-80.34%)
Mutual labels:  mongo, mongodb, express, expressjs
Mevn Boilerplate
A fullstack boilerplate with Mongo, ExpressJS, VueJS and NodeJS.
Stars: ✭ 277 (+55.62%)
Mutual labels:  mongodb, expressjs, full-stack, boilerplate
Rest Api Nodejs Mongodb
A boilerplate for REST API Development with Node.js, Express, and MongoDB
Stars: ✭ 672 (+277.53%)
Mutual labels:  mongodb, express, expressjs, boilerplate
Mean Angular5 Passport Authentication
Securing MEAN Stack (Angular 5) Web Application using Passport Authentication
Stars: ✭ 24 (-86.52%)
Mutual labels:  mongo, mongodb, express, expressjs
Mean Stack Angular5 Crud
MEAN Stack (Angular 5) CRUD Web Application Example
Stars: ✭ 107 (-39.89%)
Mutual labels:  mongo, mongodb, express, expressjs
Icinema
A Full Stack MERN app with CRUD operations for theatres where users can search for movies that are available and admin can add a movie to the list and much more.
Stars: ✭ 51 (-71.35%)
Mutual labels:  mongodb, express, boilerplate
Express Mvc Boilerplate
A simple mvc boilerplate for express.js (gulp + expressjs + nodemon + browser-sync)
Stars: ✭ 46 (-74.16%)
Mutual labels:  mongodb, express, boilerplate
Node Express Postgresql Server
Basic Node with Express + PostgreSQL Server
Stars: ✭ 74 (-58.43%)
Mutual labels:  express, expressjs, boilerplate
Mern
🎉 This is boilerplate for MERN stack with integrations like Redux and SSR 🎉
Stars: ✭ 77 (-56.74%)
Mutual labels:  mongodb, expressjs, boilerplate
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-82.02%)
Mutual labels:  mongodb, express, boilerplate
Mern Mediastream
A MERN stack based media streaming application [Full-Stack React Projects]
Stars: ✭ 98 (-44.94%)
Mutual labels:  mongodb, expressjs, full-stack
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: ✭ 112 (-37.08%)
Mutual labels:  mongodb, express, boilerplate
Fraternate
Fraternate is a standalone copy of the GitHub organization and user interaction framework. Built with Mongo dB | Node.js® | Express.js | Handlebars.js | Bootstrap.
Stars: ✭ 130 (-26.97%)
Mutual labels:  mongodb, expressjs, boilerplate
Mern Skeleton
A MERN stack skeleton web application [Full-Stack React Projects]
Stars: ✭ 114 (-35.96%)
Mutual labels:  mongodb, expressjs, full-stack
Nodejs Rest Api Project Structure Express
Nodejs project structure practices for building RESTful APIs using Express framework and MongoDB.
Stars: ✭ 134 (-24.72%)
Mutual labels:  mongodb, express, expressjs

MEVN Stack

This project is intended to be used as a quickstarter for building a Mongo Express VueJS Node stack. This is similar to a MEAN stack, except Angular has been swapped out for a VueJS single page application rendered on the client side.

This is also the code used in the second VueJS training at the UW-Parkside App Factory.

Technologies

This project uses:

Mongo for a NoSQL database.

Express For an HTTP Server

VueJS For Views, with the Vuetify Material Design Framework

Node For a JavaScript runtime

This project makes use of a logging utility I created called trunks.

Installation

To install this project simply clone or download the repo:

git clone https://github.com/aturingmachine/mevn-stack.git <dir name>

cd <dir name>

npm install

cp .env.example .env then add in your local Mongo URI Changing the PORT variable in the .env will require you to change it in the views/config/http.js file.

Setup/Development

To develop using this project you can run

npm run dev:serve

and

npm run dev:client

in seperate terminal instances. This will allow hot reloading of both changes to the server and changes to the client.

The server will require you to be running a local instance of MongoDB.

npm run static will build the client-side JavaScript and start the hot reloading of the server environment. npm run dev:serve can also be used to just start the API if you are working on that prior to worrying about the client.

Scripts

A more detailed breakdown of the scripts are as follows:

Command npm run Server Client
start Static Static (requires npm run build)
dev:serve Hot reload Static
dev:client None Hot Reload
build None Bundled by Webpack
static Hot reload Bundled by Webpack

Project Structure

Backend

/src

--/controllers/-- Contains controllers for our API resources.

--/database/

----/models/-- Contains the models for our API Resources using Mongoose.

--/middleware/-- Any middleware you may need can go here.

--/routes/-- All route definitions are here.

----/api.js-- Routes for the API.

----/user.js-- Routes specific to the user resource.

Frontend

/views

--/config/http.js-- Axios config for local request

--/pages/-- Separate Component Pages go here.

--/router/index.js-- Config for vue-router

--/App.vue-- Component that has Nav-Drawer, Footer, and Toolbar wrapped around a router view of other components.

--/main.js-- Registers the Vue components and Router

--/index.html-- The file we return, has the Vue app in it.

Requirements

This project will require:

  • Node >=7.0

Dependencies

  • Dependencies Via NPM
    • Axios For client side HTTP requests
    • cors For CORS during development
    • dotenv Loads our .env variables
    • vue Realtime data binding on the frontend
    • vuetify Material design for Vue
    • vue-router Router for the SPA

User Resource

The example resource is as follows

Attribute Type Required
name String true
age Number true
email String true

Existing Routes

All user endpoints are behind the /api endpoint.

GET

/users - returns a list of all users inside of an array called data.

/users/:id - where :id is the id of a user resource. The resource is then returned in JSON format.

POST

/users - Creates a new user resource based on the payload of the request.

DELETE

/users/:id - Delete a user resouce matching the :id specified.

PUT

/users - Update a user based on the payload of the request

The Client can be accessed by hitting the document root:

localhost:8080/ Will send you to the application.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].