├── renovate.json ├── static ├── favicon.ico └── README.md ├── api ├── routes │ ├── test.js │ └── users.js └── index.js ├── components ├── README.md └── Logo.vue ├── .editorconfig ├── layouts ├── README.md ├── default.vue └── error.vue ├── pages ├── README.md ├── users │ ├── _id.vue │ └── index.vue └── index.vue ├── assets └── README.md ├── .eslintrc.js ├── plugins └── README.md ├── middleware └── README.md ├── store └── README.md ├── package.json ├── protected-ssr-api.md ├── .gitignore ├── nuxt.config.js └── README.md /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/express-template/master/static/favicon.ico -------------------------------------------------------------------------------- /api/routes/test.js: -------------------------------------------------------------------------------- 1 | const { Router } = require('express') 2 | 3 | const router = Router() 4 | 5 | // Test route 6 | router.use('/test', (req, res) => { 7 | res.end('Test API!') 8 | }) 9 | 10 | module.exports = router 11 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'plugin:nuxt/recommended' 13 | ], 14 | plugins: [ 15 | ], 16 | // add your custom rules here 17 | rules: {} 18 | } 19 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /api/routes/users.js: -------------------------------------------------------------------------------- 1 | const { Router } = require('express') 2 | 3 | const router = Router() 4 | 5 | // Mock Users 6 | const users = [ 7 | { name: 'Alexandre' }, 8 | { name: 'Pooya' }, 9 | { name: 'Sébastien' } 10 | ] 11 | 12 | /* GET users listing. */ 13 | router.get('/users', function (req, res, next) { 14 | res.json(users) 15 | }) 16 | 17 | /* GET user by ID. */ 18 | router.get('/users/:id', function (req, res, next) { 19 | const id = parseInt(req.params.id) 20 | if (id >= 0 && id < users.length) { 21 | res.json(users[id]) 22 | } else { 23 | res.sendStatus(404) 24 | } 25 | }) 26 | 27 | module.exports = router 28 | -------------------------------------------------------------------------------- /api/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | 3 | // Create express instance 4 | const app = express() 5 | 6 | // Require API routes 7 | const users = require('./routes/users') 8 | const test = require('./routes/test') 9 | 10 | // Import API Routes 11 | app.use(users) 12 | app.use(test) 13 | 14 | // Export express app 15 | module.exports = app 16 | 17 | // Start standalone server if directly running 18 | if (require.main === module) { 19 | const port = process.env.PORT || 3001 20 | app.listen(port, () => { 21 | // eslint-disable-next-line no-console 22 | console.log(`API server listening on port ${port}`) 23 | }) 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-express", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint": "yarn lint:js", 11 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore ." 12 | }, 13 | "dependencies": { 14 | "@nuxt/http": "latest", 15 | "express": "latest", 16 | "nuxt": "latest" 17 | }, 18 | "devDependencies": { 19 | "@nuxtjs/eslint-config": "^5.0.0", 20 | "@nuxtjs/eslint-module": "^3.0.2", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.20.0", 23 | "eslint-plugin-nuxt": "^2.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /protected-ssr-api.md: -------------------------------------------------------------------------------- 1 | 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. 2 | 3 | ## install session 4 | 5 | `npm install --save express-session` 6 | 7 | 8 | ## create middleware/ssr-cookie.js 9 | 10 | ```js 11 | import axios from '~plugins/axios' 12 | 13 | export default function({isServer, req}) { 14 | if (isServer) { 15 | axios.defaults.headers.common.cookie = req.headers.cookie 16 | } 17 | } 18 | ``` 19 | 20 | ## add middleware to nuxt.config.js 21 | 22 | ```js 23 | router: { 24 | middleware: ['ssr-cookie'] 25 | } 26 | ``` 27 | 28 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /pages/users/_id.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 36 | 37 | 62 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 64 | -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | 29 | 67 | -------------------------------------------------------------------------------- /pages/users/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | /* 4 | ** Nuxt target 5 | ** See https://nuxtjs.org/api/configuration-target 6 | */ 7 | target: 'server', 8 | 9 | /* 10 | ** Headers of the page 11 | ** See https://nuxtjs.org/api/configuration-head 12 | */ 13 | head: { 14 | title: process.env.npm_package_name || '', 15 | meta: [ 16 | { charset: 'utf-8' }, 17 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 18 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 19 | ], 20 | link: [ 21 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 22 | ] 23 | }, 24 | 25 | /* 26 | ** Global CSS 27 | */ 28 | css: [ 29 | ], 30 | 31 | /* 32 | ** Plugins to load before mounting the App 33 | ** https://nuxtjs.org/guide/plugins 34 | */ 35 | plugins: [ 36 | ], 37 | 38 | /* 39 | ** Auto import components 40 | ** See https://nuxtjs.org/api/configuration-components 41 | */ 42 | components: true, 43 | 44 | /* 45 | ** Nuxt.js dev-modules 46 | */ 47 | buildModules: [ 48 | // Doc: https://github.com/nuxt-community/eslint-module 49 | '@nuxtjs/eslint-module' 50 | ], 51 | 52 | /* 53 | ** Nuxt.js modules 54 | */ 55 | modules: [ 56 | // Doc: https://http.nuxtjs.org 57 | '@nuxt/http' 58 | ], 59 | 60 | /* 61 | ** Server Middleware 62 | */ 63 | serverMiddleware: { 64 | '/api': '~/api' 65 | }, 66 | 67 | /* 68 | ** For deployment you might want to edit host and port 69 | */ 70 | // server: { 71 | // port: 8000, // default: 3000 72 | // host: '0.0.0.0' // default: localhost 73 | // }, 74 | 75 | /* 76 | ** Build configuration 77 | ** See https://nuxtjs.org/api/configuration-build/ 78 | */ 79 | build: { 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 51 | 52 | 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 2 with Express 2 | 3 | > [ExpressJS](http://expressjs.com/) + [Nuxt 2](https://v2.nuxt.com) = :zap: 4 | 5 | Live Demo: [https://codesandbox.io/s/github/nuxt-community/express-template](https://codesandbox.io/s/github/nuxt-community/express-template) 6 | 7 | ## Nuxt 3 8 | 9 | Nuxt 3 is powered by [unjs/h3](https://github.com/unjs/h3) which has a compatible API with Express and is much faster with the ability to run in Workers ([read more about it](https://nuxt.com/blog/nuxt-on-the-edge)). 10 | 11 | This is why this template won't be migrated to Nuxt 3. 12 | 13 | ## Installation 14 | 15 | This is a template project, click on the green button "Use this template" at the top of this page and get started with GitHub :sparkles: 16 | 17 | One you cloned your repository, install the dependencies with: 18 | 19 | ```bash 20 | yarn install # or npm install 21 | ``` 22 | 23 | ## ExpressJS Changes 24 | 25 | - There is a `api` directory with the root of your `api` server. 26 | - The `routes` directory is called `api/routes`. 27 | 28 | ## Commands 29 | 30 | | Command | Description | 31 | |---------|-------------| 32 | | npm run dev | Start ExpressJS server in development with Nuxt.js in dev mode (hot reloading). Listen on [http://localhost:3000](http://localhost:3000). | 33 | | npm run build | Build the nuxt.js web application for production. | 34 | | npm start | Start ExpressJS server in production. | 35 | 36 | ## Examples 37 | 38 | - [Handling Protected SSR Routes](https://github.com/nuxt/express/blob/master/protected-ssr-api.md) 39 | 40 | ## Documentation 41 | 42 | - [ExpressJS](http://expressjs.com/en/guide/routing.html) 43 | - [Nuxt.js](https://nuxtjs.org/guide/) 44 | - [Vue.js](http://vuejs.org/guide/) 45 | 46 | ## Licenses 47 | 48 | - [ExpressJS license](https://github.com/expressjs/express/blob/master/LICENSE) 49 | - [NuxtJS license](https://github.com/nuxt/nuxt.js/blob/master/LICENSE.md) 50 | - [VueJS license](https://github.com/vuejs/vue/blob/master/LICENSE) 51 | 52 | 53 | --------------------------------------------------------------------------------