1

How can I provide command line arguments for a vuejs application? I use vue 3 for my frontend that communicates with the python backend (flask) via axios. Right now, I am setting the baseURL for axios in my main.js like this:

import axios from 'axios'
axios.defaults.baseURL ='http://localhost:1234/';

To be more flexible, I want to read the path ('http://localhost:1234/') from command line, but I don't understand how to do that.

I'm starting the frontend with npm like this, providing the frontend's host and port:

npm run --prefix frontend dev -- --host frontendHostName --port frontendPortNumber

How do I extend this by custom command line parameters like for backend communication, e.g. --backendHost backendHostName etc.? And how do I access those within my javascript?

I am new to JavaScript and Vue and I already read some suggestions, but I still don't understand how to solve this.

tabina
  • 1,095
  • 1
  • 14
  • 37
  • 1
    I don't think you can read it from command line, but you should be able to read it from environment variables, then do `frontendHostName="name" npm run ...` (or use a .env file) – mousetail Jun 07 '23 at 07:46
  • "frotnend", being a browser? there is no command line arguments for a web page in a browser – Jaromanda X Jun 07 '23 at 08:14
  • Thanks so much @mousetail. No command line arguments as I am used to from other languages, but I ended up using the .env file and it works. – tabina Jun 07 '23 at 08:17

2 Answers2

3

It is possible to set a variable on the command line and use it in the code, but the correct thing is to use the .env file.

Remembering that the .env file may have other postfixes for each environment, but it is not very common to be used since depending on where the application is deployed you will configure the variables in a docker, on the platform itself (for example netlify, versel, ...).

Mode via .env file

You will create an .env file at the root of the project and correctly access the value of the variable in the project through process.env.NomeVariavel.

Example

const apiHostIp = process.env.VITE_API_HOST;
const apiHostPort = process.env.VITE_API_PORT;

axios.defaults.baseURL = "http://" + apiHostIp + ":" + apiHostPort + "/";

Mode via command line

If you want to set it from the command line you will need to install the lib cross-env and change your command line to:

cross-env VITE_API_HOST=127.0.0.1 VITE_API_PORT=5000 RestanteCommand

Note: Remembering that RestanteComando is the command to start the application that is in package.json, observer that you are using vite, it must be something like this/was in package.json

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

it will look like this later

"scripts": {
  "dev": "cross-env VITE_API_HOST=127.0.0.1 VITE_API_PORT=5000 vite",
  "build": "vite build"
}

In some operating systems, it may happen that you don't read the defining variable as I explained (windows mainly), this is the reason for using it.

About lib cross-env, you can see in this comment and in the npm of the lib itself.

AntonioSantos
  • 48
  • 3
0

This is what I ended up doing:

In my project I created a .env file on root level next to my index.html.

I added the environment varibles (which I thought should be the command line arguments) like this:

VITE_API_HOST=127.0.0.1
VITE_API_PORT=5000

And then in my main.js I could access those easily with

const apiHostIp = import.meta.env.VITE_API_HOST;
const apiHostPort = import.meta.env.VITE_API_PORT;

axios.defaults.baseURL = "http://" + apiHostIp + ":" + apiHostPort + "/";
tabina
  • 1,095
  • 1
  • 14
  • 37