An open API service indexing awesome lists of open source software.

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

👨‍💻 Learn how to use netlify serverless functions to hide secret/API keys in a frontend JavaScript web application.
https://github.com/frankiefab100/netlify-serverless-functions-demo

demo-app freecodecamp freecodecamp-javascript lambda lambda-functions netlify netlify-deployment netlify-functions netlify-lambda serverless serverless-functions tutorial tutorial-code

Last synced: 26 days ago
JSON representation

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

Awesome Lists containing this project

README

        


Netlify Serverless Functions Demo


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



netlify-serverless-functions-demo forks


netlify-serverless-functions-demo stars


netlify-serverless-functions-demo issues


netlify-serverless-functions-demo licence







## 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](https://github.com/frankiefab100/netlify-serverless-functions-demo/tree/testing).

The final demo app lives in the `main` branch:

## How to run locally 🚀

1. Clone the repository

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

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

```BASH
cd netlify-serverless-functions-demo
```

3. Install dependencies

```BASH
npm install
```

4. Run the app on the server
```BASH
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](./License).

## Deploy
[![netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/frankiefab100/netlify-serverless-functions-demo)

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

## Relevant Links

- [Netlify Functions](https://docs.netlify.com/functions/overview/)
- [Netlify Lambda](https://github.com/netlify/netlify-lambda#usage)
- [Netlify Intro to Serverless Functions](https://www.netlify.com/blog/intro-to-serverless-functions/)
- [Netlify Edge Functions](https://docs.netlify.com/edge-functions/get-started/)




Built with ❤️