frankiefab100/netlify-serverless-functions-demo

👨‍💻 Learn how to use netlify serveless functions to hide secret/API keys in a frontend JavaScript web application.

Netlify Serverless Functions Demo

Companion repository for the tutorial demostrating how to hide secret keys using netlify functions in a Frontend application

What do you mean by "Netlify functions" ?

Netlify Functions are files used deploy server-side code as API endpoints without the need of backend.

Prerequisites

To follow along with this tutorial, basic understanding of RESTful APIs and async/await is required.

Getting Started

It is recommended to start off from the testing branch.

The final demo app lives in the main branch: https://netlify-func-demo.netlify.app/

How to run locally 🚀

1. Clone the repository

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git

2. Change to netlify-serverless-functions-demo directory

cd netlify-serverless-functions-demo

3. Install dependencies

npm install

4. Run the app on the server

netlify dev

The project will be ready on localhost:8888 via: https://localhost:8888/.netlify/functions/getPhotos

Note: Add your API keys as Environment variable in .env: PIXABAY_API_KEY=your-api-key-here

License 📜

This project is protected under the MIT License.

Deploy

Resources

Check out the blog post: https://www.freecodecamp.org/news/hide-api-keys-in-frontend-apps-using-netlify-functions/

Relevant Links

• Netlify Functions
• Netlify Lambda
• Netlify Intro to Serverless Functions
• Netlify Edge Functions

---

Built with ❤️