├── .prettierrc ├── static ├── icon.png ├── favicon.ico └── README.md ├── components ├── README.md └── Logo.vue ├── jsconfig.json ├── layouts ├── README.md └── default.vue ├── pages ├── README.md └── index.vue ├── assets └── README.md ├── plugins └── README.md ├── middleware └── README.md ├── .eslintrc.js ├── store └── README.md ├── README.md ├── lambda.js ├── serverless.yml ├── nuxt.config.js ├── server.js ├── package.json └── .gitignore /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/logaretm/nuxt-serverless-demo/HEAD/static/icon.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/logaretm/nuxt-serverless-demo/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | 'prettier', 13 | 'prettier/vue', 14 | 'plugin:prettier/recommended', 15 | 'plugin:nuxt/recommended' 16 | ], 17 | plugins: ['prettier'], 18 | // add your custom rules here 19 | rules: {} 20 | } 21 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # serverless-nuxt 2 | 3 | > My finest Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ yarn dev 13 | 14 | # build for production and launch server 15 | $ yarn build 16 | $ yarn start 17 | 18 | # generate static project 19 | $ yarn generate 20 | ``` 21 | 22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /lambda.js: -------------------------------------------------------------------------------- 1 | const awsServerlessExpress = require('aws-serverless-express'); 2 | 3 | // import the server factory function we created. 4 | const { createApp } = require('./server'); 5 | 6 | // Store a reference to the promise as we don't want to keep creating the server instance. 7 | const appPromise = createApp(); 8 | 9 | exports.nuxt = async (event, context) => { 10 | // should return a fastify instance once resolved. 11 | const app = await appPromise; 12 | 13 | // proxies the request to our underlying fastify server. 14 | return awsServerlessExpress.proxy(app.server, event, context, 'PROMISE') 15 | .promise; 16 | }; 17 | -------------------------------------------------------------------------------- /serverless.yml: -------------------------------------------------------------------------------- 1 | org: logaretm 2 | app: nuxt-test 3 | # serverless.yml 4 | 5 | # The service name 6 | service: nuxt-test 7 | 8 | # provider information 9 | # we are deploying on aws using the node 10.x runtime. 10 | provider: 11 | name: aws 12 | runtime: nodejs10.x 13 | 14 | # these are the functions that will run our app. 15 | # typically you need only one for our use-case. 16 | # our function is named app 17 | # the handler is located in lambda.js file exported as "nuxt". 18 | # our function will handle any HTTP requests to any path, you can change that if you want. 19 | functions: 20 | app: 21 | handler: lambda.nuxt 22 | events: 23 | - http: ANY / 24 | - http: ANY /{proxy+} 25 | 26 | # Add those plugins to our service 27 | plugins: 28 | - serverless-offline 29 | - serverless-apigw-binary 30 | 31 | custom: 32 | apigwBinary: 33 | types: 34 | - "*/*" 35 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable nuxt/no-cjs-in-config */ 2 | module.exports = { 3 | mode: 'universal', 4 | /* 5 | ** Headers of the page 6 | */ 7 | head: { 8 | title: process.env.npm_package_name || '', 9 | meta: [ 10 | { charset: 'utf-8' }, 11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 | { 13 | hid: 'description', 14 | name: 'description', 15 | content: process.env.npm_package_description || '' 16 | } 17 | ], 18 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 19 | }, 20 | /* 21 | ** Customize the progress-bar color 22 | */ 23 | loading: { color: '#fff' }, 24 | /* 25 | ** Global CSS 26 | */ 27 | css: [], 28 | /* 29 | ** Plugins to load before mounting the App 30 | */ 31 | plugins: [], 32 | /* 33 | ** Nuxt.js dev-modules 34 | */ 35 | buildModules: [ 36 | // Doc: https://github.com/nuxt-community/eslint-module 37 | process.env.NODE_ENV !== 'production' ? '@nuxtjs/eslint-module' : '' 38 | ].filter(Boolean), 39 | /* 40 | ** Nuxt.js modules 41 | */ 42 | modules: ['@nuxtjs/pwa'], 43 | /* 44 | ** Build configuration 45 | */ 46 | build: { 47 | /* 48 | ** You can extend webpack config here 49 | */ 50 | extend(config, ctx) {} 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const awsServerlessExpress = require('aws-serverless-express'); 3 | const { Nuxt } = require('nuxt-start'); 4 | 5 | // Define a list of mime types that we will serve. 6 | // Let's serve everything using a wild card 7 | const binaryTypes = ['*/*']; 8 | 9 | // Pass in our custom server function, which uses the aws-serverless-proxy 10 | // to convert our default handler to a serverless compatible one. 11 | const fastify = require('fastify')({ 12 | serverFactory(handler) { 13 | return awsServerlessExpress.createServer(handler, null, binaryTypes); 14 | } 15 | }); 16 | 17 | // Serve the `.nuxt/dist` folder using the `/_nuxt` prefix. 18 | fastify.register(require('fastify-static'), { 19 | root: path.join(__dirname, '.nuxt', 'dist'), 20 | prefix: '/_nuxt/' 21 | }); 22 | 23 | /** 24 | * Creates a fastify server with Nuxt middleware attached. 25 | **/ 26 | exports.createApp = async function start() { 27 | const config = require('./nuxt.config.js'); 28 | 29 | // In the Nuxt programmatic API 30 | // We need to explicitly set the dev to false. 31 | const nuxt = new Nuxt(Object.assign(config, { dev: false })); 32 | 33 | // wait for nuxt to be ready. 34 | await nuxt.ready(); 35 | fastify.use(nuxt.render); 36 | 37 | // wait for fastify to be ready. 38 | await fastify.ready(); 39 | 40 | return fastify; 41 | }; 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "serverless-nuxt", 3 | "version": "1.0.0", 4 | "description": "My finest Nuxt.js project", 5 | "author": "Abdelrahman Awad", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "offline": "NODE_ENV=development serverless offline start --dontPrintOutput", 13 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 14 | "deploy": "yarn build && sls deploy" 15 | }, 16 | "lint-staged": { 17 | "*.{js,vue}": "eslint" 18 | }, 19 | "husky": { 20 | "hooks": { 21 | "pre-commit": "lint-staged" 22 | } 23 | }, 24 | "dependencies": { 25 | "@nuxtjs/pwa": "^3.0.0-0", 26 | "aws-serverless-express": "^3.3.6", 27 | "fastify": "^2.7.1", 28 | "fastify-static": "^2.5.0", 29 | "nuxt": "^2.0.0", 30 | "nuxt-start": "^2.9.1" 31 | }, 32 | "devDependencies": { 33 | "@nuxtjs/eslint-config": "^1.0.1", 34 | "@nuxtjs/eslint-module": "^1.0.0", 35 | "babel-eslint": "^10.0.1", 36 | "eslint": "^6.1.0", 37 | "eslint-config-prettier": "^4.1.0", 38 | "eslint-plugin-nuxt": ">=0.4.2", 39 | "eslint-plugin-prettier": "^3.0.1", 40 | "husky": "^2.6.0", 41 | "lint-staged": "^8.2.1", 42 | "prettier": "^1.16.4", 43 | "serverless": "^1.50.1", 44 | "serverless-apigw-binary": "^0.4.4", 45 | "serverless-offline": "^5.10.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | 69 | -------------------------------------------------------------------------------- /.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 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store 89 | 90 | # Vim swap files 91 | *.swp 92 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | --------------------------------------------------------------------------------