Hello, World Using Gridsome + Netlify Functions (Serverless)

Image for post
Image for post

Create your Gridsome Project

gridsome create grid-net-func-hello
cd grid-net-func-hello
Image for post
Image for post
gridsome develop
Image for post
Image for post
Gridsome Default Starter Template

Commit your project to Git

Image for post
Image for post

Hook up Netlify with our Git repo

Image for post
Image for post
Create a new site from Git
Image for post
Image for post
Enter the values in the red box so that Netlify can build your Gridsome project on their platform.
Image for post
Image for post

Create our serverless function

npm i -g netlify-cli
netlify functions:create
Image for post
Image for post
List of Netlify-CLI serverless function templates
Image for post
Image for post
Our site’s serverless functions in the Netlify Dashboard.

Call our function from our Gridsome static front-end

netlify dev
<script>
export default {
metaInfo: {
title: 'Hello, world!'
}
}
</script>
<script>
export default {
metaInfo: {
title: 'Hello, world!'
},
mounted() {
fetch('/.netlify/functions/hello-world')
.then(
res => res.json()
)
.then(
res => console.log(res.message)
)
}
}
</script>

Let’s play around a little to wrap up

<h1>{{ greeting || "Hello World" }}</h1>
http://localhost:8888/?name=james
Image for post
Image for post

Written by

Front-end Web Developer. Language lover. Traveler. Dude.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store