JungleJS is a static site generator, meaning that it generates every single route and compiles all the assets on build time. Since it’s a Svelte app, we can take advantage of Svelte’s lifecycle to create interactive UI with client-side requests if necessary. For most landing pages, blog, or portfolio/profile websites, this should be enough. It’s simple, performant, and saves hosting costs.

But sometimes we need a server (even when it’s not our own). A common use case for server-side operation is to send authenticated requests. Say we use the Mailchimp API to add users to our newsletter, or maybe the Spotify API to suggest a playlist based on the user’s mood. Both require us to send a key or token to identify ourselves. We cannot do this on the client-side because everyone can open the browser dev tools, find our secret keys, and do anything on behalf of our account.

Here’s where serverless functions come in. In a nutshell, these are a cloud service that allow us to run a server that is hosted, configured, and managed by a third-party, such as AWS Lambda, Netlify Functions, and Firebase Cloud Functions. I just learned about Netlify functions recently, so I made this starter site that combines JungleJS with Netlify functions.

# Install the global Netlify CLI package if you haven’t
npm install netlify-cli -g

# Clone and go to project directory
git clone https://github.com/ekafyi/junglejs-netlify-functions.git
cd junglejs-netlify-functions

# Install dependencies
npm install

# Start Netlify Dev server
netlify dev

# (Optional) Start Storybook server in a separate tab
npm run storybook

This is a simple starter with a netlify.toml configuration and a sample function in functions/hello.js. It’s based off my previous starter site, which includes Storybook and Tailwind CSS.

Installation

Do any of these:

• Clone by running git clone https://github.com/ekafyi/junglejs-netlify-functions.git on your CLI
• Create new repo with Github template
• Deploy with Netlify
• Deploy with Vercel

Then run netlify dev (or ntl dev for short) to start your server.

• Your site runs on localhost:3333
• You can access the functions at localhost:3333/.netlify/functions/{YOUR_FUNCTION_NAME}
  • I include a sample function called hello in this starter, which can be accessed at localhost:3333/.netlify/functions/hello.
  • This function takes an optional name query parameter, eg. localhost:3333/.netlify/functions/hello?name=Eka.

Port 3333 is configured in netlify.toml. You can change it to any other value (as long as it does not clash with used ports).

If you are not familiar with Netlify functions or netlify dev, check out my post about getting started with Netlify functions.

Getting started with Netlify Functions — Zero-config setup and our first functions

Eka ・ Jul 25 '20

#serverless #jamstack #beginners

I’m working on a demo site that demonstrates how to use Netlify functions in this starter site, so watch this space!

Bonus Track