A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client turn on production mode explicitly on client Oct 27, 2018
server fix vulnerabilities in some dependency Nov 27, 2018
.gitignore ignore the god dammit vscode May 29, 2018
LICENSE change to BSD LICENSE Jan 22, 2018
README.md Add demo website info to readme Oct 27, 2018

README.md

Koa Vue Fullstack Boilerplate

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.

Demo:

You can find the demo website here: http://43.240.98.205
Please don't change the password.

email: admin@example.com
password: 123456

Environment:

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

Architecture

├─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