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
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.