Obtaining Runtime Inputs from the Command Line

I have been using a unique Vue SPA boilerplate found at this link, which utilizes webpack as its foundation.

During the development process or when deploying the application, I have successfully utilized process.env.NODE_ENV to differentiate between a development and production build. Everything has been working smoothly so far.

Now, I am looking for a method to pass command line arguments that can be interpreted in a similar way. For example, I would like to run a command like npm run dev --foo=1 and then retrieve it using something like process.argv.slice(2).foo.

I have attempted to access command line arguments within the configuration files and also tried modifying them with no luck.

Another approach I experimented with was passing arguments through "env" using --env.foo and adjusting the node modules export accordingly:

module.exports = env => {
    // utilize the env variable here
}

Unfortunately, none of these attempts have been successful. Is there a glaring oversight on my part?

Answer №1

The typical approach for managing this kind of situation involves keeping multiple complete configuration files and selecting one to use when they are loaded, even though it may not be the most concise method.

Additionally, having command-line flags for ease of use may be preferred,

env="foo" npm run dev

as well as

npm run dev --env=foo

both being equally viable in most scenarios.

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

using vuejs, learn how to retrieve properties within the .then function

This is the code I am working on: methods: { async pay() { this.$notify(`working`); if (!this.$v.$invalid) { try { var data = { to: this.to, subject: this.subject, }; let resp ...

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

Ways to troubleshoot the npm issue encountered while attempting to update

leolemus@Leos-MBP-2 ~ % npm install -g npm@latest npm does not support Node.js v15.11.0 You should probably upgrade to a newer version of node as we can't make any promises that npm will work with this version. You can find the latest version at https ...

The method hasOwnProperty does not function as intended

Upon receiving a JSON object from the server ({error:true}), I attempted to verify if the key "error" exists. Surprisingly, the function hasOwnProperty returned false. Here is the snippet of code that led to this unexpected result: $http({ header ...

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

I've come across a lot of helpful information regarding the usage of Date() and timezones, but something seems to be off. In my GraphQL setup (sourcing from Sanity), I have configured it to use formatString in this manner: export default function Minu ...

Vue template compilation issue: 'undefined' properties cannot be read (referencing '_c')

Currently, I am in the process of integrating a customized tool into an existing Laravel application by utilizing Laravel Nova for the administrative panel. However, the automatically generated tool created with "php artisan nova:tool vendor/name" does not ...

VueJS search filter issue: 'search' property is not defined

Currently, I am in the process of developing an application that will consume JSON data and display it with a search filter feature, among other functionalities. I have attempted to create the necessary function for this task, however, it has not been suc ...

Retrieving the class name using jQuery

In my HTML code, there is a div with three classes defined as: <div class = "a b c"> .. </div> My goal is to access only the class b using the .attr() method. Is this achievable? ...

Sending JSON array from PHP to jQuery AJAX

Currently, I am working on an experimental project where I need to search for a product in a MySQL database using the product name and retrieve the price in the 'price input' field and sell price in the 'sellprice input' field. You can ...

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

Leveraging AJAX and jQuery for data storage

Need a solution using AJAX and jQuery to save data from one form in another form while preserving the values. The stored information should be hidden from the front end user, with an option for the user to delete the data if desired. Retrieving the stored ...

steps for setting up socket.io client

Would it be possible to reference the socket.io client library using a relative path like: src="/socket.io/socket.io.js" instead of the absolute path: src="https://miweb:6969/socket.io/socket.io.js" To establish a connection with the library, typically ...

How to disable form submission using ENTER key in jQuery when alerts are present?

My form contains a text input field. To prevent the form from being submitted when ENTER key is pressed, I used this code snippet: jQuery("#inputTags").keydown(function(event) { if (event.keyCode == '13') { event.preventDefault() ...

Is it possible for the Observable call in Angular 4 to function similarly to jQuery's synchronous AJAX method?

As I have a business logic function that needs to use HttpGet and I must wait for the result before continuing, jQuery's ajax can handle this easily. But I am curious if Observables have a similar feature? I was hoping for the result to be: John An ...

Adding schemas to the router of a Next.js 13 app is a helpful feature that can

Summary: In Next.js 13, the /app router's new changes to layout and page routing have altered how we add content to the <head>. The challenge now is how to include a schema script on each page. Next.js automatically combines <head> tags f ...

What is the best way to style a value within a v-for loop inside an el-option element in Element UI?

I'm looking for a way to format the value in label(item.value) as a decimal within a v-for loop. Below is my code snippet: <el-form-item :label="label" :required="required" prop="Jan"> <el-select v-model=& ...

Weaknesses found in the React Js library bundled with create-react-app

Each time I initiate a new react project using npx create-react-app <AppName>, the following vulnerabilities are detected: 96 vulnerabilities found - Packages audited: 1682 Severity: 65 Moderate | 30 High | 1 Critical Node Version: v14.18.1 Npm: 7.20 ...

What is the most effective way to send multiple values through the <option> value attribute?

Currently, I am in the process of creating an online shopping item page. To display all the necessary information about an item (such as price, image, name, etc.), I use the 'item_id' to loop through a database containing item info. Additionall ...

Include a Custom Button with an Optional Event Handler

I've created a customized material-ui button component: type ButtonProps = { disabled: boolean; text: string }; export function CustomButton({ disabled, text }: ButtonProps) { return ( <Button type="submit" disabled={disabled} ...

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...