Cleanly Setting Axios Base URL
Playing
01. Cleanly Setting Axios Base URL

Episodes

0%
Your progress
  • Total: 6m
  • Played: 0m
  • Remaining: 6m
Join or sign in to track your progress

Transcript

00:00
In this snippet I'm going to show you two methods of setting a base URL in Axios just to nicely clear up your code. And the first thing that we're actually going to look at is a method that you may be using already and it's certainly something that I used for a long time before I realized I could actually set the base URL for all Axios requests.
00:23
So I have a really, really simple app set up here. You saw a preview of it just over here. What we're doing is making a request to the JSON placeholder API which is just basically fake data and we're just getting a list of posts and listing them out on the page.
00:37
So as long as with any changes that we make we still see that data we can be sure that we haven't broken anything. So the first thing that you might be doing and certainly something I did for a while is maybe creating some kind of config JavaScript file and exporting an object with maybe a API URL variable in here. And that's absolutely fine. You can do that.
00:59
So let's go ahead and grab this base URL here and pop that inside of our config. And let's import this from here. So let's go ahead and import say config from and let's just say at slash config just to make things simpler. And then you might want to go ahead and use backticks to pop in config dot base URL or API URL and get exactly the same result.
01:25
Now that's absolutely fine but a couple of problems with this. One, you are pulling in your config every single time you want to make an Axios request which can be a little bit annoying. Of course you can still use your config and then use the methods that we're going to discuss to actually pull it in from here. So it's good to have some kind of config file and even better use something like the EMV package to do this.
01:50
But we won't discuss that now. We'll just discuss how we can basically get this to the point where we have just making a request to post which makes a lot more sense to me. I'm going to go ahead and get rid of the config import here. In fact, let's get rid of the entire config file just for now. And let's look at the first method of doing this.
02:10
So let's come over to main.js and let's go ahead and import Axios in here from Axios. And the first thing that we could do is actually override the default globally. So we can set the base URL. Be really careful with the capitalization of URL here.
02:27
I often do this and wonder why it doesn't work. It has to be all caps. And you can just go ahead and set that inside of here. So let's go back over to app and let's actually get the URL that we're making a request to here.
02:40
And let's basically just grab this and pop this in here. Now I'm just going to comment this out for now just so we can see that this isn't working. So let's head back over to here. And, of course, we get Axios is defined but never used over here.
02:55
So let's comment that out as well. And there we go. Of course, we see no content. So as long as we import Axios in our kind of main JavaScript file, and I'm working with view here,
03:05
and then you go ahead and override the base URL, that's then going to work for you. So that's one way of doing it. Now some people don't like this method because if you are setting lots of different defaults over on Axios, you're going to end up with a long list of things here that you're setting.
03:23
For example, if you need base headers, all that kind of information is just going to be lumped into your main.js file. So most people prefer not to do this. Now I'm going to go ahead and cut this out here. I'm going to get rid of this, and we're going to look at the second method, which is not necessarily my preferred method.
03:41
It depends on the context of how I'm working, but certainly a very good method for maybe larger apps. So what I'm going to do is create a new folder inside of the base directory here called Axios. And inside of here, I'm going to create an index.js file. Now inside of here, what we're going to do is we're going to import Axios from Axios.
04:02
And we're not going to go ahead and set that like we just did. Instead, what we're going to do is we're going to export a new Axios instance. And what that means is that with this new Axios instance, the first argument allows us to just pass in any default headers, base URL, whatever you want to add inside of here.
04:20
Of course, all of that's over on the documentation. But we can just set the base URL from here. And if, of course, what you were doing earlier, as in importing your config, is the case, then you can go ahead and set it from your config or use environment variables to do this,
04:39
which would be the preferred way of doing it rather than hard coding this in, because your base URL for your API is probably going to change from development to production or staging or testing environments. So now that we've done that, what we can do is over in our component here, which is erroring at the moment, instead of importing Axios from the actual Axios module itself,
05:00
we can pull this in from our own Axios implementation or our own Axios instance that we've created. So if we come back over now and just get rid of that, you can see that this is still working. So I'd say for larger projects, this is good. Or if you just really like keeping things nice and tidy, this is a really nice method of doing it.
05:19
You're just creating an instance manually rather than importing it and starting to use it. And you're setting all of this information inside of here, exporting that, and kind of just including this in as you normally would the module anyway. And this will just work.
05:34
So they are two methods. There are other ways that you can do this, but these are the two general methods that you might want to use to set a base URL and, in fact, any other settings for Axios, either by setting this inside of main.js, by importing and overriding the defaults, or, of course, creating your own instance,
05:54
returning this and including this rather than the module. So hopefully that's helped you. And hopefully this will help to keep your Axios requests within your components or anywhere that you're using Axios, in fact, nice and tidy.

Episode summary

In this episode, we dive into two clean and common ways to set up the base URL in Axios, which is a super handy library for making HTTP requests in JavaScript and frontend frameworks like Vue. You’ll see a basic app in action, grabbing some example data from JSONPlaceholder, and we use that as a starting point to refactor our Axios setup for cleaner, more maintainable code.

First up, we look at the old way—having a config file with your API URL that you import wherever you call Axios. It works, but it can get repetitive and a bit messy.

Next, we walk through setting the Axios base URL globally in main.js by tweaking Axios’s defaults. That way, you don’t have to keep pasting the full URL everywhere—just make requests using paths like /posts. This is nice and simple, but if you add a lot of custom Axios settings at once, your main entry file can get cluttered.

So, we move on to the preferred approach for bigger and/or tidier apps: making a custom Axios instance. By creating an axios/index.js, you set all your defaults—like the base URL and any headers—in one place, and then import your version of Axios everywhere in your app. This is especially good if your base URL might change depending on the environment (development, production, etc.), since you can easily feed in config or environment variables.

By the end, you’ll know two solid methods for keeping your Axios setup tidy and maintainable, with tips on which one might work best for your project!

Episode discussion

No comments, yet. Be the first!