/koa-vue-fullstack

A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack

Primary LanguageJavaScriptBSD 2-Clause "Simplified" LicenseBSD-2-Clause

Koa Vue Fullstack Boilerplate

🎉🎉🎉 Upgrade Webpack to v5!

Project based on Webpack4 is in Releases.

Preface

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:

Click here to see demo website.

email: admin@example.com
password: 123456

Environment:

  • Server
    • Koa
    • Koa Router, Koa Cors, Koa Bodyparser
    • Mongoose
    • Node v8.9.4 v10.12.0 v11.0.0
  • Client
    • Vue
    • iView
    • Axios (HTTP Client Library)
    • Webpack 3 Webpack 4 Webpack 5
    • 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