├── single-port ├── static │ ├── hello.txt │ ├── favicon.ico │ └── notice.html ├── assets │ ├── img │ │ └── logo.png │ └── css │ │ └── main.css ├── plugins │ ├── socket.io.js │ └── axios.js ├── components │ └── footer.vue ├── backpack.config.js ├── README.md ├── pages │ ├── index.vue │ └── users │ │ ├── index.vue │ │ └── _id.vue ├── server │ ├── config │ │ └── index.js │ ├── index.js │ ├── routes.js │ └── middlewares.js ├── nuxt.config.js ├── package.json └── layouts │ └── default.vue ├── .gitignore ├── multi-port ├── client │ ├── static │ │ └── favicon.ico │ ├── assets │ │ ├── img │ │ │ └── logo.png │ │ └── css │ │ │ └── main.css │ ├── components │ │ └── footer.vue │ ├── plugins │ │ └── axios.js │ ├── pages │ │ ├── index.vue │ │ └── users │ │ │ ├── index.vue │ │ │ └── _id.vue │ ├── store │ │ └── index.js │ ├── package.json │ ├── nuxt.config.js │ └── layouts │ │ └── default.vue ├── server │ ├── static │ │ └── favicon.ico │ ├── server │ │ ├── index.js │ │ ├── config │ │ │ └── index.js │ │ ├── routes.js │ │ └── middlewares.js │ ├── backpack.config.js │ └── package.json └── README.md └── README.md /single-port/static/hello.txt: -------------------------------------------------------------------------------- 1 | Hello, I am a static txt. 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | npm-debug.log 4 | .nuxt 5 | .idea 6 | *.iml 7 | -------------------------------------------------------------------------------- /single-port/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lautiamkok/nuxt-koa/HEAD/single-port/assets/img/logo.png -------------------------------------------------------------------------------- /single-port/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lautiamkok/nuxt-koa/HEAD/single-port/static/favicon.ico -------------------------------------------------------------------------------- /multi-port/client/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lautiamkok/nuxt-koa/HEAD/multi-port/client/static/favicon.ico -------------------------------------------------------------------------------- /multi-port/server/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lautiamkok/nuxt-koa/HEAD/multi-port/server/static/favicon.ico -------------------------------------------------------------------------------- /multi-port/client/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lautiamkok/nuxt-koa/HEAD/multi-port/client/assets/img/logo.png -------------------------------------------------------------------------------- /single-port/plugins/socket.io.js: -------------------------------------------------------------------------------- 1 | import io from 'socket.io-client' 2 | const socket = io(process.env.HOST_URL) 3 | 4 | export default socket 5 | -------------------------------------------------------------------------------- /single-port/components/footer.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /multi-port/client/components/footer.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /multi-port/client/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import * as axios from 'axios' 2 | 3 | let options = {} 4 | 5 | // The server-side needs a full url to works 6 | options.baseURL = process.env.HOST_URL 7 | 8 | export default axios.create(options) 9 | -------------------------------------------------------------------------------- /single-port/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import * as axios from 'axios' 2 | 3 | let options = {} 4 | // The server-side needs a full url to works 5 | if (process.server) { 6 | options.baseURL = process.env.HOST_URL 7 | } 8 | 9 | export default axios.create(options) 10 | -------------------------------------------------------------------------------- /multi-port/server/server/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Koa from 'koa' 4 | import config from './config' 5 | import middlewares from './middlewares' 6 | 7 | const app = new Koa() 8 | const host = process.env.HOST || '127.0.0.1' 9 | const port = process.env.PORT || config.server.port 10 | 11 | // Middlewares are imported here. 12 | middlewares(app) 13 | 14 | app.listen(port, host) 15 | -------------------------------------------------------------------------------- /single-port/static/notice.html: -------------------------------------------------------------------------------- 1 |

Warning!

2 |

Make sure to serve static files away from the app dir for security reason. 3 |

static files are served with koa-static. 4 |

you can change static file root in app/config/index.js 5 |

Config sample

