Skip to content

πŸ‘¨β€πŸ’» Learn how to use netlify serveless functions to hide secret/API keys in a frontend JavaScript web application.

License

Notifications You must be signed in to change notification settings

frankiefab100/netlify-serverless-functions-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

44 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

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
  1. Change to netlify-serverless-functions-demo directory
cd netlify-serverless-functions-demo
  1. Install dependencies
npm install
  1. 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

netlify

Resources

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

Relevant Links


Built with ❀️