├── .circleci └── config.yml ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── functions ├── .eslintrc ├── index.js ├── package-lock.json └── package.json ├── public └── .gitkeep ├── public_base └── .gitkeep └── src ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets └── README.md ├── components ├── AppLogo.vue └── README.md ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md └── index.vue ├── plugins └── README.md ├── static ├── README.md └── favicon.ico ├── store └── README.md └── webpack.config.js /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: ~/app 5 | docker: 6 | - image: node:10 7 | steps: 8 | - checkout 9 | - restore_cache: 10 | key: nuxt-ssr-{{ checksum "src/package.json" }}-{{ checksum "src/package-lock.json" }} 11 | - restore_cache: 12 | key: nuxt-ssr-{{ checksum "functions/package.json" }}-{{ checksum "functions/package-lock.json" }} 13 | - run: 14 | name: Dependencies 15 | command: npm --prefix src install && npm --prefix functions install && cp src/nuxt.config.js functions/ 16 | - run: 17 | name: Lint Test 18 | command: npm --prefix src run lint && npm --prefix functions run lint 19 | - run: 20 | name: Build 21 | command: npm --prefix src run build 22 | - run: 23 | name: Server Test 24 | command: npm --prefix src start 25 | background: true 26 | - run: 27 | name: Curl Test 28 | command: | 29 | sleep 5 30 | curl --retry 10 --retry-delay 5 -v http://127.0.0.1:3000/ 31 | - save_cache: 32 | key: nuxt-ssr-{{ checksum "src/package.json" }}-{{ checksum "src/package-lock.json" }} 33 | paths: 34 | - ./src/node_modules 35 | - save_cache: 36 | key: nuxt-ssr-{{ checksum "functions/package.json" }}-{{ checksum "functions/package-lock.json" }} 37 | paths: 38 | - ./functions/node_modules 39 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "(your firebase project)" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .firebase 2 | node_modules 3 | functions/nuxt 4 | functions/dist/ 5 | functions/nuxt.config.js 6 | public 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt-ssr-firebase 2 | 3 | [![CircleCI](https://circleci.com/gh/williamchong007/nuxt-ssr-firebase.svg?style=svg)](https://circleci.com/gh/williamchong007/nuxt-ssr-firebase) 4 | 5 | > A example repo for using nuxt with firebase hosting and cloud functions 6 | > Base on https://github.com/davideast/nuxt-firebase 7 | 8 | ## Deployment flow 9 | 10 | - Change firebase project to yours in `.firbaserc` 11 | ``` 12 | { 13 | "projects": { 14 | "default": "(your firebase project)" 15 | } 16 | } 17 | ``` 18 | 19 | - Install npm dependencies 20 | ```bash 21 | npm --prefix src install 22 | npm --prefix functions install 23 | ``` 24 | 25 | - Deploy everything 26 | ```bash 27 | firebase deploy 28 | ``` 29 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "functions": { 3 | "source": "functions", 4 | "predeploy": [ 5 | "npm --prefix src run lint && npm --prefix src run build && rm -rf functions/nuxt && cp -r src/nuxt/ functions/nuxt/ && cp src/nuxt.config.js functions/ && npm --prefix functions run lint" 6 | ] 7 | }, 8 | "hosting": { 9 | "predeploy": [ 10 | "rm -rf public/* && mkdir -p public/_nuxt && cp -a src/nuxt/dist/client/. public/_nuxt && cp -a src/static/. public/ && cp -a public_base/. public/" 11 | ], 12 | "public": "public", 13 | "ignore": [ 14 | "firebase.json", 15 | "**/.*", 16 | "**/node_modules/**" 17 | ], 18 | "rewrites": [ 19 | { 20 | "source": "**", 21 | "function": "ssrapp" 22 | } 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /functions/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb-base" 4 | } 5 | -------------------------------------------------------------------------------- /functions/index.js: -------------------------------------------------------------------------------- 1 | const functions = require('firebase-functions'); 2 | const { Nuxt } = require('nuxt-start'); 3 | 4 | const nuxtConfig = require('./nuxt.config.js'); 5 | 6 | const config = { 7 | ...nuxtConfig, 8 | dev: false, 9 | buildDir: 'nuxt', 10 | }; 11 | const nuxt = new Nuxt(config); 12 | 13 | exports.ssrapp = functions.https.onRequest(async (req, res) => { 14 | await nuxt.ready(); 15 | nuxt.render(req, res); 16 | }); 17 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "description": "Cloud Functions for Firebase", 4 | "engines": { 5 | "node": "8" 6 | }, 7 | "scripts": { 8 | "lint": "./node_modules/.bin/eslint *.js" 9 | }, 10 | "dependencies": { 11 | "acorn": "^6.1.1", 12 | "clone": "^2.1.1", 13 | "compression": "^1.7.3", 14 | "core-js": "^2.5.7", 15 | "debug": "^3.1.0", 16 | "firebase-admin": "^6.4.0", 17 | "firebase-functions": "^2.1.0", 18 | "lodash": "^4.17.10", 19 | "nuxt-start": "^2.3.4", 20 | "vue": "^2.5.17", 21 | "vue-meta": "^1.5.5", 22 | "vue-router": "^3.0.1", 23 | "vue-server-renderer": "^2.5.17", 24 | "vue-template-compiler": "^2.5.17", 25 | "vuex": "^3.0.1" 26 | }, 27 | "devDependencies": { 28 | "babel-eslint": "^10.0.1", 29 | "eslint": "^5.3.0", 30 | "eslint-config-airbnb-base": "^13.1.0", 31 | "eslint-plugin-import": "^2.14.0" 32 | }, 33 | "private": true 34 | } 35 | -------------------------------------------------------------------------------- /public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/williamchong/nuxt-ssr-firebase/dc92aa49a238117eff24a20983b7ebefb5dd55b7/public/.gitkeep -------------------------------------------------------------------------------- /public_base/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/williamchong/nuxt-ssr-firebase/dc92aa49a238117eff24a20983b7ebefb5dd55b7/public_base/.gitkeep -------------------------------------------------------------------------------- /src/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 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 | -------------------------------------------------------------------------------- /src/.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 | 'airbnb-base', 12 | 'plugin:vue/recommended', 13 | 'plugin:nuxt/recommended', 14 | ], 15 | rules: { 16 | 'import/extensions': ['error', 'always', { 17 | js: 'never', 18 | vue: 'never' 19 | }], 20 | }, 21 | globals: {}, 22 | settings: { 23 | 'import/resolver': { 24 | webpack: 'webpack.config.js', 25 | }, 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /src/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-ssr-firebase 2 | 3 | > A example repo for using nuxt with firebase hosting and cloud functions 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 23 | -------------------------------------------------------------------------------- /src/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /src/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 54 | -------------------------------------------------------------------------------- /src/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /src/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'nuxt-ssr-firebase', 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { hid: 'description', name: 'description', content: 'A example repo for using nuxt with firebase hosting and cloud functions' }, 11 | ], 12 | link: [ 13 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 14 | ], 15 | }, 16 | /* 17 | ** Customize the progress bar color 18 | */ 19 | loading: { color: '#3B8070' }, 20 | /* 21 | ** Build configuration 22 | */ 23 | buildDir: 'nuxt', 24 | build: { 25 | extractCSS: true, 26 | babel: { 27 | presets: ({ isServer }) => [ 28 | [ 29 | '@nuxt/babel-preset-app', 30 | { 31 | targets: isServer 32 | ? { node: '8.11.1' } 33 | : { browsers: ['defaults'] }, 34 | }, 35 | ], 36 | ], 37 | }, 38 | /* 39 | ** Run ESLint on save 40 | */ 41 | extend(config, { isDev, isClient }) { 42 | if (isDev && isClient) { 43 | config.module.rules.push({ 44 | enforce: 'pre', 45 | test: /\.(js|vue)$/, 46 | loader: 'eslint-loader', 47 | exclude: /(node_modules)/, 48 | }); 49 | } 50 | }, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-ssr-firebase", 3 | "version": "1.0.0", 4 | "description": "A example repo for using nuxt with firebase hosting and cloud functions", 5 | "author": "William Chong ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "nuxt": "^2.3.4" 17 | }, 18 | "devDependencies": { 19 | "babel-eslint": "^10.0.1", 20 | "eslint": "^5.3.0", 21 | "eslint-config-airbnb-base": "^13.1.0", 22 | "eslint-import-resolver-webpack": "^0.10.1", 23 | "eslint-loader": "^2.1.1", 24 | "eslint-plugin-import": "^2.14.0", 25 | "eslint-plugin-nuxt": "^0.3.0", 26 | "eslint-plugin-vue": "^5.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/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: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 40 | 41 | 72 | -------------------------------------------------------------------------------- /src/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /src/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/williamchong/nuxt-ssr-firebase/dc92aa49a238117eff24a20983b7ebefb5dd55b7/src/static/favicon.ico -------------------------------------------------------------------------------- /src/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /src/webpack.config.js: -------------------------------------------------------------------------------- 1 | const resolve = require('path').resolve; // eslint-disable-line 2 | 3 | // Minimal Webpack config to supply to Eslint. 4 | // This is not actually used by Nuxt but instead mirrors 5 | // the resolve and loader rules. 6 | module.exports = { 7 | resolve: { 8 | modules: [resolve(__dirname, 'lib'), 'node_modules'], 9 | extensions: ['.js', '.vue'], 10 | alias: { 11 | '~': __dirname, 12 | '@': __dirname, 13 | // your aliases go here. 14 | }, 15 | }, 16 | 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.js$/, 21 | exclude: /node_modules/, 22 | loader: 'babel-loader', 23 | }, 24 | { 25 | test: /\.vue$/, 26 | exclude: /node_modules/, 27 | loader: 'vue-loader', 28 | }, 29 | ], 30 | }, 31 | }; 32 | --------------------------------------------------------------------------------