6 | 
 7 |   static_dir: {
 8 |     root: './static',
 9 |     options: {}
10 |   },
11 |
-------------------------------------------------------------------------------- /single-port/backpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpack: (config, options, webpack) => { 3 | config.entry.main = './server/index.js', 4 | 5 | // Add NODE_PATH to webpack. 6 | // https://webpack.js.org/configuration/resolve/#resolve-modules 7 | // https://stackoverflow.com/questions/45894047/how-to-add-node-path-to-webpack-in-package-json 8 | config.resolve.modules = ['./server', './server/modules'] 9 | return config 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /multi-port/server/backpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpack: (config, options, webpack) => { 3 | config.entry.main = './server/index.js', 4 | 5 | // Add NODE_PATH to webpack. 6 | // https://webpack.js.org/configuration/resolve/#resolve-modules 7 | // https://stackoverflow.com/questions/45894047/how-to-add-node-path-to-webpack-in-package-json 8 | config.resolve.modules = ['./server', './server/modules'] 9 | return config 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /single-port/assets/css/main.css: -------------------------------------------------------------------------------- 1 | html, body 2 | { 3 | background-color: #fff; 4 | color: #000; 5 | letter-spacing: 0.5px; 6 | font-family: "Source Sans Pro", Arial, sans-serif; 7 | height: 100vh; 8 | margin: 0; 9 | } 10 | 11 | footer 12 | { 13 | padding: 20px; 14 | text-align: center; 15 | border-top: 1px solid #ddd; 16 | } 17 | 18 | a, a:hover, a:focus, a:visited 19 | { 20 | color: #000; 21 | } 22 | 23 | .logo { 24 | width: 100%; 25 | height: auto; 26 | max-width: 400px; 27 | max-height: 289px; 28 | } 29 | -------------------------------------------------------------------------------- /multi-port/client/assets/css/main.css: -------------------------------------------------------------------------------- 1 | html, body 2 | { 3 | background-color: #fff; 4 | color: #000; 5 | letter-spacing: 0.5px; 6 | font-family: "Source Sans Pro", Arial, sans-serif; 7 | height: 100vh; 8 | margin: 0; 9 | } 10 | 11 | footer 12 | { 13 | padding: 20px; 14 | text-align: center; 15 | border-top: 1px solid #ddd; 16 | } 17 | 18 | a, a:hover, a:focus, a:visited 19 | { 20 | color: #000; 21 | } 22 | 23 | .logo { 24 | width: 100%; 25 | height: auto; 26 | max-width: 400px; 27 | max-height: 289px; 28 | } 29 | -------------------------------------------------------------------------------- /single-port/README.md: -------------------------------------------------------------------------------- 1 | Nuxt + Koa 2 | =========== 3 | 4 | A basic sample Nuxt application with Koa. 5 | 6 | Koa handles the controller and the model as an API. Nuxt handles the view and calls the API, e.g http://127.0.0.1:3000/ (from Nuxt) will call http://127.0.0.1:3000/api (from Koa). 7 | 8 | quick start 9 | ============= 10 | 11 | ``` bash 12 | # install dependencies 13 | $ npm install 14 | 15 | # serve with hot reload at localhost:3000 16 | $ npm run dev 17 | 18 | # build for production and launch server 19 | $ npm start 20 | ``` 21 | Then, access it at http://localhost:3000/ 22 | -------------------------------------------------------------------------------- /multi-port/client/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /single-port/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /single-port/server/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const dbname = process.env.NODE_ENV === 'test' ? 'koatest' : 'koa' 4 | 5 | export default { 6 | app: { 7 | name: 'something', 8 | version: '1.0.0' 9 | }, 10 | database: { 11 | driver: 'mongo', 12 | host: 'localhost', 13 | port: 27017, 14 | dbname: dbname, 15 | username: 'admin', 16 | password: '123456', 17 | options: { 18 | } 19 | }, 20 | server: { 21 | port: 3000 22 | }, 23 | static_dir: { 24 | root: './static', 25 | options: {} 26 | }, 27 | session: { 28 | secretKey: 'something' 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /multi-port/server/server/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const dbname = process.env.NODE_ENV === 'test' ? 'koatest' : 'koa' 4 | 5 | export default { 6 | app: { 7 | name: 'something', 8 | version: '1.0.0' 9 | }, 10 | database: { 11 | driver: 'mongo', 12 | host: 'localhost', 13 | port: 27017, 14 | dbname: dbname, 15 | username: 'admin', 16 | password: '123456', 17 | options: { 18 | } 19 | }, 20 | server: { 21 | port: 3030 22 | }, 23 | static_dir: { 24 | root: './static', 25 | options: {} 26 | }, 27 | session: { 28 | secretKey: 'something' 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /multi-port/client/store/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | export const state = () => ({ 4 | users: 0 5 | }) 6 | 7 | export const mutations = { 8 | setUsers (state, users) { 9 | state.users = users 10 | } 11 | } 12 | 13 | // Or: 14 | // import Vuex from 'vuex' 15 | // import mutations from './mutations' 16 | 17 | // const createStore = () => { 18 | // return new Vuex.Store({ 19 | // state: { 20 | // counter: 0, 21 | // }, 22 | // // mutations 23 | 24 | // mutations: { 25 | // increment (state) { 26 | // state.counter++ 27 | // } 28 | // } 29 | // }) 30 | // } 31 | 32 | // export default createStore 33 | 34 | -------------------------------------------------------------------------------- /single-port/nuxt.config.js: -------------------------------------------------------------------------------- 1 | // https://nuxtjs.org/api/configuration-build 2 | module.exports = { 3 | /* 4 | ** Headers of the page 5 | */ 6 | head: { 7 | title: 'starter', 8 | meta: [ 9 | { charset: 'utf-8' }, 10 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 11 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 12 | ], 13 | link: [ 14 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 15 | ] 16 | }, 17 | env: { 18 | HOST_URL: process.env.HOST_URL || 'http://127.0.0.1:3000' 19 | }, 20 | /* 21 | ** Global CSS 22 | */ 23 | css: ['~/assets/css/main.css'] 24 | } 25 | -------------------------------------------------------------------------------- /multi-port/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-koa", 3 | "version": "1.0.0", 4 | "description": "Creating a Nuxt application with Koa", 5 | "main": "server/index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "homepage": "https://github.com/lautiamkok", 10 | "author": { 11 | "name": "lau tiam kok", 12 | "email": "contact@lauthiamkok.net", 13 | "url": "https://github.com/lautiamkok" 14 | }, 15 | "repository": "https://github.com/lautiamkok/nuxt-koa", 16 | "dependencies": { 17 | "axios": "^0.16.2", 18 | "nuxt": "^1.0.0-rc3" 19 | }, 20 | "scripts": { 21 | "dev": "nuxt", 22 | "build": "nuxt build", 23 | "start": "nuxt start", 24 | "generate": "nuxt generate" 25 | }, 26 | "keywords": [ 27 | "Nuxt" 28 | ], 29 | "license": "MIT" 30 | } 31 | -------------------------------------------------------------------------------- /multi-port/client/nuxt.config.js: -------------------------------------------------------------------------------- 1 | // https://nuxtjs.org/api/configuration-build 2 | module.exports = { 3 | /* 4 | ** Headers of the page 5 | */ 6 | head: { 7 | title: 'starter', 8 | meta: [ 9 | { charset: 'utf-8' }, 10 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 11 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 12 | ], 13 | link: [ 14 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 15 | ] 16 | }, 17 | env: { 18 | HOST_URL: process.env.HOST_URL || 'http://127.0.0.1:3030' 19 | }, 20 | build: { 21 | vendor: [ 22 | 'axios', 23 | '~/plugins/axios.js' 24 | ] 25 | }, 26 | // https://nuxtjs.org/guide/plugins/ 27 | plugins: ['~/plugins/axios.js'], 28 | /* 29 | ** Global CSS 30 | */ 31 | css: ['~/assets/css/main.css'] 32 | } 33 | -------------------------------------------------------------------------------- /single-port/pages/users/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 31 | 32 | 48 | -------------------------------------------------------------------------------- /multi-port/README.md: -------------------------------------------------------------------------------- 1 | Nuxt + Koa 2 | =========== 3 | 4 | A basic sample Nuxt application with Koa. 5 | 6 | Koa handles the controller and the model as an API. Nuxt handles the view and calls the API, e.g http://127.0.0.1:3000/ (from Nuxt) will call http://127.0.0.1:3030/api (from Koa). 7 | 8 | Quick start 9 | ============= 10 | 11 | ## Build Setup (Koa/ API) 12 | 13 | ``` bash 14 | # Dependencies 15 | $ npm install 16 | 17 | # Development 18 | $ npm run dev 19 | 20 | # Production build 21 | $ npm start 22 | ``` 23 | 24 | Access it at http://localhost:3030/ 25 | 26 | ## Build Setup (Nuxt) 27 | 28 | ``` bash 29 | # Dependencies 30 | $ npm install 31 | 32 | # Development 33 | $ npm run dev 34 | 35 | # Production build 36 | $ npm start 37 | ``` 38 | 39 | Access it at http://localhost:3000/ 40 | 41 | Notes 42 | ============= 43 | 44 | 1. For this approach, you must run these two apps concurrently. 45 | 46 | References 47 | ============= 48 | 49 | * https://nuxtjs.org/guide/commands/ 50 | 51 | -------------------------------------------------------------------------------- /single-port/pages/users/_id.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | 37 | 54 | -------------------------------------------------------------------------------- /multi-port/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-koa", 3 | "version": "1.0.0", 4 | "description": "Creating a Nuxt application with Koa", 5 | "main": "server/index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "homepage": "https://github.com/lautiamkok", 10 | "author": { 11 | "name": "lau tiam kok", 12 | "email": "contact@lauthiamkok.net", 13 | "url": "https://github.com/lautiamkok" 14 | }, 15 | "repository": "https://github.com/lautiamkok/nuxt-koa", 16 | "dependencies": { 17 | "cross-env": "^5.0.1", 18 | "kcors": "^2.2.1", 19 | "koa": "^2.3.0", 20 | "koa-bodyparser": "^4.2.0", 21 | "koa-mount": "^3.0.0", 22 | "koa-static": "^4.0.1", 23 | "koa-trie-router": "^2.1.5" 24 | }, 25 | "devDependencies": { 26 | "babel-eslint": "^7.2.3", 27 | "backpack-core": "^0.4.1" 28 | }, 29 | "scripts": { 30 | "dev": "backpack dev", 31 | "build": "backpack build", 32 | "start": "cross-env NODE_ENV=production node build/main.js" 33 | }, 34 | "keywords": [ 35 | "Koa" 36 | ], 37 | "license": "MIT" 38 | } 39 | -------------------------------------------------------------------------------- /single-port/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-koa", 3 | "version": "1.0.0", 4 | "description": "Creating a Nuxt application with Koa", 5 | "main": "server/index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "homepage": "https://github.com/lautiamkok", 10 | "author": { 11 | "name": "lau tiam kok", 12 | "email": "contact@lauthiamkok.net", 13 | "url": "https://github.com/lautiamkok" 14 | }, 15 | "repository": "https://github.com/lautiamkok/nuxt-koa", 16 | "dependencies": { 17 | "axios": "^0.16.2", 18 | "cross-env": "^5.0.1", 19 | "koa": "^2.3.0", 20 | "koa-bodyparser": "^4.2.0", 21 | "koa-mount": "^3.0.0", 22 | "koa-static": "^4.0.1", 23 | "koa-trie-router": "^2.1.5", 24 | "nuxt": "^1.0.0-rc3" 25 | }, 26 | "devDependencies": { 27 | "babel-eslint": "^7.2.3", 28 | "backpack-core": "^0.4.1" 29 | }, 30 | "scripts": { 31 | "dev": "backpack dev", 32 | "build": "nuxt build && backpack build", 33 | "start": "cross-env NODE_ENV=production node build/main.js" 34 | }, 35 | "keywords": [ 36 | "Koa2", 37 | "Nuxt" 38 | ], 39 | "license": "MIT" 40 | } 41 | -------------------------------------------------------------------------------- /single-port/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 56 | -------------------------------------------------------------------------------- /multi-port/client/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 56 | -------------------------------------------------------------------------------- /multi-port/client/pages/users/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 57 | -------------------------------------------------------------------------------- /multi-port/client/pages/users/_id.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | 43 | 60 | -------------------------------------------------------------------------------- /single-port/server/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Koa from 'koa' 4 | import { Nuxt, Builder } from 'nuxt' 5 | import config from './config' 6 | import middlewares from './middlewares' 7 | 8 | const app = new Koa() 9 | const host = process.env.HOST || '127.0.0.1' 10 | const port = process.env.PORT || config.server.port 11 | 12 | // Import and Set Nuxt.js options 13 | let nuxtConfig = require('../nuxt.config.js') 14 | nuxtConfig.dev = !(app.env === 'production') 15 | 16 | // Instantiate nuxt.js 17 | const nuxt = new Nuxt(nuxtConfig) 18 | 19 | // Build in development 20 | if (nuxtConfig.dev) { 21 | const builder = new Builder(nuxt) 22 | builder.build().catch(e => { 23 | console.error(e) // eslint-disable-line no-console 24 | process.exit(1) 25 | }) 26 | } 27 | 28 | // Middlewares are imported here. 29 | middlewares(app) 30 | 31 | // Hook Nuxt up! 32 | // https://github.com/nuxt-community/koa-template/blob/master/template/server/index.js 33 | app.use(ctx => { 34 | ctx.status = 200 // koa defaults to 404 when it sees that status is unset 35 | 36 | return new Promise((resolve, reject) => { 37 | ctx.res.on('close', resolve) 38 | ctx.res.on('finish', resolve) 39 | nuxt.render(ctx.req, ctx.res, promise => { 40 | // nuxt.render passes a rejected promise into callback on error. 41 | promise.then(resolve).catch(reject) 42 | }) 43 | }) 44 | }) 45 | 46 | app.listen(port, host) 47 | -------------------------------------------------------------------------------- /single-port/server/routes.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Router from 'koa-trie-router' 4 | 5 | const router = new Router() 6 | 7 | const middleware3 = async (ctx, next) => { 8 | console.log('Time: ', Date.now()) 9 | await next() 10 | } 11 | 12 | const middleware1 = async(ctx, next) => { 13 | console.log("I'll be logged first. ") 14 | await next() 15 | console.log("I'll be logged last. ") 16 | } 17 | 18 | const middleware2 = async(ctx, next) => { 19 | console.log("I'll be logged second. ") 20 | await next() 21 | console.log("I'll be logged third. ") 22 | } 23 | 24 | // Dummy users. 25 | const users = [ 26 | { name: 'Alexandre' }, 27 | { name: 'Pooya' }, 28 | { name: 'Sébastien' }, 29 | ] 30 | 31 | export default (app) => { 32 | 33 | // Home page. 34 | router.get('/', middleware1, middleware2, middleware3, async (ctx, next) => { 35 | ctx.type = 'json' 36 | ctx.body = { 37 | message: 'Hello World!' 38 | } 39 | }) 40 | 41 | // Get all users. 42 | router.get('/users', async (ctx, next) => { 43 | ctx.type = 'json' 44 | ctx.body = users 45 | }) 46 | 47 | // Get the user by id. 48 | router.get('/users/:id', async (ctx, next) => { 49 | const id = parseInt(ctx.params.id) 50 | console.log(users[id]) 51 | if (id >= 0 && id < users.length) { 52 | ctx.body = users[id] 53 | } else { 54 | ctx.throw(404) 55 | } 56 | }) 57 | 58 | return router.middleware() 59 | } 60 | -------------------------------------------------------------------------------- /multi-port/server/server/routes.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Router from 'koa-trie-router' 4 | 5 | const router = new Router() 6 | 7 | const middleware3 = async (ctx, next) => { 8 | console.log('Time: ', Date.now()) 9 | await next() 10 | } 11 | 12 | const middleware1 = async(ctx, next) => { 13 | console.log("I'll be logged first. ") 14 | await next() 15 | console.log("I'll be logged last. ") 16 | } 17 | 18 | const middleware2 = async(ctx, next) => { 19 | console.log("I'll be logged second. ") 20 | await next() 21 | console.log("I'll be logged third. ") 22 | } 23 | 24 | // Dummy users. 25 | const users = [ 26 | { name: 'Alexandre' }, 27 | { name: 'Pooya' }, 28 | { name: 'Sébastien' }, 29 | ] 30 | 31 | export default (app) => { 32 | 33 | // Home page. 34 | router.get('/', middleware1, middleware2, middleware3, async (ctx, next) => { 35 | ctx.type = 'json' 36 | ctx.body = { 37 | message: 'Hello World!' 38 | } 39 | }) 40 | 41 | // Get all users. 42 | router.get('/users', async (ctx, next) => { 43 | ctx.type = 'json' 44 | ctx.body = users 45 | }) 46 | 47 | // Get the user by id. 48 | router.get('/users/:id', async (ctx, next) => { 49 | const id = parseInt(ctx.params.id) 50 | console.log(users[id]) 51 | if (id >= 0 && id < users.length) { 52 | ctx.body = users[id] 53 | } else { 54 | ctx.throw(404) 55 | } 56 | }) 57 | 58 | return router.middleware() 59 | } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Nuxt + Koa 2 | =========== 3 | 4 | Basic samples creating a Nuxt application with Koa. 5 | 6 | Read the [post](https://www.codementor.io/lautiamkok/creating-a-nuxt-application-with-koa-express-and-slim-cfqjp0ylw) about this repository. 7 | 8 | Dependencies 9 | ========== 10 | * [nuxt](https://github.com/nuxt/nuxt.js) - A framework for creating Universal Vue.js Applications. 11 | * [koa](https://github.com/koajs/koa) - Expressive middleware for node.js using ES2017 async functions. 12 | * [koa-static](https://github.com/koajs/static) - Koa static file serving middleware, wrapper for koa-send. 13 | * [koa-bodyparser](https://github.com/koajs/bodyparser) - A body parser for koa, base on co-body. support json, form and text type body. 14 | * [koa-mount](https://github.com/koajs/mount) - Mount other Koa applications or middleware to a given pathname. 15 | * [trie-router](https://github.com/koajs/trie-router) - Trie routing for Koa based on routington. 16 | * [axios](https://github.com/mzabriskie/axios) -Promise based HTTP client for the browser and node.js) 17 | * [cross-env](https://github.com/kentcdodds/cross-env) - Run scripts that set and use environment variables across platforms 18 | 19 | Notes 20 | ========== 21 | 22 | 1. During the development, use: `$ npm run dev` 23 | 24 | 2. [backpack](https://github.com/palmerhq/backpack) is used to watch and build the application, so you can use the latest ES6 features (module syntax, async/await, etc.). 25 | -------------------------------------------------------------------------------- /single-port/server/middlewares.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // All middlewares are used here. 4 | // Check other Koa official middlewares: https://github.com/koajs 5 | import serve from 'koa-static' 6 | import bodyParser from 'koa-bodyparser' 7 | import config from './config' 8 | import routes from './routes' 9 | 10 | export default (app) => { 11 | // Catch and format the error in the upstream. 12 | // https://github.com/koajs/koa/wiki/Error-Handling 13 | app.use(async (ctx, next) => { 14 | try { 15 | await next() 16 | 17 | // Handle 404 - throw it as an error. 18 | if (ctx.status === 404 && ctx.res.headersSent === false) { 19 | ctx.throw(404) 20 | } 21 | 22 | // Use this when you want to format the 200 res further. 23 | // e.g. {"status":200,"data":{"message":"Hello home sample!"}} 24 | // else, you get, e.g. {"message":"Hello home sample!"} 25 | if (ctx.status === 200 && ctx.res.headersSent === false) { 26 | ctx.body = { 27 | status: 200, 28 | data: ctx.body 29 | } 30 | } 31 | } catch (err) { 32 | ctx.status = err.status || 500 33 | 34 | ctx.type = 'json' 35 | ctx.body = { 36 | status: ctx.status, 37 | message: err.message 38 | } 39 | 40 | ctx.app.emit('error', err, ctx) 41 | } 42 | }) 43 | 44 | // Static files are files that clients download as they are from the server. 45 | // Create a new directory, public. Koa, by default doesn't allow you to 46 | // serve static files. 47 | // https://github.com/koajs/static 48 | // https://www.tutorialspoint.com/koajs/koajs_static_files.htm 49 | app.use(serve(config.static_dir.root)) 50 | 51 | // The parsed body will store in ctx.request.body 52 | // If nothing was parsed, body will be an empty object {} 53 | // https://github.com/koajs/bodyparser 54 | // https://github.com/koajs/koa/issues/719 55 | app.use(bodyParser()) 56 | 57 | // Add routes by group. 58 | const mount = require('koa-mount') 59 | app.use(mount('/api', routes(app))) 60 | } 61 | -------------------------------------------------------------------------------- /multi-port/server/server/middlewares.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // All middlewares are used here. 4 | // Check other Koa official middlewares: https://github.com/koajs 5 | import serve from 'koa-static' 6 | import bodyParser from 'koa-bodyparser' 7 | import config from './config' 8 | import routes from './routes' 9 | import cors from 'kcors' 10 | 11 | export default (app) => { 12 | // Catch and format the error in the upstream. 13 | // https://github.com/koajs/koa/wiki/Error-Handling 14 | app.use(async (ctx, next) => { 15 | try { 16 | await next() 17 | 18 | // Handle 404 - throw it as an error. 19 | if (ctx.status === 404 && ctx.res.headersSent === false) { 20 | ctx.throw(404) 21 | } 22 | 23 | // Use this when you want to format the 200 res further. 24 | // e.g. {"status":200,"data":{"message":"Hello home sample!"}} 25 | // else, you get, e.g. {"message":"Hello home sample!"} 26 | if (ctx.status === 200 && ctx.res.headersSent === false) { 27 | ctx.body = { 28 | status: 200, 29 | data: ctx.body 30 | } 31 | } 32 | } catch (err) { 33 | ctx.status = err.status || 500 34 | 35 | ctx.type = 'json' 36 | ctx.body = { 37 | status: ctx.status, 38 | message: err.message 39 | } 40 | 41 | ctx.app.emit('error', err, ctx) 42 | } 43 | }) 44 | 45 | // Static files are files that clients download as they are from the server. 46 | // Create a new directory, public. Koa, by default doesn't allow you to 47 | // serve static files. 48 | // https://github.com/koajs/static 49 | // https://www.tutorialspoint.com/koajs/koajs_static_files.htm 50 | app.use(serve(config.static_dir.root)) 51 | 52 | // The parsed body will store in ctx.request.body 53 | // If nothing was parsed, body will be an empty object {} 54 | // https://github.com/koajs/bodyparser 55 | // https://github.com/koajs/koa/issues/719 56 | app.use(bodyParser()) 57 | 58 | // CORS. 59 | // https://github.com/koajs/cors 60 | app.use(cors({ 61 | origin: 'http://127.0.0.1:3000', 62 | credentials: true, 63 | allowHeaders: ['Origin, X-Requested-With, Content-Type, Accept'] 64 | })) 65 | 66 | // Add routes by group. 67 | const mount = require('koa-mount') 68 | app.use(mount('/', routes(app))) 69 | } 70 | --------------------------------------------------------------------------------