Vue Express Mongo Boilerplate

⭐️ MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS
Alternatives To Vue Express Mongo Boilerplate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Express Mongo Boilerplate2,78512 years ago1January 30, 201784JavaScript
:star: MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS
14 months ago7February 03, 202013mitJavaScript
A Nodejs BFF framework, build with koa2(基于koa2的标准前后端分离框架)
Vue Tutorial1,170
6 years ago5JavaScript
Kov Blog630
6 years ago4mitJavaScript
A blog platform built with koa,vue and mongoose. 使用 koa ,vue 和 mongo 搭建的博客页面和支持markdown语法的博客编写平台,自动保存草稿。博客地址:
3 years ago14JavaScript
:crystal_ball: VueJS + Express + GraphQL Boilerplate
Mevn Boilerplate250
4 years ago13JavaScript
A fullstack boilerplate with Mongo, ExpressJS, VueJS and NodeJS.
Mevn Stack183
2 years ago1mitVue
A Quickstart for building an Express API with a VueJS Admin Portal
Vue Shopping Cart96
6 months agoJavaScript
Simple shopping cart with Vue.js and Deno.js
6 years agoJavaScript
技术栈vue cheerio socket mongodb redis 在线演示地址
Venom Docker79
4 years agoJavaScript
Vue, Express, Node, Mongo with Docker-compose setup for local development
Alternatives To Vue Express Mongo Boilerplate
Select To Compare

Alternative Project Comparisons

Vue, Express, MongoDB full-stack JS Boilerplate

Known Vulnerabilities Node 10 VueJS 2 Webpack 4

This is a full stack webapp boilerplate project with VueJS + ExpressJS + MongoDB. It is NOT an out-of-box project. I make it in order to create an up-to-date starter repo which contains all important functions (user signup, login, oauth, profile, ...etc) except the business-logic. So when neccessary I can create a new webapp and only need to develop the business logic.

This is just my personal boilerplate, it may or may not be a good fit for your project(s). Inspired by dstroot/skeleton and sahat/hackathon-starter

If you like my work, please donate. Thank you!

Live Demo (login: test/test1234 or sign-up)




Supported remote logging services


Install dependencies

$ npm install



For development

$ npm run dev

Build web app scripts and styles:

$ npm run build

For production

$ npm start


Building the images for the first time

$ docker-compose build

Starting the images

$ docker-compose up


Login screen

Login screen

Index page after login

Index page

Devices page

Devices module

Directory structure

|   +---app
|   |   +---core
|   |   +---modules
|   |       +---demo
|   |       +---devices
|   |       +---home
|   |       +---posts
|   |       +---session
|   |                   
|   +---frontend
|   +---images
|   +---scss
|   |   bundle.js
|   |   dev.js
|   |   index.js
|   +---applogic
|   |   +---libs
|   |   +---modules
|   |       +---counter
|   |       +---devices
|   |       +---posts
|   |       +---session
|   +---config
|   |       default.js
|   |       index.js
|   |       prod.js
|   |       test.js
|   |       
|   +---core
|   +---libs
|   +---locales
|   |   +---en
|   |   +---hu
|   +---models
|   |       user.js
|   +---public
|   +---routes
|   +---schema
|   +---services
|   +---views
|   package.json
|   secrets.json

Bundled server-side

If you want to bundle your NodeJS server-side code run webpack on server code with npm run build && npm run build:server command. It if was success, run the server: npm run start:bundle

If you want to export bundled version copy these folders & files to the new place:

- server
	- locales
	- public
	- views
	- bundle.js
- package.json
- config.js (optional)

Before start, you have to install production dependencies with npm: npm install --production

Obtaining API keys for social signup/login

Google Logo

These are the instructions for Google:

  • Visit Google Cloud Console
  • Click on the Create Project button
  • Enter Project Name, then click on Create button
  • Then click on APIs & auth in the sidebar and select API tab
  • Click on Google+ API under Social APIs, then click Enable API
  • Next, under APIs & auth in the sidebar click on Credentials tab
  • Click on Create new Client ID button
  • Select Web Application and click on Configure Consent Screen
  • Fill out the required fields then click on Save
  • In the Create Client ID modal dialog:
  • Application Type: Web Application
  • Authorized Javascript origins: http://localhost:3000
  • Authorized redirect URI: http://localhost:3000/auth/google/callback
  • Click on Create Client ID button
  • Copy and paste Client ID and Client secret keys into config.js file

Facebook Logo

These are the instructions for Facebook:

  • Visit Facebook Developers
  • Click My Apps, then select *Add a New App from the dropdown menu
  • Select Website platform and enter a new name for your app
  • Click on the Create New Facebook App ID button
  • Choose a Category that best describes your app
  • Click on Create App ID button
  • In the upper right corner click on Skip Quick Star
  • Copy and paste App ID and App Secret keys into config.js file
  • Note: App ID is clientID, App Secret is clientSecret
  • Click on the Settings tab in the left nav, then click on + Add Platform
  • Select Website
  • Enter http://localhost:3000 under Site URL

Note: After a successful sign in with Facebook, a user will be redirected back to home page with appended hash #_=_ in the URL. It is not a bug. See this Stack Overflow discussion for ways to handle it.

Update: Added a commented workaround to App.vue, otherwise the FB users may end up on a blank page on redirect.

GitHub Logo

These are the instructions for GitHub:

  • Go to Account Settings
  • Select Applications from the sidebar
  • Then inside Developer applications click on Register new application
  • Enter Application Name and Homepage URL
  • For Authorization Callback URL: http://localhost:3000/auth/github/callback
  • Click Register application
  • Now copy and paste Client ID and Client Secret keys into config.js file

Twitter Logo

These are the instructions for Twitter:

  • Sign in at
  • Click Create a new application
  • Enter your application name, website and description
  • For Callback URL:
  • Go to Settings tab
  • Under Application Type select Read and Write access
  • Check the box Allow this application to be used to Sign in with Twitter
  • Click Update this Twitter's applications settings
  • Copy and paste Consumer Key and Consumer Secret keys into config.js file


vue-express-mongo-boilerplate is available under the MIT license.


Copyright (C) 2016 Icebob

@icebob @icebob

Popular Vue Projects
Popular Mongo Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Full Stack