"Unfortunately, Azure Web Static Apps do not have the capability to access .env files that are prefixed with NEXT

Suppose I have an .env file set up like this:

NEXT_PUBLIC_API_BASE_PATH = value1

While this .env is functioning correctly in my local environment, once deployed to Azure Web Static Apps and added to the configurationhttps://i.sstatic.net/eqiYn.png

My application appears to be unable to read this .env file. When I debug it through the console, it shows the value as undefined. https://i.sstatic.net/GP2Fu.png

I am aware of a workaround by setting the value through my .yml file and next.config.js, but I understand that these solutions may not be ideal for a real production scenario. Is there a definitive solution to this issue?

javascripttypescriptazurenext.jsazure-static-web-app

Answer №1

To help protect my PUBLIC_ENV information, I stored it in my .yml file and then added the value to Github Secrets.

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

Exploring the File Selection Dialog in Node.js with TypeScript

Is it possible to display a file dialog in a Node.js TypeScript project without involving a browser or HTML? In my setup, I run the project through CMD and would like to show a box similar to this image: https://i.stack.imgur.com/nJt3h.png Any suggestio ...

javascriptnode.jswindowstypescriptfile

Using React Native to dynamically change color based on API response

I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...

javascripttypescriptreact-nativeexpostyled-components

Creating an interface for a class instance through the implementation of a class constructor

I am working on an application where developers can specify which component they want to render a certain part. I need users to understand that they must implement an interface, but I'm struggling with correctly writing the typing. export interface I ...

angulartypescriptprototype

Constructing Browserify with dependencies containing require statements within a try-catch block

When attempting to integrate timbre.js (npm version) with Browserify, I encountered an issue where require statements for optional dependencies were enclosed in a try statement (check the source here). This resulted in a browserify build error displaying: ...

npmbrowserifyjavascript

Object with a specific name sitting within an array nested within another object

I have a node.js model that includes an array called keys containing multiple objects. I am looking to display these named objects in the view. Below is the model: var mongoose = require('mongoose'); var website = require('./website' ...

javascriptnode.jsmongodbexpress

Encountering error code TS1003 while trying to access object properties using bracket notation in Typescript

How can object property be referenced using bracket notation in TypeScript? In traditional JavaScript, it can be done like this: getValue(object, key) { return object[key]; } By calling getValue({someKey: 1}, "someKey"), the function will return 1. H ...

typescript

"Using jQuery to enable ajax autocomplete feature with the ability to populate the same

I am encountering a problem with jQuery autocomplete. It works perfectly fine with one textbox, but when I create multiple textboxes using jQuery with the same ID, it only works for the first textbox and not the others. My question is how can I create mult ...

javascriptjqueryajaxautocomplete

In Internet Explorer 11, React 15.4.1 does not support using objects as valid child components

When trying to render a collection of children in React, make sure to use an array instead of objects. If you encounter the error "Objects are not valid as a React child," consider wrapping the object using createFragment(object) from the React add-ons. Do ...

javascriptreactjsecmascript-6reduxinternet-explorer-11

Unable to access the current state within an asynchronous function in React.js

I have encountered an issue with updating state in the top-level component (App) and accessing the updated state in an asynchronous function defined within useEffect(). Here are more details: The problem arises when I try to retrieve the state of the cons ...

javascriptreactjsreact-hooks

Techniques for finding the total value of a JSON array

After retrieving values from a database, I am using them in JSON/javascript as an array. For example, see https://i.sstatic.net/nLzk9.png The issue arises when trying to calculate the sum of the array elements. I attempted to solve it with this code: v ...

javascriptjson

Display the table upon completion of the form submission

I am trying to create a form where the table #mytable is only displayed after the form has been submitted. If nothing is entered in the form, the table should remain hidden. Any suggestions on how I can achieve this? <form action="" id="myform" method ...

javascriptjqueryhtmlcssforms

When implementing a Vue component, you may encounter a 'parentNode' TypeError

I'm experiencing an issue with a page that is only partially rendering. Specifically, the page renders Listings but not Bookings. After some investigation, I discovered that removing the divs associated with isReviewed() resolves the rendering issue. ...

javascriptvue.jsdomvue-component

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project

My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery examp ...

javascriptreactjsnext.jsswiper.js

Upon commencing the project, an error arises with reactstrap when attempting to import the library

Issue with Error console in node_modules/reactstrap/lib/index.js: SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1176:20) ... Node.js v18. ...

reactjsnpmnext.jsyarnpkgreactstrap

Error: An unexpected symbol '||=' was found

I'm facing an issue while trying to create a nextjs project with PDFViewer using @react-pdf-viewer. The error I encountered is "SyntaxError: Unexpected token '||=' when collecting pages. This problem seems to be originating from pdf.js in t ...

javascriptnext.jspdf.jsreact-pdf-viewer

Referring to a component type causes a cycle of dependencies

I have a unique situation where I am using a single service to open multiple dialogs, some of which can trigger other dialogs through the same service. The dynamic dialog service from PrimeNg is being used to open a dialog component by Type<any>. Ho ...

angulartypescript

Transfer elements from collections employing multer

Data Payload Example:- education[0][university]: jru education[0][degree]: mca education[0][specialization]: computer application education[0][certificate_pdf_url]: (binary) education[0][degree_type]: Teaching Degree education[0][years_of_study]: [&q ...

javascriptnode.jsexpressmulter

What is the best method for quickly filtering an array of objects according to the user's input?

What seemed like a simple task has me puzzled. I'm trying to sort through an array of objects based on user input. [{ name: Stan, age: 20, height: 190 }, { name: Pan, age: 30, height: 180 }, { name: Dan, age: 28, height: 185 }, { name: San, age: 20, ...

angulartypescriptionic4

Fetching the URL for the Facebook profile picture

Utilizing satellizer for authentication in a MEAN application. Once the authentication process is complete, I aim to retrieve the user's profile picture. Below is the code snippet that I am using: Angular Controller (function(){ 'use strict ...

javascriptangularjsnode.jsfacebookfacebook-graph-api

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Looking to streamline my code and apply the DRY pattern, I've been working on creating a helper function for my express http methods. The structure of each method is similar, but the req.params format varies between them. Here's how I attempted t ...

javascriptmysqlnode.jstypescriptexpress