Built with Vue 2.0 + vue-router + vuex, with server-side rendering.
-
Server Side Rendering
- Vue + vue-router + vuex working together
- Server-side data pre-fetching
- Client-side state & DOM hydration
-
Single-file Vue Components
- Hot-reload in development
- CSS extraction for production
-
Passport authentication locally / 3rd-party OAuth
-
Backend Service Support
- build: webpack config for bundle in dev / prod
- client
- components: vue components
- plugins: vue mixins / directives / filters
- router: vue router
- store: vuex
- styl: general stylus
- views
- config: general configs
- public: mock data / static resources (js/css/img, .etc)
- server
- api: provide api for application
- middleware: express middlewares
- model: model mappers (yet)
- pass: config for passport, can be emitted if unused
- proxy: for native models, can be emitted if unused
Requires Node.js 6+
bash cmds
# install dependencies
npm i
# !!Notice!!
# then refer to this
# https://github.com/ElemeFE/vue-swipe/issues/29
# serve in dev mode, with hot reload on localhost,
# port depends on package.json port
# both frontend and backend
npm run dev
# frontend only
npm run dev-f
# backend only
npm run dev-b
# build for production
npm run build
# serve in production mode
npm start
Requires Nginx and pm2
deploy configuration
# set nginx for nodejs in nginx.conf
upstream nodejs {
server 127.0.0.1:3000;
keepalive 64;
}
# touch sites/m.rings.tv
server {
charset utf-8;
#client_max_body_size 128M;
listen 80;
server_name m.rings.tv;
root /usr/local/var/www/m.rings.tv;
#index index.html index.php;
access_log /var/log/nginx/m.rings.tv.access.log access;
error_log /var/log/nginx/m.rings.tv.error.log warn;
location / {
proxy_pass http://nodejs;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
#proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_set_header X-NginX-Proxy true;
}
location ~ /\.(ht|svn|git|idea|vscode){
deny all;
}
}
# start in prod
pm2 start npm -- start