Inspired by Andy Bell’s website, I set out to build a “Last listened to” element that pulled data from my Last.FM profile.
A quick dig around and the use of a custom element later I decided to use Netlify Functions, as my site is already hosted there.
The idea was that, my custom element would hit a function in Netlify, which in turn would hit the Last.FM API to get the tracks that I have been listening to.
- Last.FM API access setup ✅
- Custom element added to my site, styled and making a call ✅
- Basic Netlify function hosted and accessible, returning hardcoded data ✅
- Render web component with the data ✅
- Call Last.FM API from Netlify function 🔥
It turns out that calling an API from a Netlify function is not as easy as the documentation suggested.
require('node-fetch') ... fetch("api-endpoint") ...
- Netlify functions defaults to Node 12.8(I think it was .8 🤷♂️)
- Node fetch v3 only works in Node >12.20
- Node fetch v3 doesn’t support
- Node fetch v2 doesn’t support
- Netlify CLI was great but had the classic “works on my machine” problem
- Setting the Node version in Netlify wasn’t easy 🤷♂️