Setting up Axios with Npm

Question

Setting up Axios with Npm

Is it possible to set the baseURL for axios using an npm parameter?

I am interested in being able to use a command like this

npm run build --baseUrl={url address}

and have the axios configuration automatically update the baseURL parameter with the value from the command.

Can this be achieved?

javascript vue.js npm axios

Answer 1

Answer №1

Using --baseUrl in such a manner may not be advisable, as it can lead to the need for repetitive definition of --baseUrl across various scripts like npm start, resulting in convoluted code.

A suggested approach to address this issue is as follows:

Create an .env file containing development environment variables. Ensure to add this file to your .gitignore and refrain from pushing it to the production server as it is intended for development use only.
Add a new variable named BASE_URL as shown below:

BASE_URL=http://YOUR_API_LOCATION/

Utilize libraries such as dotenv (installed via npm i dotenv) to facilitate reading of .env files.
Develop a new utility for axios, for instance:

// client.js
const axios = require('axios');
const dotenv = require('dotenv');

// Retrieve all environment variables here.
dotenv.config({ path: '.env' });

// Establish a new axios instance utilizing the base url retrieved from the '.env' file.
const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL,
  /* other custom settings */
});

module.exports = axiosInstance;

You can make use of your axiosInstance as demonstrated below:

// request.js
const axiosCustomClient = require('./client');

axiosCustomClient.get('relative/path/to/your/api');

Answer 2

Using --baseUrl in such a manner may not be advisable, as it can lead to the need for repetitive definition of --baseUrl across various scripts like npm start, resulting in convoluted code.

A suggested approach to address this issue is as follows:

Create an .env file containing development environment variables. Ensure to add this file to your .gitignore and refrain from pushing it to the production server as it is intended for development use only.
Add a new variable named BASE_URL as shown below:

BASE_URL=http://YOUR_API_LOCATION/

Utilize libraries such as dotenv (installed via npm i dotenv) to facilitate reading of .env files.
Develop a new utility for axios, for instance:

// client.js
const axios = require('axios');
const dotenv = require('dotenv');

// Retrieve all environment variables here.
dotenv.config({ path: '.env' });

// Establish a new axios instance utilizing the base url retrieved from the '.env' file.
const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL,
  /* other custom settings */
});

module.exports = axiosInstance;

You can make use of your axiosInstance as demonstrated below:

// request.js
const axiosCustomClient = require('./client');

axiosCustomClient.get('relative/path/to/your/api');

Setting up Axios with Npm

Answer №1

Similar questions

Running sonar scans on a software development project that includes both C# and JavaScript code

Issues with the Web Share API navigator.share feature arise when users choose to cancel the share dialog on both IOS

Checking for different elements between two arrays in AngularJS can be achieved by iterating through

eliminate a mesh from the view following a mouse hover event triggered by a raycaster

Sending an array from node.js/express to a jade template

Import information onto the `ready` function within a Dashing Widget's Coffeescript

Extract data from a JSON object using targeted translations

Tips for Managing Errors During Zip File Extraction in Node.js

The combination of setInterval() and if(confirm()) is not possible in pure JavaScript

What could be the reason for Firebase still throwing errors after executing NPM install command?

"Implement a feature to recognize and handle various file extensions within an npm

Retrieve JSON data from Form Submission

Initiating change upon componentDidMount

struggling to locate path in Node.js REST API using Express and ES6 classes

API Post request encountering fetch failure

What are the steps for posting and setting up a custom npm package on GitHub packages under an organizational account?

What strategies can be employed to enhance the natural movement of dots on my HTML canvas?

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query

Counting and finding results in MongoDB

Can React Context be maintained while navigating between pages cached with Next.js Router Cache?