Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Refactor/nuxt update and netlify dev #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcoeh merged 4 commits into master from refactor/nuxt-update-and-netlify-dev
Aug 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .eslintrc.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
11.6.0
lts/dubnium
45 changes: 0 additions & 45 deletions .yarnclean
View file Open in desktop

This file was deleted.

29 changes: 10 additions & 19 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion components/Example1.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
19 changes: 16 additions & 3 deletions components/Example2.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
25 changes: 20 additions & 5 deletions components/Example3.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
22 changes: 18 additions & 4 deletions components/Example4.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
19 changes: 16 additions & 3 deletions components/Example5.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
23 changes: 19 additions & 4 deletions components/Example6.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
21 changes: 17 additions & 4 deletions components/Example7.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion netlify-lambda-src/icanhazip.js → functions/icanhazip.js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import fetch from 'node-fetch'
const fetch = require('node-fetch')

const API_ENDPOINT = 'https://icanhazip.com/'

Expand Down
44 changes: 44 additions & 0 deletions functions/mailgun.js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
}
File renamed without changes.
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import fetch from 'node-fetch'
const fetch = require('node-fetch')
require('dotenv').config()

// eslint-disable-next-line require-await
Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /