Leveraging environment variables within package.json

Working on an older application, I've encountered a challenge where the API endpoint URL varies depending on the system.

Currently, my package.json file looks like this:

"start": "cross-env API_ENDPOINT=http://localhost:5000/api/v1 react-scripts start"

The issue is that this value is static, so when deploying to Heroku, it attempts to connect to my localhost. What I want is something more flexible like this:

"start": "cross-env API_ENDPOINT={thisShouldBeDynamic} api/v1 react-scripts start"

Is there a way to achieve this?

P.S. The react-app-scripts version is ^0.4.0, so using .env files is not an option, and trust me, updating it wouldn't be ideal.

jsonherokunpmenvironment-variables

Answer №1

Since JSON format lacks native support for templating, the solution is to develop a script that can access and modify the content of a config.json file before saving it back.

You may want to consider starting with this resource: https://www.npmjs.com/package/config-template. By creating your own template filler, you can extract necessary environment variables and seamlessly integrate them into the configuration file for subsequent saving.

Answer №2

One way to customize your installation process is by using the postinstall NPM hook. Check out more information on how to do this here: https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process

Here's an example:

"scripts": {
   "postinstall": "node ./ops/heroku-build.js"
}

In your custom script, you can access Heroku environment variables through process.env. Use these variables to make changes to your package.json.

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

Is npm global feature going unused?

I encountered some npm issues in the past and followed solutions from sources like Stack Overflow and GitHub to fix them. Although they seemed to work at first, I recently discovered that my global npm packages are not being recognized or utilized. Whenev ...

node.jsnpm

Angular's ng toolkit universal experiencing loading issues and tools are malfunctioning

I encountered the following issue npm run build: prod commands are not functioning correctly ERROR: Cannot read property 'length' of undefined ERROR: If you think that this error shouldn't occur, please report it here: https://githu ...

angularnpm

A guide to transforming Gremlin query outputs into Pandas or Python data structures

Seeking to enhance the appearance of my Gremlin query results by transforming them into dataframes. The output from Gremlin queries often resembles Json format, especially seen in examples like the answer to one of my previous questions that involves the ...

pythonjsongremlinamazon-neptuneneptune-python-utils

What is the process for deploying a create-react-app using npm?

Upon attempting to deploy my Create React App using npm run build, I encounter a strange issue. While the deployment process runs smoothly, when I navigate to localhost:5000, I am greeted with a 404 error indicating that the requested path could not be fou ...

reactjsnpmdeployment

Error in electron-builder: Module 'dmg-license' was not found

Seeking a straightforward method to create an electron app for macOS from a Linux machine. Unfortunately, the electron-builder -m command is not functioning properly. Here is the complete output of the command: electron-builder -m • elec ...

javascriptmacosnpmelectronelectron-builder

Leveraging an SSH key to securely install an npm module from a private repository within a Docker

My role involves creating containers for nodejs projects. Within these projects, I utilize a private repository and require access to it. To achieve this, I have implemented the following Dockerfile: FROM node:15 RUN echo "StrictHostKeyChecking no&qu ...

node.jsdockernpmsshprivate-key

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

javascripttypescriptnpmvisual-studio-codenpm-start

`Accessing information within a nested JSON array``

I'm currently parsing through the JSON data below. While I can extract the id and name fields without any issues, I am encountering a problem when trying to access json.templates[i].dailyemails.length, as it always returns 0. Below is the structure o ...

javascriptjqueryjson

Rails JSON output is suddenly causing timestamps to glitch and default to 2000-01-01T01:31:35Z. What could be causing this unexpected

Currently, I am constructing a JSON object in Rails like this: @list = Array.new @list << { :created_at => item.created_at } end @list.to_json The problem arises when the browser receives data like this: "created_at\":\"200 ...

ruby-on-railsrubyjsonruby-on-rails-3

Deciphering JSON data outcomes in VB.NET

How can I extract specific data from the given code snippet stored in a textbox? { "items": [ { "snippet": { "channelId": "UCcTbyoZjhqoCn4yVawpMFDA", "title": "Forever - Stratovarius", "categoryId": ...

jsonvb.netparsing

The constructor error in ng-serve signalizes an issue in

Currently, I am developing an AngularJS application. However, when attempting to start the dev server, I encountered an issue with my ng serve command: https://i.stack.imgur.com/QujSe.png ...

javascriptangularjsnode.jsnpm

Encountered an issue while trying to use Figma's spellchecker extension

Despite following the instructions in the readme carefully, I am facing difficulties running the Figma spellchecker extension. Executing npm run build goes smoothly. But when I try to run npm run spellcheck, I encounter an error message in the console: co ...

javascriptnpmfigma-api

Setting up Webpack and Babel for ReactJS development

Recently, I started delving into the world of ReactJS and stumbled upon a tool called webpack which acts as a module bundler. However, I've hit a roadblock while configuring it and keep encountering the following error message: ERROR in ./src/index. ...

javascriptnode.jsreactjsnpmwebpack

Installing multiple versions of the same package with Yarn

In my dependencies, I have included angular at version 1.5.11: { "dependencies": { "angular": "1.5.11", "angular-foundation": "0.7.0" } } The dependency angular-foundation relies on angular@>=1.3.0. I am wondering why Yarn ins ...

npmyarnpkg

Python's request function is only retrieving a single element

Below is the code snippet I have: import base64 import requests import json import csv USERNAME, PASSWORD = 'Username', 'Password' req = requests.get( url="https://api.mysportsfeeds.com/v1.1/pull/nhl/2017-2018-regular/game_startin ...

pythonjsonrequest

Sorting customization within a complex nested array structure

Sorting a nested array can sometimes be tricky. Consider a JSON structure like the one shown below: var orders = [{ 'orderId': 1, 'sales': [{ 'salesNumbers': 3 }] }, { 'orderId': 2, ...

javascriptjsonangularjs

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

In my project, there are SCSS files stored in a "static" directory. Additionally, I have application components located in a separate directory, each containing its own SCSS file. I am seeking a way to compile all of these SCSS files into a single .css fi ...

cssnode.jsnpmsass

Encountered a 403 error while attempting to download packages from the Azure feed using N

I have been utilizing an Azure feed containing npm packages and connecting to it using a Personal Access Token with Packaging read & write scope. Up until recently, everything was functioning well, but now when attempting to download packages, I am enc ...

node.jsazurenpm

Transforming flat JSON into nested JSON with multiple arrays can be achieved using the Jolt transform

Struggling to create a JOLT transformation for converting flat JSON to nested JSON? Need help transforming the JSON structure using a JOLT spec? Visit to test your transformations. Input : [ { "container_id": "a", "carr ...

jsonapache-nifijolt

Attempting to start an Angular project using NG NEW constantly fails nowadays - always ends with error code EPERM

Can Angular still be considered a reliable framework when pervasive errors and bugs persist for extended periods without any clear resolution documented? .... 24695 silly saveTree | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

node.jsangularwindowsnpm