Skip to content
A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack
JavaScript Vue Shell CSS Other
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
client fix vulnerabilities in dependencies Aug 28, 2019
server mongoclient uses the new Server Discover and Monitoring engine Nov 12, 2019
.gitignore ignore the god dammit vscode May 29, 2018
LICENSE change to BSD LICENSE Jan 22, 2018 Update Jun 2, 2019

Koa Vue Fullstack Boilerplate

🎉🎉🎉 Upgrade Webpack to v4!

Project based on Webpack3 is in Releases.


Vue.js, Koa.js, Node.js, and MongoDB fullstack lightweight example application. Authentication, CRUD, and access control included.

This project aims to build a small but structured full-stack application, so it would be relatively clear for a programmer/beginner to understand how to build a website from scratch.


Click here to see demo website. Server is deployed on heroku's free plan :) 🐢🐢🐢.

password: 123456


  • Server
    • Koa
    • Koa Router, Koa Cors, Koa Bodyparser
    • Mongoose
    • Node v8.9.4 v10.12.0
  • Client
    • Vue
    • iView
    • Axios (HTTP Client Library)
    • Webpack 3 Webpack 4
    • WebpackDevServer (Development mode only)


├─client               # frontend folder
│  ├─src               # frontend src
│  │  ├─api
│  │  ├─router
│  │  ├─styles
│  │  ├─components
│  │  ├─store          # state management
│  │  │  └─modules
│  │  └─view           # app pages
│  │     └─auth
│  └─static            # static folder
└─server               # server folder
   └─src               # server src
      ├─api            # server api list
      │  ├─auth        # completely token-based authentication
      │  ├─thing
      │  └─user
      ├─config         # server configurations
      │  ├─index       # default server port, mongo uri, etc settings
      │  ├─security    # security settins
      │  └─seed        # populate database with sample data on server start
      ├─entry.js       # entry file for environment setup
      ├─main.js        # main file after entry
      └─routes.js      # router

Run through Docker

    cd server # You can boost the server by using Docker
    docker-compose up
    # Open a new tab
    cd client
    npm install
    npm start

Setup Locally:

  • Steps: The server and client are completely seperated in this project, so go to each client and server folder and run:
    cd client
    npm install
    npm start # Running dev client
    # Open a new tab
    mongod    # Boost Mongo DB
    # Open a new tab
    cd server
    # CREATE a .env file under server folder, and copy and paste the contents of .env.default file into this .env, and assign values
    touch .env
    npm install
    npm start # Running dev server
  • Others:
npm run build      # Running production mode
npm run eslint     # Check your coding style
npm run eslint-fix # Use auto ESLint fix
You can’t perform that action at this time.