Awesome
vue-fullstack-demo
Deprecated! Now demo project was generated by script automatically. Please check https://github.com/erguotou520/vue-fullstack/tree/vf-backend for backend server and https://github.com/erguotou520/vue-fullstack/tree/vf-mock for mock server
This is a NodeJs fullstack project using express
, mongodb
, passport
, vue
, vue-router
, vuex
, etc.
Feature
- Separate for backend and frontend when development
- Configurable
- Restfull api
Before dev
- Install
mongodb
follow official manual. It's recommend to use MongoChef as the db client. - NodeJs installed.
Dev step
- Open terminal and run
npm install
, if you don't choose i18n when initialization, you need to runnpm run remove:i18n
here manually - Run
npm run server
, this will initial the db andUser
document if not exists - Open other terminal and run
npm run client
, you can combine the two command withnpm run dev
- Open browser and nav to
localhost:9001
(the default port is 9001, if you change this, change the port)
Build
Run npm run build
App structure
├─client # frontend source folder
│ ├─build # frontend dev scripts
│ ├─src # frontend src
│ │ ├─assets
│ │ │ ├─css
│ │ │ ├─fonts
│ │ │ └─images
│ │ ├─components # vue components
│ │ ├─http # vue-resource configuration
│ │ ├─locale # vue-i18n configuration
│ │ ├─router # vue-router configuration
│ │ ├─socket # socket.io configuration
│ │ ├─storage # web storage api
│ │ ├─store # vuex store
│ │ │ └─modules
│ │ └─view # app pages
│ │ └─auth
│ └─static # static folder
└─server # backend server folder
├─api # backend api list
│ ├─thing
│ └─user
├─auth # user auth logical
│ └─local
├─components # server components
│ └─errors
├─config # server configs, contains express socket.io, etc.
└─views # server servered pages
Configuration
Most of the configuration is concentrated in the config.js
file, and most of them have explicit comments, you need to take a look at it first.
Here is some important/frequently-used configuration:
frontend.port
port that frontend server listens atbackend.port
port that backend server listen atbackend.secrets.session
secret for session, important when you deploy your app, make sure it's complex enoughbackend.mongo.uri
change this if your mongodb uri is not matchedbackend.serverFrontend
whether to server the frontend code. If set totrue
the express server servers the frontend code, otherwise you may need a http server like nginx to server frontend code and there is a nginx configuration atnginx.example.conf
(default true)
Environment variable
When you deploy your app to you cloud server, it's easy to config you app with environment variable
, here is the supported:
APP_port
orPORT
: set tobackend.port
APP_HOST
orAPP_IP
orHOST
orIP
: set tobackend.ip
MONGODB_URI
orMONGOHQ_URI
: set tobackend.mongo.uri
SECRET
: set tobackend.secrets.session
Notice
The generated app is just a template to build your app system fast, maybe it can't meet your needs, so you need to do some change at this issue.
License
Under MIT license