Refactor/nuxt update and netlify dev

.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'],

.nvmrc

@@ -1 +1 @@
-11.6.0
+lts/dubnium

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/<function-name>
+
 
 ## 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

components/Example1.vue

@@ -27,6 +27,10 @@ export default {
     <h2>1. Hello, World!</h2>
     <ElButton type="primary" @click="helloWorld()">Hello</ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </div>
 </template>

components/Example2.vue

@@ -28,13 +28,26 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloName(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="helloName(form.name)"
+  >
     <h2>2. Hello, {name}</h2>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" required />
     </ElFormItem>
-    <ElButton type="primary" @click="helloName(form.name)">👋 Say hello</ElButton>
+    <ElButton type="primary" @click="helloName(form.name)">
+      👋 Say hello
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

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 {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloNamePost(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="helloNamePost(form.name)"
+  >
     <h2>3. Hello, {name} (POST version)</h2>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" />
     </ElFormItem>
-    <ElButton type="primary" @click="helloNamePost(form.name)">👋 Say hello</ElButton>
-    <ElButton type="danger" @click="helloNamePostError(form.name)">.$get() Error</ElButton>
+    <ElButton type="primary" @click="helloNamePost(form.name)">
+      👋 Say hello
+    </ElButton>
+    <ElButton type="danger" @click="helloNamePostError(form.name)">
+      .$get() Error
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example4.vue

@@ -28,16 +28,30 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="randomCat(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="randomCat(form.name)"
+  >
     <h2>4. Get a random cat with your name</h2>
     <p><em>API call done by your browser</em></p>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" required />
     </ElFormItem>
     <ElButton type="primary" @click="randomCat(form.name)">🐈 Meow</ElButton>
-    <p>Response:
-      <br><br><img v-show="response" :src="response" style="width:100%;height:auto;">
+    <p>
+      Response:
+      <br />
+      <br />
+      <img v-show="response" :src="response" style="width:100%;height:auto;" />
+    </p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
     </p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
   </ElForm>
 </template>

components/Example5.vue

@@ -38,13 +38,26 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="icanhazip()">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="icanhazip()"
+  >
     <h2>5. icanhazip.com</h2>
     <p><em>API call done by lambda function</em></p>
     <p>Your IP: {{ ip }}</p>
-    <ElButton type="primary" @click="icanhazip()">🤖 Haz AWS IP please</ElButton>
+    <ElButton type="primary" @click="icanhazip()">
+      🤖 Haz AWS IP please
+    </ElButton>
     <ElButton type="info" @click="response = '—'">Clear</ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example6.vue

@@ -65,17 +65,32 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="mailgunForm" :rules="rules" :model="form" label-width="80px" label-position="left">
-    <h2>6. Send form submission with <a href="https://www.mailgun.com/" target="_blank">Mailgun</a></h2>
+  <ElForm
+    ref="mailgunForm"
+    :rules="rules"
+    :model="form"
+    label-width="80px"
+    label-position="left"
+  >
+    <h2>
+      6. Send form submission with
+      <a href="https://www.mailgun.com/" target="_blank">Mailgun</a>
+    </h2>
     <ElFormItem label="Name" prop="name">
       <ElInput v-model="form.name" placeholder="Your name" required />
     </ElFormItem>
     <ElFormItem label="Email" prop="email">
       <ElInput v-model="form.email" placeholder="Your email" required />
     </ElFormItem>
-    <ElButton type="primary" @click="submitForm('mailgunForm')">💌 Send form</ElButton>
+    <ElButton type="primary" @click="submitForm('mailgunForm')">
+      💌 Send form
+    </ElButton>
     <ElButton type="info" @click="resetForm('mailgunForm')">Reset</ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

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 {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="sendSlackMessage(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="sendSlackMessage(form.name)"
+  >
     <h2>7. Send a Slack message</h2>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" />
     </ElFormItem>
-    <ElButton type="primary" @click="sendSlackMessage(form.name)">👋 Say hello</ElButton>
+    <ElButton type="primary" @click="sendSlackMessage(form.name)">
+      👋 Say hello
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

netlify-lambda-src/icanhazip.js → functions/icanhazip.js

@@ -1,4 +1,4 @@
-import fetch from 'node-fetch'
+const fetch = require('node-fetch')
 
 const API_ENDPOINT = 'https://icanhazip.com/'
 

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 <noreply@wearelucid.ch>',
+    to: recipient.toString(),
+    subject: `Hello ${name}`,
+    text: `Hello ${name}`,
+    html: `<h1>👋 Hello ${name}</h1>`
+  })
+
+  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
+    }
+  }
+}

netlify-lambda-src/slack-webhook.js → 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