Skip to content

Commit ee705fc

Browse files
marcoehmarcoeh
committed
[Update] Add more examples and some documentation
1 parent a3b1019 commit ee705fc

File tree

12 files changed

+299
-49
lines changed

12 files changed

+299
-49
lines changed

‎README.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@
44

55
> Nuxt.js example for running Netlify functions locally in a dev environment and as a generated static site deployed to Netlify
66
7+
## Info
8+
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`:
9+
10+
```js
11+
proxy: {
12+
'/.netlify': {
13+
target: 'http://localhost:9000',
14+
pathRewrite: { '^/.netlify/functions': '' }
15+
}
16+
}
17+
```
18+
719
## Build Setup
820

921
``` bash
@@ -13,12 +25,12 @@ $ nvm use
1325
# Install dependencies
1426
$ yarn
1527

28+
# Build lambda functions locally
29+
$ yarn netlify-lambda build netlify-lambda-src
30+
1631
# Serve lambda functions locally
1732
$ yarn netlify-lambda serve netlify-lambda-src
1833

19-
# Build lambda functions locally if you feel like
20-
# $ yarn netlify-lambda build netlify-lambda-src
21-
2234
# Serve nuxt app with hot reload at localhost:3000
2335
$ yarn dev
2436

‎components/Example1.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
export default {
3+
name: 'Example1',
4+
data() {
5+
return {
6+
response: '—',
7+
error: null
8+
}
9+
},
10+
methods: {
11+
async helloWorld() {
12+
try {
13+
const res = await this.$axios.$get('/.netlify/functions/hello-world')
14+
this.response = res
15+
this.error = null
16+
} catch (e) {
17+
this.error = e.response
18+
this.response = '—'
19+
}
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<template>
26+
<div>
27+
<h2>1. Hello, World!</h2>
28+
<ElButton type="primary" @click="helloWorld()">Hello</ElButton>
29+
<p>Response: {{ response }}</p>
30+
<p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
31+
</div>
32+
</template>

‎components/Example2.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
export default {
3+
name: 'Example2',
4+
data() {
5+
return {
6+
form: {
7+
name: ''
8+
},
9+
response: '—',
10+
error: null
11+
}
12+
},
13+
methods: {
14+
async helloName(name) {
15+
try {
16+
const res = await this.$axios.$get(
17+
`/.netlify/functions/hello-name?name=${name}`
18+
)
19+
this.response = res
20+
this.error = null
21+
} catch (e) {
22+
this.error = e.response
23+
this.response = '—'
24+
}
25+
}
26+
}
27+
}
28+
</script>
29+
30+
<template>
31+
<ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloName(form.name)">
32+
<h2>2. Hello, {name}</h2>
33+
<ElFormItem label="Name">
34+
<ElInput v-model="form.name" placeholder="Your name" required />
35+
</ElFormItem>
36+
<ElButton type="primary" @click="helloName(form.name)">👋 Say hello</ElButton>
37+
<p>Response: {{ response }}</p>
38+
<p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
39+
</ElForm>
40+
</template>

‎components/Example3.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script>
2+
export default {
3+
name: 'Example3',
4+
data() {
5+
return {
6+
form: {
7+
name: ''
8+
},
9+
response: '—',
10+
error: null
11+
}
12+
},
13+
methods: {
14+
async helloNamePost(name) {
15+
try {
16+
const res = await this.$axios.$post(
17+
'/.netlify/functions/hello-name-post',
18+
{ name: name }
19+
)
20+
this.response = res
21+
this.error = null
22+
} catch (e) {
23+
this.error = e.response
24+
this.response = '—'
25+
}
26+
},
27+
async helloNamePostError(name) {
28+
try {
29+
const res = await this.$axios.$get(
30+
`/.netlify/functions/hello-name-post?name=${name}`
31+
)
32+
this.response = res
33+
this.error = null
34+
} catch (e) {
35+
this.error = e.response
36+
this.response = '—'
37+
}
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<template>
44+
<ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloNamePost(form.name)">
45+
<h2>3. Hello, {name} (POST version)</h2>
46+
<ElFormItem label="Name">
47+
<ElInput v-model="form.name" placeholder="Your name" required />
48+
</ElFormItem>
49+
<ElButton type="primary" @click="helloNamePost(form.name)">👋 Say hello</ElButton>
50+
<ElButton type="danger" @click="helloNamePostError(form.name)">.$get() Error</ElButton>
51+
<p>Response: {{ response }}</p>
52+
<p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
53+
</ElForm>
54+
</template>

‎components/Example4.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script>
2+
export default {
3+
name: 'Example4',
4+
data() {
5+
return {
6+
form: {
7+
name: ''
8+
},
9+
response: null,
10+
error: null
11+
}
12+
},
13+
methods: {
14+
async randomCat(name) {
15+
try {
16+
const res = await this.$axios.$get(
17+
`/.netlify/functions/random-cat?name=${name}`
18+
)
19+
this.response = res
20+
this.error = null
21+
} catch (e) {
22+
this.error = e.response
23+
this.response = null
24+
}
25+
}
26+
}
27+
}
28+
</script>
29+
30+
<template>
31+
<ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="randomCat(form.name)">
32+
<h2>4. Get a random cat with your name</h2>
33+
<p><em>API call done by your browser</em></p>
34+
<ElFormItem label="Name">
35+
<ElInput v-model="form.name" placeholder="Your name" required />
36+
</ElFormItem>
37+
<ElButton type="primary" @click="randomCat(form.name)">👋 Say hello</ElButton>
38+
<p>Response:
39+
<br><br><img v-show="response" :src="response">
40+
</p>
41+
<p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
42+
</ElForm>
43+
</template>

‎components/Example5.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script>
2+
export default {
3+
name: 'Example5',
4+
data() {
5+
return {
6+
form: {},
7+
response: '—',
8+
error: null,
9+
ip: null
10+
}
11+
},
12+
mounted() {
13+
this.getBrowserIp()
14+
},
15+
methods: {
16+
async getBrowserIp() {
17+
try {
18+
const res = await this.$axios.$get('https://icanhazip.com')
19+
this.ip = res
20+
this.error = null
21+
} catch (e) {
22+
this.error = e.response
23+
this.ip = null
24+
}
25+
},
26+
async icanhazip() {
27+
try {
28+
const res = await this.$axios.$get('/.netlify/functions/icanhazip')
29+
this.response = res
30+
this.error = null
31+
} catch (e) {
32+
this.error = e.response
33+
this.response = '—'
34+
}
35+
}
36+
}
37+
}
38+
</script>
39+
40+
<template>
41+
<ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="icanhazip()">
42+
<h2>5. icanhazip.com</h2>
43+
<p><em>API call done by lambda function</em></p>
44+
<p>Your IP: {{ ip }}</p>
45+
<ElButton type="primary" @click="icanhazip()">🤖 Haz AWS IP please</ElButton>
46+
<ElButton type="info" @click="response = '—'">Clear</ElButton>
47+
<p>Response: {{ response }}</p>
48+
<p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
49+
</ElForm>
50+
</template>

‎components/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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.**

‎layouts/default.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<ElContainer direction="vertical" class="Layout">
33
<ElHeader height="auto">
44
<h1>nuxt-netlify-functions-example</h1>
5+
<a href="https://github.com/wearelucid/nuxt-netlify-functions-example" target="_blank">GitHub Repo</a>
56
</ElHeader>
67
<ElMain>
78
<nuxt />

‎netlify-lambda-src/hello-name-post.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// eslint-disable-next-line require-await
2+
exports.handler = async (event, context) => {
3+
// Only allow POST
4+
if (event.httpMethod !== 'POST') {
5+
return { statusCode: 405, body: 'Method Not Allowed' }
6+
}
7+
8+
const data = JSON.parse(event.body)
9+
const name = data.name || 'World'
10+
11+
return {
12+
statusCode: 200,
13+
body: `Hello, ${name}`
14+
}
15+
}

‎netlify-lambda-src/icanhazip.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import fetch from 'node-fetch'
2+
3+
const API_ENDPOINT = 'https://icanhazip.com/'
4+
5+
exports.handler = async (event, context) => {
6+
const res = await fetch(API_ENDPOINT)
7+
.then(response => response.text())
8+
.then(data => ({
9+
statusCode: 200,
10+
body: `AWS IP is ${data}`
11+
}))
12+
.catch(error => ({ statusCode: 422, body: String(error) }))
13+
return res
14+
}

‎netlify-lambda-src/random-cat.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// eslint-disable-next-line require-await
2+
exports.handler = async (event, context) => {
3+
const name = event.queryStringParameters.name || 'Meow'
4+
5+
return {
6+
statusCode: 200,
7+
body: `https://cataas.com/cat/gif/says/${name}`
8+
}
9+
}

‎pages/index.vue

Lines changed: 20 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,33 @@
11
<script>
2+
import Example1 from '@/components/Example1'
3+
import Example2 from '@/components/Example2'
4+
import Example3 from '@/components/Example3'
5+
import Example4 from '@/components/Example4'
6+
import Example5 from '@/components/Example5'
7+
28
export default {
3-
data() {
4-
return {
5-
examples: {
6-
helloWorld: {
7-
response: '—',
8-
error: null
9-
},
10-
helloName: {
11-
name: '',
12-
response: '—',
13-
error: null
14-
}
15-
}
16-
}
17-
},
18-
methods: {
19-
async helloWorld() {
20-
try {
21-
const res = await this.$axios.$get('/.netlify/functions/hello-world')
22-
this.examples.helloWorld.response = res
23-
this.examples.helloWorld.error = null
24-
} catch (e) {
25-
this.examples.helloWorld.error = e.response
26-
}
27-
},
28-
async helloName(name) {
29-
try {
30-
const res = await this.$axios.$get(
31-
`/.netlify/functions/hello-name?name=${name}`
32-
)
33-
this.examples.helloName.response = res
34-
this.examples.helloName.error = null
35-
} catch (e) {
36-
this.examples.helloName.error = e.response
37-
}
38-
}
9+
components: {
10+
Example1,
11+
Example2,
12+
Example3,
13+
Example4,
14+
Example5
3915
}
4016
}
4117
</script>
4218

4319
<template>
4420
<div>
4521
<hr class="separator">
46-
<h2>Hello, World!</h2>
47-
<ElButton slot="append" type="primary" :loading="false" @click="helloWorld()">Ok cool</ElButton>
48-
<p>Response: {{ examples.helloWorld.response }}</p>
49-
<p v-if="examples.helloWorld.error" style="color:red;"><strong>Error {{ examples.helloWorld.error.status }}</strong><br>{{ examples.helloWorld.error.data }}</p>
22+
<Example1 />
23+
<hr class="separator">
24+
<Example2 />
25+
<hr class="separator">
26+
<Example3 />
27+
<hr class="separator">
28+
<Example4 />
5029
<hr class="separator">
51-
<h2>Hello, {name}</h2>
52-
<ElInput v-model="examples.helloName.name" placeholder="Your name">
53-
<ElButton slot="append" type="primary" @click="helloName(examples.helloName.name)">👋 Say hello</ElButton>
54-
</ElInput>
55-
<p>Response: {{ examples.helloName.response }}</p>
56-
<p v-if="examples.helloName.error" style="color:red;"><strong>Error {{ examples.helloName.error.status }}</strong><br>{{ examples.helloName.error.data }}</p>
30+
<Example5 />
5731
<hr class="separator">
5832
</div>
5933
</template>

0 commit comments

Comments
 (0)