diff --git a/.eslintrc.js b/.eslintrc.js index f0fa3ac..a8e2c7c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,7 +13,10 @@ module.exports = { // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. '@nuxtjs', - 'plugin:prettier/recommended' + 'prettier', + 'prettier/vue', + 'plugin:prettier/recommended', + 'plugin:nuxt/recommended' ], // required to lint *.vue files plugins: ['prettier'], diff --git a/.nvmrc b/.nvmrc index 146d5de..0312896 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -11.6.0 +lts/dubnium diff --git a/.yarnclean b/.yarnclean deleted file mode 100644 index b591611..0000000 --- a/.yarnclean +++ /dev/null @@ -1,45 +0,0 @@ -# test directories -__tests__ -test -tests -powered-test - -# asset directories -docs -doc -website -images -assets - -# examples -example -examples - -# code coverage directories -coverage -.nyc_output - -# build scripts -Makefile -Gulpfile.js -Gruntfile.js - -# configs -appveyor.yml -circle.yml -codeship-services.yml -codeship-steps.yml -wercker.yml -.tern-project -.gitattributes -.editorconfig -.*ignore -.eslintrc -.jshintrc -.flowconfig -.documentup.json -.yarn-metadata.json -.travis.yml - -# misc -*.md diff --git a/README.md b/README.md index 240e572..1f33ad1 100644 --- a/README.md +++ b/README.md @@ -10,35 +10,26 @@ Live demo can be found [here](https://nuxt-netlify-functions-example.netlify.com/). -## Info -For the requests on the client side we use the [Axios Module](https://github.com/nuxt-community/axios-module). To proxy locally you have to set up the [Proxy Module](https://github.com/nuxt-community/proxy-module) in `nuxt.config.js`: - -```js -proxy: { - '/.netlify': { - target: 'http://localhost:9000', - pathRewrite: { '^/.netlify/functions': '' } - } -} -``` +## Testing functions locally +Thanks to the [Netlify Dev](https://www.netlify.com/products/dev/) command in the Netlify CLI (`yarn global add nelitfy-cli`), you can test your functions locally with no build step involved! + +After building the app and running `netlify dev` or `ntl dev`, you can test the functions locally by hitting the endpoint http://localhost:8888/.netlify/functions/ + ## Build Setup ``` bash -# Use nvm +# Use Node version specified in nvmrc $ nvm use # Install dependencies $ yarn -# Build lambda functions locally -$ yarn netlify-lambda build netlify-lambda-src - -# Serve lambda functions locally -$ yarn netlify-lambda serve netlify-lambda-src +# Build Nuxt app +$ yarn build -# Serve nuxt app with hot reload at localhost:3000 -$ yarn dev +# Serve Nuxt app and Netlify functions at localhost:8888 +$ netlify dev # Generate static project $ yarn generate diff --git a/components/Example1.vue b/components/Example1.vue index be785f0..64f03ea 100644 --- a/components/Example1.vue +++ b/components/Example1.vue @@ -27,6 +27,10 @@ export default {

1. Hello, World!

Hello

Response: {{ response }}

-

Error {{ error.status }}
{{ error.data }}

+

+ Error {{ error.status }} +
+ {{ error.data }} +

diff --git a/components/Example2.vue b/components/Example2.vue index 7b82ecf..da1e4fc 100644 --- a/components/Example2.vue +++ b/components/Example2.vue @@ -28,13 +28,26 @@ export default { diff --git a/components/Example3.vue b/components/Example3.vue index d4bce25..5b4b5b3 100644 --- a/components/Example3.vue +++ b/components/Example3.vue @@ -15,7 +15,7 @@ export default { try { const res = await this.$axios.$post( '/.netlify/functions/hello-name-post', - { name: name } + { name } ) this.response = res this.error = null @@ -41,14 +41,29 @@ export default { diff --git a/components/Example4.vue b/components/Example4.vue index 69a95bc..8a014b4 100644 --- a/components/Example4.vue +++ b/components/Example4.vue @@ -28,16 +28,30 @@ export default { diff --git a/components/Example5.vue b/components/Example5.vue index b78e267..7b96d20 100644 --- a/components/Example5.vue +++ b/components/Example5.vue @@ -38,13 +38,26 @@ export default { diff --git a/components/Example6.vue b/components/Example6.vue index 3905639..6c6b5f7 100644 --- a/components/Example6.vue +++ b/components/Example6.vue @@ -65,17 +65,32 @@ export default { diff --git a/components/Example7.vue b/components/Example7.vue index cb89f8a..7c91b3b 100644 --- a/components/Example7.vue +++ b/components/Example7.vue @@ -15,7 +15,7 @@ export default { try { const res = await this.$axios.$post( '/.netlify/functions/slack-webhook', - { name: name } + { name } ) this.response = res this.error = null @@ -29,13 +29,26 @@ export default { diff --git a/netlify-lambda-src/hello-name-post.js b/functions/hello-name-post.js similarity index 100% rename from netlify-lambda-src/hello-name-post.js rename to functions/hello-name-post.js diff --git a/netlify-lambda-src/hello-name.js b/functions/hello-name.js similarity index 100% rename from netlify-lambda-src/hello-name.js rename to functions/hello-name.js diff --git a/netlify-lambda-src/hello-world.js b/functions/hello-world.js similarity index 100% rename from netlify-lambda-src/hello-world.js rename to functions/hello-world.js diff --git a/netlify-lambda-src/icanhazip.js b/functions/icanhazip.js similarity index 90% rename from netlify-lambda-src/icanhazip.js rename to functions/icanhazip.js index ef9fbd2..bcb262e 100644 --- a/netlify-lambda-src/icanhazip.js +++ b/functions/icanhazip.js @@ -1,4 +1,4 @@ -import fetch from 'node-fetch' +const fetch = require('node-fetch') const API_ENDPOINT = 'https://icanhazip.com/' diff --git a/functions/mailgun.js b/functions/mailgun.js new file mode 100644 index 0000000..6d2a187 --- /dev/null +++ b/functions/mailgun.js @@ -0,0 +1,44 @@ +/* eslint-disable no-console */ +require('dotenv').config() +const { MG_API_KEY, MG_DOMAIN, MG_HOST } = process.env +const mailgun = require('mailgun.js') +const mg = mailgun.client({ + url: MG_HOST, + username: 'api', + key: MG_API_KEY +}) + +const sendEmail = async ({ name, recipient }) => { + console.log('Sending email') + + const res = await mg.messages.create(MG_DOMAIN, { + from: 'Netlify Function Example ', + to: recipient.toString(), + subject: `Hello ${name}`, + text: `Hello ${name}`, + html: `

👋 Hello ${name}

` + }) + + return res +} + +exports.handler = async event => { + // Only allow POST + if (event.httpMethod !== 'POST') { + return { statusCode: 405, body: 'Method Not Allowed' } + } + + try { + const data = JSON.parse(event.body) + await sendEmail(data) + return { + statusCode: 200, + body: 'Email sent!' + } + } catch (err) { + return { + statusCode: 500, + body: err.message || err + } + } +} diff --git a/netlify-lambda-src/random-cat.js b/functions/random-cat.js similarity index 100% rename from netlify-lambda-src/random-cat.js rename to functions/random-cat.js diff --git a/netlify-lambda-src/slack-webhook.js b/functions/slack-webhook.js similarity index 95% rename from netlify-lambda-src/slack-webhook.js rename to functions/slack-webhook.js index 95b97e2..e417f9b 100644 --- a/netlify-lambda-src/slack-webhook.js +++ b/functions/slack-webhook.js @@ -1,4 +1,4 @@ -import fetch from 'node-fetch' +const fetch = require('node-fetch') require('dotenv').config() // eslint-disable-next-line require-await diff --git a/layouts/default.vue b/layouts/default.vue index 2e549dc..fcd61db 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -2,15 +2,21 @@

nuxt-netlify-functions-example

- GitHub Repo + + GitHub Repo + - Created by Lucid + Created by + Lucid -