Go serverless with this JungleJS + Netlify functions starter site
Tags: showdev, jamstack, svelte, junglejs
Published: 2020-07-30 13:07:38

[JungleJS](https://www.junglejs.org/) 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](https://svelte.dev/tutorial/onmount) 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.

<img src="https://media.giphy.com/media/RyXVu4ZW454IM/giphy.gif" alt="Hackerman gif" />
<figcaption>Does not even take a “hacker” to find our credentials if we send it from the browser.</figcaption>

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](https://aws.amazon.com/lambda/), [Netlify Functions](https://www.netlify.com/products/functions), and [Firebase Cloud Functions](https://firebase.google.com/products/functions). I just learned about Netlify functions recently, so I made this starter site that combines JungleJS with Netlify functions. 

{% github ekafyi/junglejs-netlify-functions %}

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](https://github.com/ekafyi/junglejs-storybook-tailwind), 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](https://github.com/ekafyi/junglejs-netlify-functions/generate)
- [Deploy with Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/ekafyi/junglejs-netlify-functions)
- [Deploy with Vercel](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fekafyi%2Fjunglejs-netlify-functions%2Ftree%2Fmaster)

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.

{% link https://dev.to/ekafyi/getting-started-with-netlify-functions-part-1-zero-config-setup-and-writing-our-first-functions-1i5b %}

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

---

## Bonus Track

{% youtube iZ9vkd7Rp-g %}