DEV Community

Eka
Eka

Posted on

Go serverless with this JungleJS + Netlify functions starter site

#showdev #jamstack #svelte #junglejs

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.

Hackerman gif

Does not even take a “hacker” to find our credentials if we send it from the browser.

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.

GitHub logo ekafyi / junglejs-netlify-functions

Starter site for JungleJS + Netlify Functions + Storybook + TailwindCSS

JungleJS + Netlify Functions starter site

  

A starter site with:

Introductory posts:

Quick start

Deploy with Vercel Deploy with Netlify

Or create a new repo with Github template.

Install and develop

# 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
Enter fullscreen mode Exit fullscreen mode

Netlify Dev serves your site on localhost:3333. Your functions run on localhost:3333/.netlify/functions/{YOUR_FUNCTION_NAME}.

This starter comes with a sample function hello.js, which you can access on:

  • localhost:3333/.netlify/functions/hello
  • localhost:3333/.netlify/functions/hello?name=Eka (example with query parameter)

If you start…

View on GitHub

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:

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.

ekafyi

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

Top comments (0)