Tips for securely concealing an API key during website deployment on Netlify

Recently, I created a small website using Javascript just for fun and I'm looking to deploy it to Netlify. However, I've encountered an issue with the API key that the website uses. I'm struggling to figure out how to conceal this key. Currently, the key is stored in a variable within the JS file that also contains all the website's logic.

To clarify, my goal is not to hide the API key from the git repo, but rather from the JS file after deploying it to Netlify.

Is it even possible to achieve this on Netlify?

javascriptnetlify

Answer №1

After deploying your site on Netlify, navigate to the following settings:

'Site settings' > 'Build & deploy' > 'Environment' > 'Environment variables'

You will see a button labeled "Edit variables", where you can save your API_KEY Name and its corresponding value as key:value pairs.

View Demo 1 View Demo 2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for smoothly transitioning between tabs in IONIC by simply clicking on a link or url

Imagine having two tabs within my application: tab-one and tab-two. I am trying to navigate from the view of tab-one (one.html) to the view of tab-two (two.html). I have attempted using $state.go(), $location, and $window.location but none of them seem t ...

javascriptiosangularjsionic-frameworktabs

Select a configuration for binding an array of objects in AngularJS

Plunkr: http://plnkr.co/edit/RgNcSg?p=preview I have a dropdown menu displaying different "locations," which are sourced from an array of objects. Despite setting the object value in my controller, it does not appear selected in the dropdown menu. The HTM ...

javascriptangularjsng-options

Executing axios calls within other axios calls and altering state in React before all calls have completed

Currently, I am working on implementing nested axios calls to create the desired object by making multiple API requests. However, I am facing an issue where the state updates before all requests have finished, causing my table to populate entry by entry ...

javascriptreactjstypescriptasynchronousaxios

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

In our Typescript-based NodeJs project utilizing Mongoose, we are seeking the right approach to define an enum field on a Mongoose schema that aligns with a Typescript enum. To illustrate, consider the following enum: enum StatusType { Approved = 1, ...

javascriptnode.jstypescriptmongodbmongoose

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

What is preventing Angular from loading on this Plnkr?

I've spent time researching my problem and testing various solutions, but I still can't seem to resolve it. Angular doesn't appear to be loading correctly in Plunker for some reason. I've heard that ng-app is no longer supported in ne ...

javascriptangularjsplnkr.co

How can I download a PDF file in React.js using TypeScript on Next.js?

I've created a component to download a PDF file. The PDF file is named resumeroshan.pdf and it's located inside the Assets folder. "use client"; import resume from "/../../Assets/resumeroshan.pdf"; export default function Abo ...

javascriptnode.jsreactjsfilenext.js

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

javascriptcssreactjstypescriptdatetime

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

When running the command `npm start`, an error message is generated

Hey everyone, I've been trying to learn some basic AngularJS 2.0 skills through a tutorial. Unfortunately, when I tried running the command npm run start, it didn't work as expected. I'm currently using Git Bash on Windows 10 OS. If you hav ...

javascriptnode.jsangularnpm

Obtain a string in JSON format upon clicking in Angular 2

I am working on extracting the title from a json response using a click event. Currently, I can retrieve all the titles when the button is clicked, but I am looking for a way to obtain a specific title based on the button or a href that the user has clicke ...

javascriptjqueryjsonangular

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

JavaScript and AJAX are showing an error message that says: "ReferenceError: x is not

I am currently working on a jQuery function that retrieves the value from a PHP-generated checkbox and sends it through AJAX. The value being sent is always a single word consisting only of letters. Here is the script I have written: <script type="text ...

javascriptajax

Combining NodeJs with Mysql for multiple queries using a chained method

Hey everyone, I'm struggling with running mysql queries repeatedly in my Node.js application. I need to shape the second query based on the results of the first one. The code example I have below is not working as expected. Can anyone provide guidance ...

javascriptmysqlnode.js

Steps for retrieving user information post authentication query:1. Begin by initiating the query to authenticate the

This is my script.js file var express = require('express'); var router = express.Router(); var expressValidator = require('express-validator'); var passport = require('passport'); const bcrypt = require('bcrypt'); c ...

javascriptnode.jsexpresspassport.js

What is the correct way to utilize browser actions for sending keys with the "?" symbol in Protractor?

I'm facing an issue in my tests with a particular line of code browser.actions().sendKeys(Key.chord(Key.CONTROL, '?')).perform(); Interestingly, it works fine with another symbol. For example: browser.actions().sendKeys(Key.chord(Key.CONT ...

javascriptangularjsprotractor

Pass the $scope object from a controller to a modal controller

I am facing an issue with transferring the $scope variable from ctrlone to ctrltwo, which is a modal window on my page. When I open the modal in ctrlone, my code looks like this: var modalInstance = $modal.open({ templateUrl: 'Modal.html&ap ...

javascriptangularjsangularjs-scopebootstrap-modal

Converting an array of objects to an array based on an interface

I'm currently facing an issue with assigning an array of objects to an interface-based array. Here is the current implementation in my item.ts interface: export interface IItem { id: number, text: string, members: any } In the item.component.ts ...

javascriptarraysangulartypescript

Utilizing a library across various files in Node.js

I am looking to integrate Winston for logging in my nodejs express project. Within my main file ( server.js ) I currently have the following code snippet: const winston = require('winston'); winston.level = process.env.LOG_LEVEL winston.log(&ap ...

javascriptnode.jsexpresswinston