Editing your Nuxt Port

hey everyone today we're going to look at how to edit your port in noxjs why would you want to do that well have you ever had to work on more than one application at the same time so i'm constantly working on more than one i have about four or five applications running between working on the nook.js website creating these videos my personal website and any other thing that i might be doing so basically what we want to do is not have to constantly have a random port opening up let me show you what i mean so this is my application and i've already got local hosts in use so when i run yarn dev i'm going to basically get this message saying that localhost 3000 is already in use and it's gonna try a random port okay well you know that's fine um it makes it very easy in visual studio code because you could just click it and it's gonna open it now the problem is that i have three screens open so it's opening the window on another window and i kind of don't want it over there i want it to open in here and this is the one i had earlier and now i'm gonna have to paste this in here and now i'll get my application as soon as it's finished spinning around um so okay that's fine i can work with that and then what happens is i don't know something breaks or um i stop it right now i need to restart it again and what it's going to do is it's going to say localhost 3000 is already in use and it's going to give me another port and now i'm going to have to open it again and as i open it again it's gone to the other window again and i'm going over here and i'm like you know copying it and i'm pasting it in here um because if i refresh this right it's going to be dead because it doesn't exist and i paste that in here now this is annoying right this is this is already during my head and i'm losing time here so what i can do i mean obviously um to open it automatically um i can actually just you know do this right you're in dev dash oh so now it's going to open directly for me so i don't have to do anything and it's i don't have to click yeah it's just opening look whoa okay that's better i like that more that was great so while this is opening i'm gonna go to my other screen and i'm gonna like just check twitter because you know that's what i do while i'm working so i'm now checking twitter right so on the other screen i'm checking twitter and then i come back in here and i stop it and i start it again and it's going to open and now it's going to open oh no because i opened twitter over there on the other screen now it's opened on the other screen and now i'm not getting the application on on this one right um so i'm going to copy this over again so this is really annoying this is doing my heading also can you see i've got like you know extra tabs open so you know even if i stay on this screen and i don't use twitter while i'm working and i open it up um i'm going to use that same yep that's great but i'm getting all these tabs open right every time i stop it and start it i have all these tabs open so how can we fix this what can we do so we can use um what's called the editing the hosting port right we're just going to focus on the port so my port it's local localhost is the host and then port is 3000 or it's giving me that random port right i don't want a random port i want it just to be always open on the same port so i can stop it and start it and it's going to know just to open that port so i don't have to keep copying and pasting from different screens and having loads of tabs open so you can see here in the documentation under features configuration under edit host import and you can actually set it directly in the nooks config right so you can use this server property you cannot import and you can add in 8 000 if you like right the default is 3 000. now that can be good but sometimes um you don't want to set it in your nooks config because maybe you're using i don't know something else and you want to make sure that the host uh or the port is the same um so what i'm gonna do is actually i mean you could actually just as i'm running npm run dev i could just type this each time right port equals 8000 but i might actually forget which number i've chosen i've done that quite a few times so the best way or the way i like to do it is actually to get the port like this right and copied in now you could use um a script and call it dev host but i actually just want to modify the dev script and make it just simple right because i'm just me using this application so dash dash port 8000 and i can use any number so let's have a look at how to do that so in my application i'm going to open my package.json and i'm going to take my script my dev script and i'm just going to add in here port 8000 actually you know what i'm going to be 4000 just because i don't know because i like it so i'm going to save that and now let's just see what happens here right i'm going to stop that and i'm going to put it yarndiv so yarndev and i've got port 4000 you can see it did localhost 4000 right i'm going to click that i'm going to open it okay it's opened it on my other window because i was checking twitter again oops right i can go here and i can open a new window and i can type in 4000 i'm going to close all my other windows so that i only have that one open so now i'm getting my application running on localhost 4 000. um as you can see it's it's loading so that's great and it's gonna finish perfect i've got my application something went wrong or i need to stop for whatever reason and i'm starting again and it's a new day or whatever and now it's gonna run on localhost 4000 so when i go back here and if i refresh that you're going to see that it's loading so i'm getting my application i don't have to have any more tabs open i don't have to keep copying and pasting from my other screen when i check my twitter messages and it just makes it much faster for development so yeah that's a great and simple way of basically just uh editing your port so that you don't have a random port each time when you're working on multiple applications so yeah this is in features configuration and just put it in your script or put it in your actual command um or if you really want to change in the nooks config but definitely i recommend just adding it to your script so i hope that was really helpful and that means uh you'll be able to um use twitter at the same time as having random ports open and you're not gonna have to like do what i was doing uh thanks very much enjoy have fun bye

Channel: Debbie O'Brien

Views: 741

Rating: 5 out of 5

Keywords: vue, nuxt, web development, nuxt.js tutorial, nuxt js, port

Id: PNMuZZCJTF8

Length: 6min 55sec (415 seconds)

Published: Wed Oct 21 2020