Merge pull request #1 from nuxt-community/master

catchup

README.md

@@ -10,7 +10,7 @@
 This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
 
 ```bash
-vue init nuxt/express <project-name>
+vue init nuxt-community/express-template <project-name>
 cd <project-name> # move to your project
 npm install # or yarn install
 ```
@@ -19,7 +19,8 @@ npm install # or yarn install
 
 ## ExpressJS Changes
 
-- The `routes` directory is called `api`.
+- There is a  `server` directory with the root of your `express` server.
+- The `routes` directory is called `server/api`.
 
 ## Commands
 
@@ -29,10 +30,18 @@ npm install # or yarn install
 | npm run build | Build the nuxt.js web application for production. |
 | npm start | Start ExpressJS server in production. |
 
+## Backpack
+
+We use [backpack](https://github.com/palmerhq/backpack) to watch and build the application, so you can use the latest ES6 features (module syntax, async/await, etc.).
+
 ## Live Demo
 
 [https://express.nuxtjs.org](https://express.nuxtjs.org)
 
+## Examples
+
+- [Handling Protected SSR Routes](https://github.com/nuxt/express/blob/master/protected-ssr-api.md)
+
 ## Documentation
 
 - [ExpressJS](http://expressjs.com/en/guide/routing.html)

protected-ssr-api.md

@@ -0,0 +1,27 @@
+The moment you start dealing with user session, you'll notice that protected routes will reject nuxt requests when running from the server. This is because when nuxt is ran from the server, the browser cookie is lost. Below is a quick middleware solution to inject the browser's cookie to your ssr axios request.
+
+## install session
+
+`npm install --save express-session`
+
+
+## create middleware/ssr-cookie.js
+
+```js
+import axios from '~plugins/axios'
+
+export default function({isServer, req}) {
+  if (isServer) {
+    axios.defaults.headers.common.cookie = req.headers.cookie
+  }
+}
+```
+
+## add middleware to nuxt.config.js
+
+```js
+router: {
+  middleware: ['ssr-cookie']
+}
+```
+

template/.eslintrc.js

@@ -11,15 +11,6 @@ module.exports = {
     'html'
   ],
   // add your custom rules here
-  rules: {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    // do not allow console.logs etc...
-    'no-console': 2
-  },
+  rules: {},
   globals: {}
 }

template/.gitignore

@@ -9,3 +9,6 @@ npm-debug.log
 
 # Nuxt generate
 dist
+
+# Backpack build
+build

template/README.md

@@ -13,5 +13,10 @@ $ npm run dev
 
 # build for production and launch server
 $ npm start
+```
 
 For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
+
+## Backpack
+
+We use [backpack](https://github.com/palmerhq/backpack) to watch and build the application, so you can use the latest ES6 features (module syntax, async/await, etc.).

template/backpack.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  webpack: (config, options, webpack) => {
+    config.entry.main = './server/index.js'
+    return config
+  }
+}

template/layouts/default.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import MyFooter from '~components/Footer.vue'
+import MyFooter from '~/components/Footer.vue'
 
 export default {
   components: {

template/nuxt.config.js

@@ -16,11 +16,24 @@ module.exports = {
   /*
   ** Global CSS
   */
-  css: ['~assets/css/main.css'],
+  css: ['~/assets/css/main.css'],
   /*
   ** Add axios globally
   */
   build: {
-    vendor: ['axios']
+    vendor: ['axios'],
+    /*
+    ** Run ESLINT on save
+    */
+    extend (config, ctx) {
+      if (ctx.isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/
+        })
+      }
+    }
   }
 }

template/package.json

@@ -5,34 +5,29 @@
   "author": "{{ author }}",
   "private": true,
   "scripts": {
-    "dev": "nodemon --exec babel-node -w server.js -w nuxt.config.js -w api/ server.js",
-    "build": "nuxt build && babel server.js --out-file server.prod.js",
-    "start": "cross-env NODE_ENV=production node server.prod.js",
+    "dev": "backpack dev",
+    "build": "nuxt build && backpack build",
+    "start": "cross-env NODE_ENV=production node build/main.js",
     "precommit": "npm run lint",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
-  "babel": {
-    "presets": [
-      "es2015",
-      "stage-2"
-    ]
-  },
   "dependencies": {
-    "axios": "^0.15.3",
-    "cross-env": "^3.1.4",
-    "express": "^4.14.0",
-    "nuxt": "latest"
+    "axios": "^0.16.2",
+    "cross-env": "^5.0.1",
+    "express": "^4.15.3",
+    "nuxt": "^1.0.0-rc3",
+    "source-map-support": "^0.4.15"
   },
   "devDependencies": {
-    "babel-cli": "^6.22.2",
-    "babel-eslint": "^7.1.1",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "eslint": "^3.13.1",
-    "eslint-config-standard": "^6.2.1",
-    "eslint-plugin-html": "^1.7.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "nodemon": "^1.11.0"
+    "babel-eslint": "^7.2.3",
+    "backpack-core": "^0.4.1",
+    "eslint": "^4.3.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^3.1.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.1.1",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^3.0.1"
   }
 }

template/pages/_id.vue

@@ -1,7 +1,7 @@
 {{{{raw}}}}
 <template>
   <section class="container">
-    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
+    <img src="~assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
     <h1 class="title">
       User
     </h1>
@@ -16,18 +16,18 @@
 {{{{/raw}}}}
 
 <script>
-import axios from '~plugins/axios'
+import axios from '~/plugins/axios'
 
 export default {
   name: 'id',
-  data ({ params, error }) {
+  asyncData ({ params, error }) {
     return axios.get('/api/users/' + params.id)
-    .then((res) => {
-      return { user: res.data }
-    })
-    .catch((e) => {
-      error({ statusCode: 404, message: 'User not found' })
-    })
+      .then((res) => {
+        return { user: res.data }
+      })
+      .catch((e) => {
+        error({ statusCode: 404, message: 'User not found' })
+      })
   },
   head () {
     return {

template/pages/index.vue

@@ -1,12 +1,12 @@
 {{{{raw}}}}
 <template>
   <section class="container">
-    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
+    <img src="~assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
     <h1 class="title">
       USERS
     </h1>
     <ul class="users">
-      <li v-for="(user, index) in users" class="user">
+      <li v-for="(user, index) in users" :key="index" class="user">
         <nuxt-link :to="{ name: 'id', params: { id: index }}">
           {{ user.name }}
         </nuxt-link>
@@ -17,14 +17,12 @@
 {{{{/raw}}}}
 
 <script>
-import axios from '~plugins/axios'
+import axios from '~/plugins/axios'
 
 export default {
-  async data () {
+  async asyncData () {
     let { data } = await axios.get('/api/users')
-    return {
-      users: data
-    }
+    return { users: data }
   },
   head () {
     return {

template/plugins/axios.js

@@ -1,8 +1,8 @@
-import axios from 'axios'
+import * as axios from 'axios'
 
 let options = {}
 // The server-side needs a full url to works
-if (process.SERVER_BUILD) {
+if (process.server) {
   options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
 }
 

template/server/api/index.js

@@ -0,0 +1,10 @@
+import { Router } from 'express'
+
+import users from './users'
+
+const router = Router()
+
+// Add USERS Routes
+router.use(users)
+
+export default router

template/api/users.js → template/server/api/users.js

@@ -1,8 +1,12 @@
-var router = require('express').Router()
+import { Router } from 'express'
 
+const router = Router()
+
+// Mock Users
 const users = [
   { name: 'Alexandre' },
-  { name: 'Sébastien' }
+  { name: 'Pooya' },
+  { name: 'Sébastien' },
 ]
 
 /* GET users listing. */
@@ -12,12 +16,12 @@ router.get('/users', function (req, res, next) {
 
 /* GET user by ID. */
 router.get('/users/:id', function (req, res, next) {
-  var id = parseInt(req.params.id)
+  const id = parseInt(req.params.id)
   if (id >= 0 && id < users.length) {
     res.json(users[id])
   } else {
     res.sendStatus(404)
   }
 })
 
-module.exports = router
+export default router

template/server.js → template/server/index.js

@@ -1,29 +1,33 @@
-const Nuxt = require('nuxt')
-const app = require('express')()
+import express from 'express'
+import { Nuxt, Builder } from 'nuxt'
+
+import api from './api'
+
+const app = express()
 const host = process.env.HOST || '127.0.0.1'
 const port = process.env.PORT || 3000
 
 app.set('port', port)
+
 // Import API Routes
-app.use('/api', require('./api/index'))
+app.use('/api', api)
 
 // Import and Set Nuxt.js options
-let config = require('./nuxt.config.js')
+let config = require('../nuxt.config.js')
 config.dev = !(process.env.NODE_ENV === 'production')
 
 // Init Nuxt.js
 const nuxt = new Nuxt(config)
-app.use(nuxt.render)
 
 // Build only in dev mode
 if (config.dev) {
-  nuxt.build()
-  .catch((error) => {
-    console.error(error) // eslint-disable-line no-console
-    process.exit(1)
-  })
+  const builder = new Builder(nuxt)
+  builder.build()
 }
 
+// Give nuxt middleware to express
+app.use(nuxt.render)
+
 // Listen the server
 app.listen(port, host)
 console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console